28個JS常用數(shù)組方法總結

更新時間：2022年05月06日 15:25:53 作者：前端小智

最近面試有道題是至少寫出 15 個數(shù)組方法，數(shù)組方法平時經常用到的也就6-7個，突然要一下子寫出15個，還是有點卡殼了，今天整理一波，需要的可以參考一下

1.Array.map()

map() 方法創(chuàng)建一個新數(shù)組，這個新數(shù)組由原數(shù)組中的每個元素都調用一次提供的函數(shù)后的返回值組成。

const list = [:tired_face:, :tired_face:, :tired_face:, :tired_face:];
list.map((:white_circle:?) => :grinning:); // [:grinning:, :grinning:, :grinning:, :grinning:]

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

2.Array.filter()

filter() 方法創(chuàng)建一個新數(shù)組, 其包含通過所提供函數(shù)實現(xiàn)的測試的所有元素。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:];
list.filter((:white_circle:?) => :white_circle:? === :grinning:); // [:grinning:, :grinning:]

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

3.Array.reduce()

reduce() 方法對數(shù)組中的每個元素按序執(zhí)行一個由您提供的 reducer 函數(shù)，每一次運行 reducer 會將先前元素的計算結果作為參數(shù)傳入，最后將其結果匯總為單個返回值。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.reduce((:white_large_square:?, :white_circle:?) => :white_large_square:? + :white_circle:?); // :grinning: + :tired_face: + :grinning: + :tired_face: +   

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

4.Array.reduceRight()

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

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.reduceRight((:white_large_square:?, :white_circle:?) => :white_large_square:? + :white_circle:?); //    + :tired_face: + :grinning: + :tired_face: + :grinning:

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

5.Array.fill()

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

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.fill(:grinning:); // [:grinning:, :grinning:, :grinning:, :grinning:, :grinning:]


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

6.Array.find()

find() 方法返回數(shù)組中滿足提供的測試函數(shù)的第一個元素的值。否則返回 undefined。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.find((:white_circle:?) => :white_circle:? === :grinning:); // :grinning:
list.find((:white_circle:?) => :white_circle:? === :stuck_out_tongue_closed_eyes:); // undefined


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

7.Array.indexOf()

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

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.indexOf(:grinning:); // 0
list.indexOf(:rage:); // -1

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

8.lastIndexOf()

arr.lastIndexOf(searchElement[, fromIndex])

方法返回指定元素(也即有效的 JavaScript 值或變量)在數(shù)組中的最后一個的索引，如果不存在則返回 -1。從數(shù)組的后面向前查找，從 fromIndex 處開始。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.lastIndexOf(:grinning:); // 3
list.lastIndexOf(:grinning:, 1); // 0

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

9.Array.findIndex()

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

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.findIndex((:white_circle:?) => :white_circle:? === :grinning:); // 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: :grinning:
}, {
  id: :tired_face:
}, {
  id:   
}];

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

10.Array.includes()

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

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.includes(:grinning:); // true

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

11.Array.pop()

pop() 方法從數(shù)組中刪除最后一個元素，并返回該元素的值。此方法會更改數(shù)組的長度。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.pop(); //   
list; // [:grinning:, :tired_face:, :grinning:, :tired_face:]

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

12.Array.push()

push() 方法將一個或多個元素添加到數(shù)組的末尾，并返回該數(shù)組的新長度。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.push(:rage:); // 5
list; // [:grinning:, :tired_face:, :grinning:, :tired_face:,   , :rage:]

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

13.Array.shift()

shift() 方法從數(shù)組中刪除第一個元素，并返回該元素的值。此方法更改數(shù)組的長度。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ]; list.shift(); // :grinning: list; // [:tired_face:, :grinning:, :tired_face:,   ]

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

14.Array.unshift()

unshift() 方法將一個或多個元素添加到數(shù)組的開頭，并返回該數(shù)組的新長度(該方法修改原有數(shù)組)。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.unshift(:rage:); // 6
list; // [:rage:, :grinning:, :tired_face:, :grinning:, :tired_face:,   ]

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

15.Array.splice()

