0%

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

Day 07

只要有資料,都會有 CRUD ,那陣列呢?

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 陣列常値 // 數字陣列
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]這個規則取就可以了:

1
2
3
4
5
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回來。

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

取物件型態資料的方法

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

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

ES6 的好物

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

寫入即是更新 update

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

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

1
2
3
4
5
6
7
8
9
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]

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

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