iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 7
1
自我挑戰組

JavaScript之一定要了解的 Array 與方法系列 第 7

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

Day 7

只要有資料,都會有 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 的特性,輕鬆取到最後一個元素。

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

取陣列中的陣列 一層層找

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

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

座位沒人 undefined

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

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

取物件型態資料的方法

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

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來填補這些空隙,並將長度延展至指定讀入的長度。

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

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

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


上一篇
JS 陣列 Array 有哪幾種?
下一篇
JS 判別是否為陣列 Array
系列文
JavaScript之一定要了解的 Array 與方法34
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
janshawn
iT邦新手 5 級 ‧ 2019-12-24 08:40:28

有看到了一些問題~附上圖片~
取物件型態資料的方法
陣列應該也可以用以下紅色框框那種方式去取~不一定要用.

還有這邊是不是打錯了~

tsuifei iT邦新手 4 級 ‧ 2019-12-25 05:35:46 檢舉

不好意思,圖看不見,看不出是哪裡.....可否重貼?感謝感謝~

janshawn iT邦新手 5 級 ‧ 2019-12-25 08:13:13 檢舉

我重新上傳過了,你再看一下~

我要留言

立即登入留言