【JavaScript基礎】：Array Methods — 陣列方法整理

JavaScript, 前端筆記 / 2020-08-19

陣列(array)屬於物件(object)的一種，在Javacript中有許多陣列方法(array methods)可做轉換或運算，來整理一下在MDN看到陣列常見和相關的方法。

1. Array and String：陣列與字串的轉換

字串與陣列相關的方法

1.1 字串轉換成陣列

1.1.1 Array.from()

這個方法不只可以轉換字串，還可以轉換類陣列等等。

語法：

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

console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]

1.1.2 str.split()

這個方法可以決定要用甚麼字元來切割字串，依據該字元切割字串後再分別放到陣列中。

語法：

str.split([separator[, limit]])

separator放你想根據甚麼字元來切割字串，limit則是你想切割幾個字串放到陣列中。

const myString = 'Hello World. How are you doing?'
const splits = myString.split(' ', 3)
// 遇到空字串則切割成2個元素，共切割3個元素放到陣列中
console.log(splits)
// ["Hello", "World.", "How"]

1.2 陣列轉換成字串

1.2.1 arr.join()

語法：

arr.join([separator])

separator為你希望用甚麼字元來連接陣列之間的元素，如果為空值，則預設會用，將元素分開。

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

1.2.2 String(arr)

語法：

String(arr)

const elements = ['Fire', 'Air', 'Water'];

console.log(String(elements));
// expected output: "Fire,Air,Water"

1.2.3 arr.toString()

語法：

arr.toString()

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.toString());
// expected output: "Fire,Air,Water"

要注意的是只有join可以選擇要用甚麼字元連接陣列元素，用toString和String就只能用,連接陣列元素。

2. Array methods – 陣列方法：針對陣列操作

2.1 判斷是否為陣列

2.1.1 Array.isArray(arr)

語法：

Array.isArray(arr)

arr為你想判斷是否為陣列的資料。

let arr = [2, 4, 6]

console.log(Array.isArray(arr)); //true
console.log(Array.isArray([1, 2, 3]));  // true
console.log(Array.isArray({foo: 123})); // false
console.log(Array.isArray('foobar'));   // false
console.log(Array.isArray(undefined));  // false

2.2 新增元素到陣列

2.2.1 arr.push()

新增元素到陣列的末端。

語法：

arr.push([element1[, …[, elementN]]])

const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count);
// expected output: 4
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows"]

2.2.2 arr.unshift()

新增元素到陣列的首端。

語法：

arr.unshift(element1[, …[, elementN]])

const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// expected output: 5

console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]

2.3 刪除陣列中的元素

2.3.1 arr.pop()

刪除陣列中的末端元素，並且回傳被刪除元素的值，arr.length會-1。

語法：

arr.pop()

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];
const lastElement = plants.pop()

console.log(lastElement);
// expected output: "tomato"

console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

2.3.2 arr.shift()

刪除陣列中的首端元素，並且回傳被刪除元素的值，arr.length會-1。

語法：

arr.shift()

const array1 = [1, 2, 3];
const firstElement = array1.shift();

console.log(firstElement);
// expected output: 1

console.log(array1);
// expected output: Array [2, 3]

要注意的是：arr.pop和arr.push的效能會比arr.shift和arr.unshift來的好，因為arr.shift和arr.unshift除了將首端新增/刪除元素外，還需要把首端之後的元素往前移/往後移，改變每個元素的index，但arr.pop和arr.push新增/刪減末端元素並不需要改變其他元素的index，只需變動length屬性而已。

2.3.3 delete arr[i]

可以刪除第i項元素，但要注意使用delete指令並不會改變陣列的長度。

2.3 刪除陣列中的元素，並同時新增元素到陣列中

2.3.1 arr.splice()

可以選擇從哪個index開始刪除元素，刪除幾個元素，同時新增那些元素。

語法：

array.splice(start[, deleteCount[, item1[, item2[, …]]]])

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// 從index=1開始刪除0個元素，並新增'Feb'。
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// 從index=4開始刪除1個元素，並新增'May'。
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

