JavaScript數組 幾個常用方法

前言

數組方法有太多了，本文記錄一些本人容易記錯的一些數組方法，用於鞏固及復習。
后續會慢慢的將其他數組方法添加進來。
善用數組方法可以使數據處理變的優雅且簡單。
那下面讓我們開始吧:

filter()

描述：

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

語法：

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

參數：

callback與thisValue

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

1. callback的參數列表

​	參數	是否可選	描述
參數一	element	必選	當前元素
參數二	index	可選	當前元素的索引值
參數三	array	可選	調用了 filter 的數組本身

2. thisValue的參數

執行 callback 時，用於 this 的值。

返回值：

是一個由 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)

參數：

callback與thisValue

​	參數	是否可選	描述
參數一	callback	必選	數組中的每個元素都要運行的回調函數。它接收三個參數。
參數二	thisValue	可選	執行 callback 時，用於 this 的值。 對象作為該執行回調時使用，傳遞給函數。 如果省略了 thisValue ，"this" 的值為 "undefined"

1. callback的參數列表

​	參數	是否可選	描述
參數一	element	必選	當前元素
參數二	index	可選	當前元素的索引值
參數三	array	可選	調用了 filter 的數組本身

2. thisValue的參數

執行 callback 時，用於 this 的值。
​

返回值：

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

示例：

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

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

sort()

描述：

map() 方法在原數組上進行修改更改元素的順序
注：默認排序順序是在將元素轉換為字符串，然后比較它們的UTF-16代碼單元值序列時

語法：

Array.sort( compareFunction )

參數：

compareFunction

​	參數	是否可選	描述
參數一	compareFunction	可選	規定排列順序的函數。如果省略，元素按照轉換為的字符串的各個字符的Unicode位點進行排序。

1. 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

​	參數	是否可選	描述
參數一	callback	必選	執行數組中每個數組元素的函數 (如果沒有initialValue初始值那么第一個值不會執行改函數)它接收四個參數。
參數二	initialValue	可選	callback函數的初始值

1. callback的參數列表

​	參數	是否可選	描述
參數一	accumulator	必選	累計器累計回調的返回值; 它是上一次調用回調時返回的累積值，或initialValue。
參數二	currentValue	必選	當前元素
參數三	index	可選	當前元素的索引值
參數四	array	可選	調用了 reduce() 的數組本身

2. 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()

描述：

reduce() 方法為數組中的每一個元素依次執行(升序執行)回調函數，不包括數組中被刪除或從未被賦值的元素。將其結果計算為一個值。
注：reduce() 可以作為一個高階函數，用於函數的 compose。

語法：

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

參數：

callback與thisValue

​	參數	是否可選	描述
參數一	callback	必選	執行數組中每個數組元素的函數，它接收三個參數。
參數二	thisValue	可選	執行 callback 時，用於 this 的值。 對象作為該執行回調時使用，傳遞給函數。 如果省略了 thisValue ，"this" 的值為 "undefined"

1. callback的參數列表

​	參數	是否可選	描述
參數一	currentValue	必選	當前元素
參數二	index	可選	當前元素的索引值
參數三	array	可選	調用了 forEach() 的數組本身

2. thisValue的參數

執行 callback 時，用於 this 的值。

返回值：

該方法沒有返回值。

示例：

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

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

方法列表

方法屬性：

方法	改變原數組	返回值描述	描述
filter()	否	過濾后的新數組	過濾器
map()	否	循環后的新數組	循環
sort()	是	為排序后的數組	排序
reduce()	否	為函數累計處理后的結果	累加器
forEach()	是	沒有返回值為undefined	循環

​

​

本文參考：
MDN中文官網https://developer.mozilla.org/zh-CN/
W3School 簡體中文版https://www.w3school.com.cn/