splice() 方法通過刪除或替換現(xiàn)有元素或者原地添加新的元素來修改數(shù)組,并以數(shù)組形式返回被修改的內容。此方法會改變原數(shù)組。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.splice(1, 2); // [:grinning:, :tired_face:]
list; // [:grinning:, :tired_face:,   ]

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

16.Array.slice()

slice() 方法返回一個新的數(shù)組對象，這一對象是一個由 begin 和 end 決定的原數(shù)組的淺拷貝(包括 begin，不包括end)。原始數(shù)組不會被改變。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.slice(1, 3); // [:tired_face:, :grinning:]
list; // [:grinning:, :tired_face:, :grinning:, :tired_face:,   ]

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

17Array.join()

join() 方法將一個數(shù)組(或一個類數(shù)組對象)的所有元素連接成一個字符串并返回這個字符串。如果數(shù)組只有一個項目，那么將返回該項目而不使用分隔符。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.join(':wavy_dash:'); // ":grinning::wavy_dash::tired_face::wavy_dash::grinning::wavy_dash::tired_face::wavy_dash:  "

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

18.Array.reverse()

reverse() 方法將數(shù)組中元素的位置顛倒，并返回該數(shù)組。數(shù)組的第一個元素會變成最后一個，數(shù)組的最后一個元素變成第一個。該方法會改變原數(shù)組。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.reverse(); // [  , :tired_face:, :grinning:, :tired_face:, :grinning:]
list; // [  , :tired_face:, :grinning:, :tired_face:, :grinning:]

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

19.Array.sort()

sort() 方法用原地算法對數(shù)組的元素進行排序，并返回數(shù)組。默認排序順序是在將元素轉換為字符串，然后比較它們的UTF-16代碼單元值序列時構建的。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.sort(); // [:grinning:, :grinning:, :tired_face:, :tired_face:,   ]

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

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

20.Array.some()

some() 方法測試數(shù)組中是不是至少有1個元素通過了被提供的函數(shù)測試。它返回的是一個Boolean類型的值。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.some((:white_circle:?) => :white_circle:? === :grinning:); // true
list.some((:white_circle:?) => :white_circle:? === :rage:); // false

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

21.Array.every()

every() 方法測試一個數(shù)組內的所有元素是否都能通過某個指定函數(shù)的測試。它返回一個布爾值。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.every((:white_circle:?) => :white_circle:? === :grinning:); // false

const list = [:grinning:, :grinning:, :grinning:, :grinning:, :grinning:];
list.every((:white_circle:?) => :white_circle:? === :grinning:); // 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

22.Array.from()

Array.from() 方法對一個類似數(shù)組或可迭代對象創(chuàng)建一個新的，淺拷貝的數(shù)組實例。

const list = :grinning::tired_face::grinning::tired_face:  ;
Array.from(list); // [:grinning:, :tired_face:, :grinning:, :tired_face:,   ]

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

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

23.Array.of()

Array.of() 方法創(chuàng)建一個具有可變數(shù)量參數(shù)的新數(shù)組實例，而不考慮參數(shù)的數(shù)量或類型。

Array.of() 和 Array 構造函數(shù)之間的區(qū)別在于處理整數(shù)參數(shù)：Array.of(7) 創(chuàng)建一個具有單個元素 7 的數(shù)組，而 Array(7) 創(chuàng)建一個長度為7的空數(shù)組(注意：這是指一個有7個空位(empty)的數(shù)組，而不是由7個 undefined 組成的數(shù)組)。

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

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

24.Array.isArray()

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

Array.isArray([:grinning:, :tired_face:, :grinning:, :tired_face:,   ]); // true
Array.isArray(  ); // false

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

25.Array.at()

at() 方法接收一個整數(shù)值并返回該索引的項目，允許正數(shù)和負數(shù)。負整數(shù)從數(shù)組中的最后一個項目開始倒數(shù)。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.at(1); // :tired_face:

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

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

26.copyWithin()

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

方法淺復制數(shù)組的一部分到同一數(shù)組中的另一個位置，并返回它，不會改變原數(shù)組的長度。

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.copyWithin(1, 3); // [:grinning:, :grinning:,   , :tired_face:,   ]

