JavaScript Array (陣列)-學習筆記一

Thomas Hung

Published in

Thomas 學習筆記

9 min readMay 1, 2020

JavaScript 中 Array 是一個物件，裡面可以存入任何型式的資料，而且它是一個有順序性的集合 ，且只能透過[] 來存取。

宣告陣列 (Create an Array)

宣告陣列有兩種方式，第一種是常見的陣列實字

let arrName = ['a', 'b', 'c'] arrName[0]  // 'a'
arrName[1]  // 'b'
arrName[2]  // 'c'
arrName[arrName.length -1]  // 'c'

在陣列中我們稱每個值為元素，每個元素存取位置都稱為索引值(index)，索引值是從 0 開始，表示第一個元素，之後索引值位序加 1 ( 0,1,2…)，並透過 [] 來存取陣列中的元素。

如要更改陣列中元素值時，可透過賦值方式更改或 Array.prototype 中的方法來更改元素。

arrName[0] = 'd'  //賦值
arrName[1] = 100  //賦值arrName  // ['d', 100, 'c']

宣告陣列另一種方式，透過 new 建構子方式建立陣列物件

let arr = new Array()
arr[0] = 'a'
arr[1] = 'b'
arr[2] = 'c'
arr  // ['a', 'b', 'c']

只不過這方式來建立陣列但不推薦這方式，因為會佔用記憶體，未來有時間再說明。

Array 物件內建的屬性 (Properties)

Array.length

取得陣列中參數的長度。
這個屬性值可以被覆寫的

let arrName = ['a', 'b', 'c']arrName.length  //輸出 3arrName.length = 1 // 長度更改為1
arrName.length     //輸出 1
arrName   //輸出 ['a']arrName.length = 3  // 長度更改原值 3
arrName  //輸出 ["a", undefined, undefined] 之後會被undefined填補

Array 物件內建的方法 (Methods)

Array.from(arrayLike[, mapFn[, thisArg]])

將類陣列轉換型態成陣列，並可使用陣列屬性與方法。
參數 arrayLike : 類陣列型態。
參數 mapFn: 將此 arrayLike 參數使用迭代方法，如同 Array.map()。

/*-- HTML --*/     <ul class="menu">
      <li><a href="#">Who am I</a></li>
      <li><a href="#">My Work</a></li>
      <li><a href="#">Contact me</a></li>
    </ul>/*-- JS--*/let li = document.querySelectorAll('li')Array.from(li).map(el => el.textContent)  // ["Who am I", "My Work", "Contact me"]

Array.isArray(array)

判斷傳入值是否為陣列型式，並回傳布林值 true 、false。
參數 array : 資料型態，判斷此資料是否為陣列。

Array.isArray([1, 2, 3])  //true
Array.isArray(new Array()) //trueArray.isArray('abc')  //false
Array.isArray(null)   //false
Array.isArray(undefined)       //false
Array.isArray({ obj: 'abc' })  //false

Array.of(element0[, element1[, …[, elementN]]])

回傳建立陣列方法。
參數elementN : 多個陣列的元素。
與 Array() 建立不同是，輸入單個元素會變成 undefined 。

Array.of(3)  //[3]
Array.of(1, 2, 3)  //[1, 2, 3]Array(3)  //[undefined, undefined, undefined]
Array(1, 2, 3)  //[1, 2, 3]

Array.prototype.concat(value1[, value2[, …[, valueN]]])

用來合併單個或多個以上的陣列，並回傳新的陣列。
參數valueN : 多個陣列的數組。

let arr = [1, 2, 3]
let arr2 = [4, 5]arr.concat(arr2, [6, 7])  //[ 1, 2, 3, 4, 5, 6, 7 ]arr.concat('abc')  //[ 1, 2, 3, 'abc' ]

