28個Javascript陣列方法，開發者的小抄

作者：Rahul Sharma
譯者：前端小智
來源：dev

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

最近面試有道題是至少寫出 15 個陣列方法，陣列方法平時經常用到的也就6-7個，突然要一下子寫出15個，還是有點卡殼了，今天整理一波，日後好複習。

Array.map()

map() 方法建立一個新陣列，這個新陣列由原陣列中的每個元素都呼叫一次提供的函式後的返回值組成。

const list = [?, ?, ?, ?];
list.map((⚪️) => ?); // [?, ?, ?, ?]

const list = [1, 2, 3, 4];
list.map((el) => el * 2); // [2, 4, 6, 8]

Array.filter()

filter() 方法建立一個新陣列, 其包含通過所提供函式實現的測試的所有元素。

const list = [?, ?, ?, ?];
list.filter((⚪️) => ⚪️ === ?); // [?, ?]

// Code
const list = [1, 2, 3, 4];
list.filter((el) => el % 2 === 0); // [2, 4]

Array.reduce()

reduce() 方法對陣列中的每個元素按序執行一個由您提供的 reducer 函式，每一次執行 reducer 會將先前元素的計算結果作為引數傳入，最後將其結果彙總為單個返回值。

const list = [?, ?, ?, ?, ?];
list.reduce((⬜️, ⚪️) => ⬜️ + ⚪️); // ? + ? + ? + ? + ?

// OR
const list = [1, 2, 3, 4, 5];
list.reduce((total, item) => total + item, 0); // 15

Array.reduceRight()

reduceRight() 方法的功能和 reduce() 功能是一樣的，不同的是 reduceRight() 從陣列的末尾向前將陣列中的陣列項做累加。

const list = [?, ?, ?, ?, ?];
list.reduceRight((⬜️, ⚪️) => ⬜️ + ⚪️); // ? + ? + ? + ? + ?

// Code
const list = [1, 2, 3, 4, 5];
list.reduceRight((total, item) => total + item, 0); // 15

Array.fill()

fill() 方法用一個固定值填充一個陣列中從起始索引到終止索引內的全部元素。不包括終止索引。

const list = [?, ?, ?, ?, ?];
list.fill(?); // [?, ?, ?, ?, ?]


const list = [1, 2, 3, 4, 5];
list.fill(0); // [0, 0, 0, 0, 0]

Array.find()

find() 方法返回陣列中滿足提供的測試函式的第一個元素的值。否則返回 undefined。

const list = [?, ?, ?, ?, ?];
list.find((⚪️) => ⚪️ === ?); // ?
list.find((⚪️) => ⚪️ === ?); // undefined


const list = [1, 2, 3, 4, 5];
list.find((el) => el === 3); // 3
list.find((el) => el === 6); // undefined

Array.indexOf()

indexOf() 方法返回在陣列中可以找到一個給定元素的第一個索引，如果不存在，則返回-1。

const list = [?, ?, ?, ?, ?];
list.indexOf(?); // 0
list.indexOf(?); // -1

// Code
const list = [1, 2, 3, 4, 5];
list.indexOf(3); // 2
list.indexOf(6); // -1

Array.lastIndexOf()

arr.lastIndexOf(searchElement[, fromIndex])

lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或變數）在陣列中的最後一個的索引，如果不存在則返回 -1。從陣列的後面向前查詢，從 fromIndex 處開始。

const list = [?, ?, ?, ?, ?];
list.lastIndexOf(?); // 3
list.lastIndexOf(?, 1); // 0

// Code
const list = [1, 2, 3, 4, 5];
list.lastIndexOf(3); // 2
list.lastIndexOf(3, 1); // -1

Array.findIndex()

findIndex() 方法返回陣列中滿足提供的測試函式的第一個元素的索引。若沒有找到對應元素則返回-1。

const list = [?, ?, ?, ?, ?];
list.findIndex((⚪️) => ⚪️ === ?); // 0

// You might be thinking how it's different from `indexOf` ?
const array = [5, 12, 8, 130, 44];
array.findIndex((element) => element > 13); // 3

// OR
const array = [{
  id: ?
}, {
  id: ?
}, {
  id: ?
}];

array.findIndex((element) => element.id === ?); // 2

Array.includes()

includes() 方法用來判斷一個陣列是否包含一個指定的值，根據情況，如果包含則返回 true，否則返回 false。

