# Javascript object物件 與 Array陣列

### 物件 (Object)

想像生活中的事物都是由物件所組成，像是一個包包是由許多元素組成，物件中可以存放陣列、數值、字串、布林值或是函數等等的資料類型。

在 Javascript 中，**物件是非常重要的概念**，每個物件都有他的 property (屬性)以及 method (方法)，**物件是一個 `name/value` 的組合**，一個 name 只能有一個 value，但是一個 value 可能是很多的 name/value。

相較於之前提到的 JS 的六個純值，使用"傳值"的方式，而物件，是使用"傳址"的方式。
簡單來說就是給這個物件一個收納櫃的號碼牌，管理員再根據號碼去找到對應的收納櫃，打開收納櫃後，才會看見裡面真正的物品。

#### 宣告物件以及讀取物件中的值

1. 宣告物件的方式，需要有大括號與 `name(名稱) : value(值)`
2. 若想讀取物件變數中某個物件的值，可以使用以下幾種方式：
- `object.key(名稱)`
- `object["key(名稱)"]`
3. 讀取物件中的每一個 key 鍵值可以使用 `Object.keys(物件)`，會回傳一個包含所有 key 的陣列
4. 讀取物件中的每一個 value 值可以使用 `Object.values(物件)`，會回傳一個包含所有 value 的陣列

// 宣告物件 - 方法ㄧ ： 使用 new Object()

const myBag = new Object() // 創建一個新物件
myBag.price = 390; // 定義 key, value
myBag.size = "small";

console.log(myBag) // {price:390, size:"small"}
console.log(Object.values(myBag)) // [390,"small"]

// 宣告物件 - 方法二

const thisBag = {
   brand : "Prada";
   price : 20000 ;
   size : "small";
   color : ["white","black","yellow","green"];
   soldOut : false;
};

console.log(thisBag.price) // 這裡會顯示 20000
console.log(thisBag["brand"]) // 這裡會顯示 Prada

console.log(Object.keys(thisBag)) // ["brand","price","size","color","soldOut"]

### 陣列 (Array)

陣列是一個可以儲存一系列值的變數，利用方括號將值存於其中。陣列，他其實也是一種物件。**Arrays in JavaScript are just objects.** 陣列與物件一樣，都是"傳址"。
要知道陣列的長度可以使用 `.length` 來得知陣列中長度。

宣告陣列可以寫成 :

let thisArrayNum = [2,3,4,5,6,7];
let thisArrayString = ["字串","字串2","字串3"];
let newArray = new Array()

在 JS 中，陣列永遠是從 0 開始，所以要讀取陣列中的數值，可以在變數後方加入方括號，並填入想要讀取的編號 :

let thisArray = [2,3,4,5,6];

console.log (thisArray[0])
//這裡會顯示出 2

#### 許多陣列的方法
在使用陣列方法前要注意，有一些方法他是會改變原陣列的（Mutable Array Methods），有一些方法他是會回傳一個新的陣列（Immutable Array Methods），當使用了會改變原陣列的方法時，有可能會連帶地影響到其他跟他有關聯的物件或質，所以這部分要特別注意。

1. Mutable Array Methods
以下幾種方法，都會改變原有的陣列
`.push` : 在陣列的最後新增數值
`.unshift` : 在陣列的最前面新增數值
`.pop` : 刪除陣列的最後數值
`.shift` : 刪除陣列的第一個數值
`.splice`: 在陣列中增加或是刪除特定元素及數量
`.reverse`: 將一個陣列反轉
`.sort`: 將一個陣列進行排序
`.fill` :在陣列中增加任何數值

2. Immutable Array Methods
`.map` : 遍歷陣列，在最後回傳一個新陣列
`.filter` : 遍歷陣列並進行篩選，最後回傳一個新陣列
`.silce` : 任意擷取出陣列的某一部份
`.concat` : 結合不同的陣列
`.flat` : 將多維的陣列進行攤平
`.flatMap` : 適用於遍歷二維陣列並將其攤平
`.reduce`: 遍歷陣列元素，並且依據初始值及陣列來做運算

3. 取得陣列中的索引
`.indexOf` : 傳送 value 來取得其索引
`.findIndexOf`: 遍歷陣列，並且依據條件找到索引，如果沒有該值，則會回傳 -1

4. 取得陣列中的元素
`.find`: 回傳第一個滿足條件的元素值，否則回傳 undefined。

5. 判斷陣列中的元素是否存在或是符合抹特定條件
`.inclueds` : 判斷陣列是否包含特定的元素，並以此來回傳 true 或 false。
`.some`: 判斷陣列中的部分元素是否都符合函式的條件，回傳 true 或 false。
`every`:判斷陣列中的所有元素是否都符合函式的條件，回傳 true 或 false。

6. 將陣列合併為字串
`.join`: 將陣列合併成為一個字串

7. 如果只是要遍歷陣列
`.forEach`: 遍歷陣列，並依據函式來執行（永遠都會回傳 undefined）

以上幾種陣列方法可以參考 [MDN ARRAY](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array)

###### tags: `frontend learning`