前言

數組方法有太多了，本文記錄一些本人容易記錯的一些數組方法，用于鞏固及複習。

後續會慢慢的将其他數組方法添加進來。

善用數組方法可以使資料處理變的優雅且簡單。

那下面讓我們開始吧:

filter()

描述：

filter() 方法建立一個新數組，并将符合條件的所有元素添加到建立的新數組中。

文法：

Array.filter(callback(element, index, array) { // 函數體 }, thisValue)

參數：

callback與thisValue

	參數	是否可選	描述
參數一	callback	必選	用來測試數組的每個元素的函數。傳回 true 表示該元素通過測試，保留該元素，false 則不保留。它接收三個參數。
參數二	thisValue	可選	執行 callback 時，用于 this 的值。對象作為該執行回調時使用，傳遞給函數。如果省略了 thisValue ，"this" 的值為 "undefined"

參數

是否可選

描述

參數一

callback

必選

用來測試數組的每個元素的函數。傳回 true 表示該元素通過測試，保留該元素，false 則不保留。它接收三個參數。

參數二

thisValue

可選

執行 callback 時，用于 this 的值。

對象作為該執行回調時使用，傳遞給函數。

如果省略了 thisValue ，"this" 的值為 "undefined"

callback的參數清單


	element	目前元素
	index	目前元素的索引值
參數三	array	調用了 filter 的數組本身

thisValue的參數

傳回值：

是一個由 filter() 參數一函數的傳回值組成的新數組

示例：

let users = [
  {id: 11, name: "孫悟空"},
  {id: 21, name: "豬八戒"},
  {id: 31, name: "沙和尚"}
];

// 傳回前兩個使用者的數組
let filterUsers = users.filter(item => item.id < 31);

console.log(filterUsers.length); // 2

map()

map() 方法建立一個新數組，新數組的每個元素是調用一次給定函數的傳回值。

Array.map(callback(currentValue, index, array) { // 函數體 }, thisValue)


			數組中的每個元素都要運作的回調函數。它接收三個參數。

是一個由原數組每個元素執行回調函數的結果組成的新數組。

let number = [1, 2, 3].map(item => item + 1);

console.log(lengths); // 2, 3, 4

sort()

map() 方法在原數組上進行修改更改元素的順序

注：預設排序順序是在将元素轉換為字元串，然後比較它們的UTF-16代碼單元值序列時

Array.sort( compareFunction )

compareFunction


			規定排列順序的函數。如果省略，元素按照轉換為的字元串的各個字元的Unicode位點進行排序。

compareFunction的參數清單


	firstEl		第一個用于比較的元素。
	secondEl		第二個用于比較的元素。

compareFunction傳回值

傳回一個說明這兩個值順序的數字

若 a 小于 b，在排序後的數組中 a 應該出現在 b 之前，則傳回一個小于 0 的值。
若 a 等于 b，則傳回 0。
若 a 大于 b，則傳回一個大于 0 的值。

傳回值為排序後的數組，但是傳回值通常會被忽略，因為修改了原數組。

let number = [1, 2, 3].map(item => item + 1);

console.log(lengths); // 2, 3, 4

reduce()

reduce() 方法為數組中的每一個元素依次執行(升序執行)回調函數，不包括數組中被删除或從未被指派的元素。将其結果計算為一個值。

注：reduce() 可以作為一個高階函數，用于函數的 compose。

Array.reduce(callback(accumulator, currentValue, index, array), initialValue)

callback與initialValue


			執行數組中每個數組元素的函數 (如果沒有initialValue初始值那麼第一個值不會執行改函數)它接收四個參數。
	initialValue		callback函數的初始值


	accumulator	累計器累計回調的傳回值; 它是上一次調用回調時傳回的累積值，或initialValue。
	currentValue

參數四		調用了 reduce() 的數組本身

initialValue的參數

作為第一次調用 callback函數時的第一個參數的值。如果沒有提供初始值，則将使用數組中的第一個元素作為初始值。在沒有初始值的空數組上調用 reduce 将報錯。

函數累計處理後的結果

執行完所有callback函數的accumulator參數

注：您的 reducer 函數的傳回值配置設定給累計器，該傳回值在數組的每個疊代中被記住，并最後成為最終的單個結果值。

let number = [1, 2, 3, 4];

let result = number.reduce((sum, current) => sum + current, 0);

console.log(result); // 10

forEach()

Array.forEach(callback(currentValue , index , array), thisValue)


			執行數組中每個數組元素的函數，它接收三個參數。




			調用了 forEach() 的數組本身

該方法沒有傳回值。

let number = [1, 2, 3, 4];

number.forEach((item, index ,array) =>{
	console.log(item); // 1/2/3/4
});

方法清單

方法屬性：

改變原數組	傳回值描述
否	過濾後的新數組	過濾器
	循環後的新數組	循環
是	為排序後的數組	排序
	為函數累計處理後的結果	累加器
	沒有傳回值為undefined

本文參考：

MDN中文官網https://developer.mozilla.org/zh-CN/

W3School 簡體中文版https://www.w3school.com.cn/

JavaScript數組 幾個常用方法

前言