const list = [?, ?, ?, ?, ?];
list.includes(?); // true

// Code
const list = [1, 2, 3, 4, 5];
list.includes(3); // true
list.includes(6); // false

Array.pop()

pop() 方法從陣列中刪除最後一個元素，並返回該元素的值。此方法會更改陣列的長度。

const list = [?, ?, ?, ?, ?];
list.pop(); // ?
list; // [?, ?, ?, ?]

// Code
const list = [1, 2, 3, 4, 5];
list.pop(); // 5
list; // [1, 2, 3, 4]

Array.push()

push() 方法將一個或多個元素新增到陣列的末尾，並返回該陣列的新長度。

const list = [?, ?, ?, ?, ?];
list.push(?); // 5
list; // [?, ?, ?, ?, ?, ?]

// Code
const list = [1, 2, 3, 4, 5];
list.push(6); // 6
list; // [1, 2, 3, 4, 5, 6]

Array.shift()

shift() 方法從陣列中刪除第一個元素，並返回該元素的值。此方法更改陣列的長度。

const list = [?, ?, ?, ?, ?];
list.shift(); // ?
list; // [?, ?, ?, ?]

// Code
const list = [1, 2, 3, 4, 5];
list.shift(); // 1
list; // [2, 3, 4, 5]

Array.unshift()

unshift() 方法將一個或多個元素新增到陣列的開頭，並返回該陣列的新長度(該方法修改原有陣列)。

const list = [?, ?, ?, ?, ?];
list.unshift(?); // 6
list; // [?, ?, ?, ?, ?, ?]

// Code
const list = [1, 2, 3, 4, 5];
list.unshift(0); // 6
list; // [0, 1, 2, 3, 4, 5]

Array.splice()

splice() 方法通過刪除或替換現有元素或者原地新增新的元素來修改陣列,並以陣列形式返回被修改的內容。此方法會改變原陣列。

const list = [?, ?, ?, ?, ?];
list.splice(1, 2); // [?, ?]
list; // [?, ?, ?]

// Code
const list = [1, 2, 3, 4, 5];
list.splice(1, 2); // [2, 3]
list; // [1, 4, 5]

Array.slice()

slice() 方法返回一個新的陣列物件，這一物件是一個由 begin 和 end 決定的原陣列的淺拷貝（包括 begin，不包括end）。原始陣列不會被改變。

const list = [?, ?, ?, ?, ?];
list.slice(1, 3); // [?, ?]
list; // [?, ?, ?, ?, ?]

// Code
const list = [1, 2, 3, 4, 5];
list.slice(1, 3); // [2, 3]
list; // [1, 2, 3, 4, 5]

Array.join()

join() 方法將一個陣列（或一個類陣列物件）的所有元素連線成一個字串並返回這個字串。如果陣列只有一個專案，那麼將返回該專案而不使用分隔符。

const list = [?, ?, ?, ?, ?];
list.join('〰️'); // "?〰️?〰️?〰️?〰️?"

// Code
const list = [1, 2, 3, 4, 5];
list.join(', '); // "1, 2, 3, 4, 5"

Array.reverse()

reverse() 方法將陣列中元素的位置顛倒，並返回該陣列。陣列的第一個元素會變成最後一個，陣列的最後一個元素變成第一個。該方法會改變原陣列。

const list = [?, ?, ?, ?, ?];
list.reverse(); // [?, ?, ?, ?, ?]
list; // [?, ?, ?, ?, ?]

// Code
const list = [1, 2, 3, 4, 5];
list.reverse(); // [5, 4, 3, 2, 1]
list; // [5, 4, 3, 2, 1]

Array.sort()

sort() 方法用原地演算法對陣列的元素進行排序，並返回陣列。預設排序順序是在將元素轉換為字串，然後比較它們的UTF-16程式碼單元值序列時構建的。

const list = [?, ?, ?, ?, ?];
list.sort(); // [?, ?, ?, ?, ?]

// This make more sense ?
const array = ['D', 'B', 'A', 'C'];
array.sort(); // ? ['A', 'B', 'C', 'D']

// OR
const array = [4, 1, 3, 2, 10];
array.sort(); // ? [1, 10, 2, 3, 4]
array.sort((a, b) => a - b); // ? [1, 2, 3, 4, 10]

Array.some()

some() 方法測試陣列中是不是至少有1個元素通過了被提供的函式測試。它返回的是一個Boolean型別的值。

