如何讀取和寫入陣列 Array 元素

Day 07

只要有資料，都會有 CRUD ，那陣列呢？

CRUD 是什麼？ ~~能吃嗎？？~~ CRUD 分別代表：建立 Create, 讀取 Read, 更新 Update 和刪除 delete 。如果資料只能讀不能取，那會很悲慘，就像逛到一間好吃的甜點店，裡面擺滿了好吃的法式甜點，我們無法吃到，也無法買到，那不是很失落？ ~~其實掏錢就可以了。~~

這一排的第[ ]個位子坐著誰？

要讀取或寫入陣列這件事情，並不是那麼困難，因為陣列是物件的另一種特殊形式，只要使用方括號 [ ]，即可指定某個元素，如果陣列裡有物件型態的元素也一樣用這種方式取得。記得方括號是元素的位置，也就是這個元素的所在索引值(index)。

如果想讀取的元素不存在，例如陣列只有 5 個元素，我們卻想要讀取第 7 個，Javascrupt 並不會因此報錯，而直接回應 undefined給我們。我們來看看如何取值吧！

arrayName[index] / 陣列名[索引值]

以下有許多不同型態的陣列：

// 陣列常値 // 數字陣列
const arr1 = [1, 2, 3];

// 非同型陣列
const arr2 = ['one', 2, 'three'];

// 陣列裡有陣列
const arr3 = [
  [1, 2, 3],
  ['one', 2, 'three']
];

// 非同型陣列
const arr4 = [
  { name: 'Tsuifei', type: 'object', luckyNumber: [5, 7, 13, 42] },
  [
    { name: 'Philippe', type: 'object' },
    { name: 'Ayda', type: 'object' }
  ],
  1,
  function too() {
    return 'array can contain function too';
  },
  'three'
];

如果想要取出某個陣列，只要照arrayName[index]這個規則取就可以了:

arr1[1]; // 2
arr2[0]; // "one"
arr3[1]; //(3) ["one", 2, "three"]
arr4[3]; // ƒ too() { return "array can contain function too" }
arr3[2]; // undefined, arr3 並沒有這個元素

取陣列的最後一個元素

也可以利用陣列長度屬性 length-1 的特性，輕鬆取到最後一個元素。

1 2	arr4[arr4.length - 1]; // "three" arr3[arr3.length - 1]; // (3) ["one", 2, "three"]

取陣列中的陣列一層層找

如果遇到陣列中還有陣列，可以利用多層的中括號[ ][ ]取到值。但只限於陣列裡的陣列，如果是非同型資料的陣列資料，就無法用這個方式取了。

1	arr3[1][2]; // "three"

座位沒人 undefined

如果陣列是稀疏陣列，那麼當然是找不到，而會丟個undefined回來。

let arr5 = [
  [1, 2, , , 5],
  ['a', , 'c']
];
arr5[1][1]; // undefined

取物件型態資料的方法

如果是陣列裡面有物件型態的資料，就無法用陣列的方括號[]來取，而要用點 .加上key來取值。

1	arr4[0].luckyNumber; // (4) [5, 7, 13, 42]

ES6 的好物

在 ES6 新增加的功能中，有一個很好用的方法叫解構賦值，它可以把陣列或物件中的資料取出成一個獨立變數，也算是讀取的一種方法，但有礙篇幅，有機會我們再來討論吧。

寫入即是更新 update

當我們是某一個網站的會員，我們都可以找到可以修改我們個人資料的頁面，我們把新的資料更新，其實也是在「覆蓋」我們之前填的資料。

陣列讀入資料的方式基本上和取出的方式ㄧ樣，都是依照陣列的位置來進行覆蓋，以單個元素或整個陣列為單位的方式都可行。

let arr5 = [1, 2, 3, 4, 5];

arr5[2] = 42; // [1, 2, 42, 4, 5]

arr5[5] = { say: 'hi', name: 'Tsuifei', city: 'Tainan' };
// [1, 2, 42, 4, 5, {say: "hi", name:"Tsuifei", city:"Tainan"}]

arr5[5].say = 'Hello';
arr5[5]; // {say: "hi", name:"Tsuifei", city:"Tainan"}

不小心成為稀疏陣列

如果陣列長度是 5 ，但我們指定讀入的位置比陣列長度大，那麼就會造成陣列成為稀疏陣列，JavaScript 也會以undefined來填補這些空隙，並將長度延展至指定讀入的長度。

1 2	let arr6 = [1, 2, 3, 4, 5]; arr6[8] = 42; // (9) [1, 2, 3, 4, 5, empty × 3, 42]

今天就介紹到這裡，相信今天的小菜口味不是很重，且很好消化，如果熟悉這些讀取規則，相信在將來學到物件Object或JSON格式的資料，應該會更好瞭解才是。

如有需要改進的地方，拜託懇求請告知，我會盡量快速度修改，感謝您～