months.splice(2,2);
// 從index=2開始刪除2個元素
console.log(months);
// expected output: Array ["Jan", "Feb", "May"]

months.splice(3, 0, 'June', 'July');
// 從index=3開始刪除0個元素，並新增'June', 'July'
console.log(months);
// expected output: Array ["Jan", "Feb", "May", "June", "July"]

months.splice(-3, 2, 'August');
// 從index=-3(最後一個元素index=-1)開始刪除2個元素，並新增'August'
console.log(months);
// expected output: Array ["Jan", "Feb", "August", "July"]

2.4 截取陣列的某一段，並回傳

2.4.1 arr.slice()

此方法不會改變原來陣列的值！

截取陣列中的某一段，並且回傳。

語法：

arr.slice([start[, end]])

從index = start 開始截取到 index = end。

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2))
// expected output: Array ['duck', 'elephant']

console.log(animals);
// expected output: Array ['ant', 'bison', 'camel', 'duck', 'elephant'];

2.5 合併多個陣列

2.5.1 arr.concat()

此方法不會改變原來陣列的值！

用來合併一個或多個陣列。

語法：

const new_array = old_array.concat([value1[, value2[, …[, valueN]]]])

let num1 = [1, 2, 3];
let num2 = [4, 5, 6];
let num3 = [7, 8, 9];
let numbers = num1.concat(num2, num3);

console.log(numbers); 
// results in [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(num1);
// results in [1, 2, 3]

num1 = [[1]];
num2 = [2, [3]];
numbers = num1.concat(num2);

console.log(numbers);
// results in [[1], 2, [3]]

2.6 用某個元素填滿陣列

2.6.1 arr.fill()

可以決定從start index到 end index，用某元素填滿。

語法：

arr.fill(value[, start[, end]])

const array1 = [1, 2, 3, 4];

// 用'0'填滿index = 2到index = 4
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]

// 用'5'填滿index = 1之後的元素
console.log(array1.fill(5, 1));
// expected output: [1, 5, 5, 5]

//用'6'填滿陣列
console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]

3. Array methods – 陣列方法：針對每個元素操作

3.1 對陣列的每個元素執行某函數

3.1.1 arr.forEach()

單純對陣列的所有元素都執行某個函數，並不會回傳值。

語法：

arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

const arraySparse = [1,3,,7]
let numCallbackRuns = 0

arraySparse.forEach((element) => {
  console.log(element)
  numCallbackRuns++
})

console.log("numCallbackRuns: ", numCallbackRuns)

// 1
// 3
// 7
// numCallbackRuns: 3

3.1.2 arr.map()

此方法不會改變原來陣列的值！

將陣列的每個元素執行某個函數後回傳陣列。

語法：

arr.map(function callback( currentValue[, index[, array]]) {
// return element for new_array
}[, thisArg])

let numbers = [1, 4, 9]
let roots = numbers.map(function(num) {
    return Math.sqrt(num)
})
// roots is now     [1, 2, 3]
// numbers is still [1, 4, 9]

3.2 用某函數過濾陣列

3.2.1 arr.filter()

此方法不會改變原來陣列的值！

對每個陣列元素執行某個函數，回傳符合函數條件的陣列元素。

語法：

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

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

console.log(words);
// expected output: Array ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

3.3 尋找陣列中是否包含某元素

3.3.1 arr.indexOf()

尋找陣列中是否有某個元素，有的話回傳找到該元素的第1個index值，沒有的話回傳-1。

語法：

arr.indexOf(searchElement[, fromIndex])

searchElement為要尋找的陣列元素，fromIndex為從陣列中的哪個index開始尋找。

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4

console.log(beasts.indexOf('giraffe'));
// expected output: -1

3.3.2 arr.lastIndexOf()

尋找陣列中是否有某個元素，有的話回傳找到該元素的最後1個index值，沒有的話回傳-1。

語法：

arr.lastIndexOf(searchElement[, fromIndex])

searchElement為要尋找的陣列元素，fromIndex為從陣列中的哪個index開始尋找。

const animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];

console.log(animals.lastIndexOf('Dodo'));
// expected output: 3

console.log(animals.lastIndexOf('Tiger'));
// expected output: 1

3.3.3 arr.includes()

尋找陣列中是否有某個元素，有的話回傳true，沒有的話回傳false。

語法：

arr.includes(valueToFind[, fromIndex])

valueToFind為要尋找的陣列元素，fromIndex為從陣列中的哪個index開始尋找。

const array1 = [1, 2, 3];

console.log(array1.includes(2));
// expected output: true

const pets = ['cat', 'dog', 'bat'];

console.log(pets.includes('cat'));
// expected output: true

console.log(pets.includes('at'));
// expected output: false

3.4 尋找陣列中是否有符合某函數條件的元素

3.4.1 arr.findIndex()

尋找陣列中是否有符合某函數條件的元素，有的話回傳第1個符合該函數條件元素的index值，沒有的話回傳-1。

語法：

arr.findIndex(callback( element[, index[, array]] )[, thisArg])

const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));
// expected output: 3

3.4.2 arr.find()

尋找陣列中是否有符合某函數條件的元素，有的話回傳第1個符合該函數條件元素的值，沒有的話回傳undefined。

語法：

arr.find(callback(element[, index[, array]])[, thisArg])

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);
const found1 = array1.find(element => element < 5);

console.log(found);
// expected output: 12
console.log(found1);
// expected output: undefined

3.5 比對陣列中的元素是否符合某函數條件

3.5.1 arr.every()

比對陣列中的所有元素是否符合某函數條件，如果所有元素皆符合，回傳true，否則，回傳false。

語法：

arr.every(callback(element[, index[, array]])[, thisArg])

function isBigEnough(element, index, array) {
  return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough);   // false
[12, 54, 18, 130, 44].every(isBigEnough); // true

3.5.2 arr.some()

比對陣列中的元素是否符合某函數條件，如果有任一元素符合，回傳true，否則，回傳false。

語法：

arr.some(callback(element[, index[, array]])[, thisArg])

function isBiggerThan10(element, index, array) {
  return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true

3.6 排列陣列元素

3.6.1 arr.reverse()

將陣列元素反轉，從尾排到頭。

const array1 = ['one', 'two', 'three'];
console.log('array1:', array1);
// expected output: "array1:" Array ["one", "two", "three"]

const reversed = array1.reverse();
console.log('reversed:', reversed);
// expected output: "reversed:" Array ["three", "two", "one"]

// Careful: reverse is destructive -- it changes the original array.
console.log('array1:', array1);
// expected output: "array1:" Array ["three", "two", "one"]

3.6.2 arr.sort()

按照compareFunction重新排列陣列元素。

語法：

arr.sort([compareFunction])

let arr = [5, 6, 3, 2, 9];
arr.sort(function(a,b) {
    return a-b
})
console.log(arr)
// [2, 3, 5, 6, 9]

arr.sort(function(a, b) {
    return b-a
})
console.log(arr)
// [9, 6, 5, 3, 2]

如果沒有compareFunction，則會將元素轉換為字串，並根據字串的unicode編碼位置作排序。

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]

3.7 將陣列中的元素層層執行某函數

3.7.1 arr.reduce()

可以累積對陣列中的元素執行某個函數，有點類似+=或*=的概念。

語法：

arr.reduce(callback( accumulator, currentValue[, index[, array]] )[, initialValue])

let sum = [0, 1, 2, 3].reduce(function (accumulator, currentValue) {
  return accumulator + currentValue
}, 0)
// sum is 6

Related Posts

如何實作出Read more 按鈕？

JavaScript, 前端筆記

「該如何實作出Read more 按鈕呢？」今天在寫 [FE210] 從新手到中手：前端工程加強班 這門課的作業1時，最後一個自我練習是「這次實作的畫面當頻道名稱字太多的時候，會超出一格的大小或者會直接被卡掉，有沒有辦法讓字太多的時候在尾巴顯示...？

Read More »

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top