iT邦幫忙

2021 iThome 鐵人賽

DAY 8
2
Modern Web

JavaScript 魔法入門 - 從入門到中階觀念系列 第 8

入門魔法 - 陣列

前情提要

經過上一回的測驗,我發現了自己不是天選之人。

「哪尼,為什麼我不是天選之人,我不是有魔力嗎?而且還有引導學姊妳呀!」

艾草:「哎唷,現在為了擴大培養魔法人才只好放寬魔力基準呀。在沒人才我要被派去當貓頭鷹信使耶...我明明是綠繡眼,嗚嗚嗚嗚嗚」

(兩人相看無言)

艾草:「咦,先不要哭喪著臉,天選之人很多都消失在去魔王城的路上了↑_(ΦwΦ;)Ψ。而且陣列跟魔法陣息息相關唷!」

「怕爆,那不用天選了,繼續乖乖累積魔力總量囉~~~₍₍ ◝(●˙꒳˙●)◜ ₎₎」
https://ithelp.ithome.com.tw/upload/images/20210922/20139066IWRVu2VEMl.png


陣列

今天讓我們聊聊陣列吧,陣列是一種有順序的資料集合,外層使用 [] 中括號包覆裡面的值,而值可以放原始型別、物件型別等各種型別的值,陣列是使用 , 逗號隔開,接下來就讓我們來練習宣告一個變數並賦予值為陣列吧!

let array = ['item0','item1'];

陣列的讀取

為什麼是從零開始寫起呢?因為陣列是從零開始讀取的,如下:

let array = ['item0','item1'];
console.log(array[0])//'item0'

而要讀取陣列的長度,可以使用 length 的方式:

let array = ['item0','item1'];
console.log(array.length)//2

陣列的型別

另外陣列是物件型別,所以當我們去查看它的型別時,會出現以下狀況:

let array = [];
console.log(typeof array)//object

那如果要查看陣列的型別可以怎麼做呢?

let array = [];
Array.isArray(array)//true

可以使用 Array.isArray() 的方式,將要判斷的內容放入()小括號內,如果是陣列的話,就會回傳 true

陣列的修改

陣列的修改方式為使用 [] 中括號讀取值後,直接賦予新的值即可,如下:

let array = [0];
array[0] = 1;
console.log(array)//[1]

陣列的新增

這邊會介紹三種新增的方式,包含預設新增的方式、unshift()push() 的方式!

預設寫入的方式可以直接用 [] 去指定位置,並賦予該陣列值,如下:

let array = [0];
array[1] = 1;

這樣就完成囉,是不是很簡單呀?

如果我們今天想指定到其他位置也可以,如下:

let array = [0];
array[2] = 2;
console.log(array)//[0, empty, 2]
console.log(array[1])//undefined
console.log(array.length)//3

如上面的範例,如果指定到第2筆資料,但第1筆尚未存放值的情況下,會被帶入 undefined ,且不會影響陣列長度,所以讓我們開心的隨便亂放吧(誤,單純玩笑話,請不要亂來

接下來來介紹第二個方法 unshift() 吧!

unshift() 會將資料塞入在陣列的第一個值,如下:

let array = [1];
array.unshift(0);
console.log(array)//[0, 1]

最後陣列的新增方式讓我們來學習 push() 吧!

push() 會將資料塞入在陣列的最後一個值,如下:

let array = [1];
array.push(0);
console.log(array)//[1, 0]

知識點:陣列的新增

  • 可以使用指定位置的方式寫入
  • unshift() 寫入的資料會塞在第一筆
  • push() 寫入的資料會塞在最後一筆

陣列的刪除

這篇會簡單介紹三種陣列的刪除方式:pop()shift()splice(,)

讓我們先來學習 pop() 吧!

pop() 會刪除該陣列的最後一筆資料,如下:

let array = [0,1,2];
array.pop();
console.log(array)//[0, 1]

shift() 會刪除該陣列的第一筆資料,如下:

let array = [0,1,2];
array.shift();
console.log(array)//[1, 2]

splice(,) 比較特別,它可以帶入三個參數,分別代表:

第一個參數: start 起始位置

第二個參數:deleteCount 要刪除幾筆資料(選擇性)

第三個參數:item1, item2, ... 要加入陣列的元素(選擇性)

splice(start,deleteCount) 可以讓我們指定想刪除的位置,所以當我們今天想刪除中間的1時可以使用以下方法:

let array = [0,1,2];
array.splice(1,1);
console.log(array)//[0, 2]

splice(start,deleteCount,item) 可以讓我們指定想刪除的位置,並在刪除的位置內新增一個值:

let array = [0,1,2];
array.splice(0,1,3);
console.log(array)//[3, 1, 2]

指定在第零筆刪除一筆資料,並在該處插入數字 3 。

知識點:陣列的刪除

  • pop() 會刪除陣列的最後一筆資料
  • shift() 會刪除陣列的第一筆資料
  • splice(,) 可以指定刪除位置,分別要帶入三個參數:
    • 第一個代表:起始位置
    • 第二個代表:要刪除幾筆資料
    • 第三個代表:要新增的值

總結

陣列

  • 外層要使用中括號包覆
  • 每個值間是使用 , 逗號分隔
  • 陣列值從零開始讀取
  • 可以使用 length 來讀取長度
  • 陣列的型別為 object
  • 可以使用 Array.isArray() 來判斷是否為陣列
  • 陣列的新增可以使用 : 預設新增的方式、unshift()push()
  • 陣列的刪除可以使用:pop()shift()splice()

小練習

請問以下選項何者錯誤?

let herbs = ["mugwort","mint","vanilla"];
console.log(herbs[1]);//選項一
herbs.pop();
herbs.push("orris");
herbs.splice(0,1);

A 選項一會讀取出 "mint"
B 陣列中僅存的值為 ["mint", "orris"]
C herbs.pop() 會刪除陣列中的最後一筆資料
D herbs.push("orris") 會在陣列的最前方塞入一筆資料
E splice(0,1) 第一個參數零代表起始位置,第二個參數代表往後刪除一筆

解答:透過陣列方法 push 可以新增資料,資料會被塞入最後一筆,所以答案是 D 。

參考文獻

JavaScript 必修篇 - 前端修練全攻略(六角學院)
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/splice


上一篇
入門魔法 - 流程判斷 if else if
下一篇
入門魔法 - 物件
系列文
JavaScript 魔法入門 - 從入門到中階觀念30

尚未有邦友留言

立即登入留言