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/