const list = [:grinning:, :tired_face:, :grinning:, :tired_face:,   ];
list.copyWithin(0, 3, 4); // [:tired_face:, :tired_face:, :grinning:, :tired_face:,   ]

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

27.Array.flat()

var newArray = arr.flat([depth])
// depth 可選:指定要提取嵌套數(shù)組的結構深度，默認值為 1。

flat() 方法會按照一個可指定的深度遞歸遍歷數(shù)組，并將所有元素與遍歷到的子數(shù)組中的元素合并為一個新數(shù)組返回。

const list = [:grinning:, :tired_face:, [:grinning:, :tired_face:,   ]];
list.flat(Infinity); // [:grinning:, :tired_face:, :grinning:, :tired_face:,   ]

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

28.Array.flatMap()

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

const list = [:grinning:, :tired_face:, [:grinning:, :tired_face:,   ]];
list.flatMap((:white_circle:?) => [:white_circle:?, :white_circle:? + :white_circle:? ]); // [:grinning:, :grinning::grinning:, :tired_face:, :tired_face::tired_face:, :grinning:, :grinning::grinning:, :tired_face:, :tired_face::tired_face:,   ,     ]

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

到此這篇關于28個JS常用數(shù)組方法總結的文章就介紹到這了,更多相關JS數(shù)組方法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

詳解Bootstrap各式各樣的按鈕(推薦)
Bootstrap為我們提供了各式各樣漂亮的按鈕，我們無需自己給按鈕寫樣式，直接使用它給我們提供的類樣式，使用在我們的按鈕上，非常的簡單方便
2016-12-12
用JavaScript實現(xiàn)PHP的urlencode與urldecode函數(shù)
這篇文章主要介紹了用JavaScript實現(xiàn)PHP的urlencode與urldecode函數(shù),很多情況下我們用了出來php urlencode出來的網址，需要的朋友可以參考下
2015-08-08
分離與繼承的思想實現(xiàn)圖片上傳后的預覽功能：ImageUploadView
本文要介紹的是網頁中常見的圖片上傳后直接在頁面生成小圖預覽的實現(xiàn)思路，考慮到該功能有一定的適用性，于是把相關的邏輯封裝成了一個ImageUploadView組件，實際使用效果可查看下一段的git效果圖
2016-04-04
JS控制阿拉伯數(shù)字轉為中文大寫示例代碼
阿拉伯數(shù)字如何轉為中文大寫這個實現(xiàn)的方法有很多，在本文將為大家介紹下js中時如何實現(xiàn)的，感興趣的朋友可以參考下
2013-09-09
js中getter和setter用法實例分析
這篇文章主要介紹了js中getter和setter用法,結合實例形式分析了javascript中getter和setter的功能、使用方法及相關操作注意事項,需要的朋友可以參考下
2018-08-08
淺析js封裝和作用域
在編寫web軟件時，遇到一些可以共用js的情況，于是就想著如何封裝js代碼?；拘枨蠛芎唵危鋵嵕褪歉鶕?jù)不同的情況封裝js代碼
2013-07-07
提升PHP安全：8個必須修改的PHP默認配置
這篇文章主要介紹了提升PHP安全：8個必須修改的PHP默認配置,PHP.ini中的默認配置是面向開發(fā)者的,如果是生產環(huán)境是必須要修改一些配置的,需要的朋友可以參考下
2014-11-11
Javascript結合css實現(xiàn)網頁換膚功能
現(xiàn)在網站換皮膚是比較常見的功能，大多數(shù)論壇都有的，要想實現(xiàn)這樣效果可以看如下代碼.
2009-11-11
JS.elementGetStyle(element, style)應用示例
獲取Dom元素的Style數(shù)組中的指定Style元素，下面有個不錯的示例，感興趣的朋友可以參考下，希望對大家有所幫助
2013-09-09
JavaScript截斷字符串的方法
這篇文章主要介紹了JavaScript截斷字符串的方法,涉及javascript字符串截取的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-07-07