const list = [?, ?, ?, ?, ?];
list.some((⚪️) => ⚪️ === ?); // true
list.some((⚪️) => ⚪️ === ?); // false

// Code
const list = [1, 2, 3, 4, 5];
list.some((el) => el === 3); // true
list.some((el) => el === 6); // false

Array.every()

every() 方法測試一個陣列內的所有元素是否都能通過某個指定函式的測試。它返回一個布林值。

const list = [?, ?, ?, ?, ?];
list.every((⚪️) => ⚪️ === ?); // false

const list = [?, ?, ?, ?, ?];
list.every((⚪️) => ⚪️ === ?); // true

// Code
const list = [1, 2, 3, 4, 5];
list.every((el) => el === 3); // false

const list = [2, 4, 6, 8, 10];
list.every((el) => el%2 === 0); // true

Array.from()

Array.from() 方法對一個類似陣列或可迭代物件建立一個新的，淺拷貝的陣列例項。

const list = ?????;
Array.from(list); // [?, ?, ?, ?, ?]

const set = new Set(['?', '?', '?', '?', '?']);
Array.from(set); // [?, ?, ?]

const range = (n) => Array.from({ length: n }, (_, i) => i + 1);
console.log(range(10)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

Array.of()

Array.of() 方法建立一個具有可變數量引數的新陣列例項，而不考慮引數的數量或型別。

Array.of() 和 Array 建構函式之間的區別在於處理整數引數：Array.of(7) 建立一個具有單個元素 7 的陣列，而 Array(7) 建立一個長度為7的空陣列（注意：這是指一個有7個空位(empty)的陣列，而不是由7個 undefined 組成的陣列）。

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

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

Array.isArray()

Array.isArray() 用於確定傳遞的值是否是一個 Array。

Array.isArray([?, ?, ?, ?, ?]); // true
Array.isArray(?); // false

// Code
Array.isArray([1, 2, 3, 4, 5]); // true
Array.isArray(5); // false

Array.at()

at() 方法接收一個整數值並返回該索引的專案，允許正數和負數。負整數從陣列中的最後一個專案開始倒數。

const list = [?, ?, ?, ?, ?];
list.at(1); // ?

// Return from last ?
list.at(-1); // ?
list.at(-2); // ?

// Code
const list = [1, 2, 3, 4, 5];
list.at(1); // 2
list.at(-1); // 5
list.at(-2); // 4

Array.copyWithin()

arr.copyWithin(target[, start[, end]])

copyWithin() 方法淺複製陣列的一部分到同一陣列中的另一個位置，並返回它，不會改變原陣列的長度。

const list = [?, ?, ?, ?, ?];
list.copyWithin(1, 3); // [?, ?, ?, ?, ?]

const list = [?, ?, ?, ?, ?];
list.copyWithin(0, 3, 4); // [?, ?, ?, ?, ?]

// Code
const list = [1, 2, 3, 4, 5];
list.copyWithin(0, 3, 4); // [4, 2, 3, 4, 5]

如果沒看懂，可以看MDN介紹： https://developer.mozilla.org...

Array.flat()

var newArray = arr.flat([depth])
// depth 可選:指定要提取巢狀陣列的結構深度，預設值為 1。

flat() 方法會按照一個可指定的深度遞迴遍歷陣列，並將所有元素與遍歷到的子陣列中的元素合併為一個新陣列返回。

const list = [?, ?, [?, ?, ?]];
list.flat(Infinity); // [?, ?, ?, ?, ?]

// Code
const list = [1, 2, [3, 4, [5, 6]]];
list.flat(Infinity); // [1, 2, 3, 4, 5, 6]

Array.flatMap()

flatMap() 方法首先使用對映函式對映每個元素，然後將結果壓縮成一個新陣列。它與 map 連著深度值為1的 flat 幾乎相同，但 flatMap 通常在合併成一種方法的效率稍微高一些。

const list = [?, ?, [?, ?, ?]];
list.flatMap((⚪️) => [⚪️, ⚪️ + ⚪️ ]); // [?, ??, ?, ??, ?, ??, ?, ??, ?, ??]

// Code
const list = [1, 2, 3];
list.flatMap((el) => [el, el * el]); // [1, 1, 2, 4, 3, 9]

程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文：https://dev.to/devsmitra/28-j...

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。