iT邦幫忙

2021 iThome 鐵人賽

DAY 25
0
Modern Web

從零開始的JS學習之路系列 第 25

[Day25] Array methods 陣列操作方法(3)

直接進入 Array methods 實作練習主題。

push()

新增元素至原陣列末端,可一次新增多個,並用逗號 , 隔開,新增後 length 會跟著改變,如下例:

const numarr1 = [16, 14, 76, 53, 43];
numarr1.push(13, 15, 17); 
console.log(numarr1); // [16, 14, 76, 53, 43, 13, 15, 17],length 變 8

pop()

刪除並取出原陣列最後一個元素。

const numarr1 = [16, 14, 76, 53, 43];
const a = numarr1.pop();
console.log(numarr1); // [16, 14, 76, 53] 
console.log(a); // 43

shift()

與 pop() 不同的是,shift 是刪除並取出原陣列第一個元素,

const numarr2 = [16, 14, 76, 53];
const b = numarr2.shift();
console.log(numarr2); // [14, 76 ,53]
console.log(b); // 16

unshift()

unshift 是新增元素至陣列的開頭,可新增多個元素,並用逗號隔開:

const numarr2 = [16, 14, 76, 53];
numarr2.unshift("Andy", "雙十節", "國慶日");
console.log(numarr2); // ['Andy', '雙十節', '國慶日', 16, 14, 76, 53]

reverse()

將陣列反轉,變更原本的順序:

const newArr1 = [1, 2, 3, 4, 5, 6, 7]
newArr1.reverse();
console.log(newArr1); // [7, 6, 5, 4, 3, 2, 1]

splice()

包含三個參數(index, length, elements),

  • index 為必填
  • length 選填,若不填則視第一位(index)設定後面都會被刪除,填 0 則是沒有元素會被刪除
  • elements 選填,若不新增則不填。
const newArr1 = [1, 2, 3, 4, 5, 6, 7]
newArr1.splice(4)
console.log(newArr1); // [1, 2, 3, 4]

例 2: splice(4, 2, 3)意思就是從索引值 4 開始移除兩個元素,並新增 3。

const newArr2 = [16, 14, 76, 53, 43, "小明", "安迪"]
newArr2.splice(4, 2, 3)
console.log(newArr2); // [16, 14, 76, 53, 3, '安迪'] 
// 原索引值的 43 跟小明被移除並新增 3

參考資料

Array-MDN
JavaScript Array 陣列操作方法大全 ( 含 ES6 )-OOXX


上一篇
[Day24] Array methods 陣列操作方法(2)
下一篇
[Day26] String methods 字串操作方法(1)
系列文
從零開始的JS學習之路30

尚未有邦友留言

立即登入留言