Array.prototype.map(callback(currentValue[, index[, array]])

用來遍歷陣列中每個元素，將元素傳入指定的函式中，並回傳新的陣列。
callback : 指定的函式，裡面有三個參數。
參數 currentValue :代表目前處理的元素。
參數 index:代表目前處理的索引值。
參數 array:代表陣列本身。

let arr = [1, 2, 3]let arrMap = arr.map(val => val * 2)arr     //[ 1, 2, 3 ] 原本陣列並未改變
arrMap  //[ 2, 4, 6 ]

也可以代入 Math 物件的方法

let trunc = [1, 8, 27].map(Math.cbrt) //Math.cbrt() 回傳立方根
trunc  //[ 1, 2, 3 ]

或使用原型繼承與函數 call 呼叫

let map = Array.prototype.maplet results = map.call('obj', (val) => val.toUpperCase())results  //[ 'O', 'B', 'J' ]

Array.prototype.slice([begin[, end]])

可用來截取陣列任何部份，並回傳新陣列。
參數 begin: 指定開始截取索引的位置(索引值從 0 開始)，省略時預設是 0，但數值大於陣列長度，會反回空陣列 []。
參數 end:指定結束截取索引的位置，但不包括結束索引的元素，如省略時，會截取到最後，數值如是負數，會由右開始選取，如 -1為最後元素。

let arr = [1, 2, 3, 4, 5]let results = arr.slice(6)
results  // []; begin數值大於陣列長度，會反回空陣列results = arr.slice(1)
results  // [ 2, 3, 4, 5 ]; end 省略時，會截取到最後results = arr.slice(2, 4)
results  // [ 3, 4 ]

Array.prototype.filter(callback(element[, index[, array]])[, thisArg])

根據指定的陣列篩選出來符合條件的元素，並回傳符合條件的新陣列。
callback : 指定的條件函式，裡面有三個參數。
參數 currentValue :代表目前處理的元素。
參數 index:代表目前處理的索引值。
參數 array:代表陣列本身。
參數 thisArg:代表callback的 this 指向哪個物件。

const number=[10,20,30,40,50,60,70,80,90]let results = number.filter(val => val > 50)
results //[ 60, 70, 80, 90 ]

進階篩選

const words= ['apple', 'banana', 'grapes', 'mango', 'orange']let filterWords = (word) => words.filter(item => item.toLowerCase().indexOf(word.toLowerCase()) > -1)filterWords('an')  //[ 'banana', 'mango', 'orange' ]

Array.prototype.unshift(element1, …, elementN)

新增元素至陣列最前面，並取代原陣列。
參數 elementN: 代表目前處理的單個或多個元素。

const arr = [1, 2, 3, 4]arr.unshift('a', 'b')arr  //[ 'a', 'b', 1, 2, 3, 4 ]

使用物件原型方式

const arr1 = [1, 2, 3, 4]
const arr2 = ['a', 'b', 'c', 'd']Array.prototype.unshift.apply(arr1, arr2)  //使用函式呼叫 apply
arr1  //[ 'a', 'b', 'c', 'd', 1, 2, 3, 4 ] 將 arr2 合併到 arr1

Array.prototype.shift()

移除陣列最前面元素，並回傳移除元素的陣列，不會改變原陣列。

const arr = [1, 2, 3, 4]const arrRemove = arr.shift()arrRemove // 1
arr       //[ 2, 3, 4 ] 不會改變原陣列

Array.prototype.push(element1, …, elementN)

新增元素至陣列最後面，並取代原陣列。
參數 elementN: 代表目前處理的單個或多個元素。

const arr = [1, 2, 3, 4]arr.push('a', 'b')
arr  //[ 1, 2, 3, 4, 'a', 'b' ]

Array.prototype.pop()

移除陣列最後面元素，並回傳移除元素的陣列，不會改變原陣列。

const arr = [1, 2, 3, 4]const arrRemove = arr.shift()arrRemove // 1
arr       //[ 2, 3, 4 ] 不會改變原陣列