咱們在平常開發中，與接口打交道最多了，前端經過訪問後端接口，而後將接口數據二次處理渲染到頁面當中。
二次處理的過程是考驗 Coder 對 Array 是否熟練以及在何種場景下使用哪一種方法處理最優。
小編，在最近開發中就遇到了 Array 問題，在處理複雜的業務需求時，沒想到Array 有相似的方法，而後將方法組合起來解決當下問題。前端

文章用下班時間肝了一週才寫完。node

數組使用指南

遍歷數組方法

不會改變原數組的遍歷方法

`forEach()`

forEach() 方法按照升序爲數組中每一項執行一次給定的函數。web

「語法」面試

arr.forEach(callback(currentValue , index , array) ，thisArg)

currentValue : 數組當前項值
index : 數組當前項索引
arr : 數組對象自己
thisArg : 可選參數。當執行回調函數 callback 時，用做 this 的值。

「注意」算法

若是使用 「箭頭函數表達式」來傳入函數參數， thisArg 參數會被忽略，由於箭頭函數在詞法上綁定了 this 值。
forEach 不會直接改變調用它的對象，可是那個對象可能會被 callback 函數改變。
every 不會改變原數組。

//防盜貼：微信公衆號: 前端自學社區

const arr = [2,3,4,1,44]

arr.forEach(val =>{
    console.log(`值爲${val*2}`)
    
})
console.log(`原數組爲${arr}`);
// 值爲4
// 值爲6
// 值爲8
// 值爲2
// 值爲88
// 原數組爲2,3,4,1,44

`reduce()`

reduce()數組元素累計器，返回一個合併的結果值。後端

「語法」數組

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

accumulator : 累計器，默認爲數組元素第一個值
currentValue : 當前值
index : 當前元素索引可選
array : 數組可選
initialValue : 初始值可選

reduce 有兩個參數，一個是回調函數，一個是初始值。微信

它有兩種取值狀況：數據結構

當提供了 initialValue 初始值時，那麼 accumulator 的值爲 initialValue , currentValue 的值爲 數組第一個值

當沒有提供 initialValue 初始值時，那麼 accumulator 的值爲數組第一個值， currentValue 爲第二個值。

「注意」app

若是數組爲空，且沒有提供 initialValue 初始值時，會拋出 TypeError .
若是數組有一個元素，且沒有提供 initialValue 或者提供了 initialValue ，數組爲空，那麼惟一值被返回不會執行 callback 回調函數。

「求和」

//防盜貼：微信公衆號: 前端自學社區/
const arr = [1, 2, 3, 4]

const sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 10)

console.log(sum) //20 
// accumulator  累計器
// currentValue  當前值
// initialValue  累計 初始值 爲10 

//10 + 1 + 2 + 3 + 4


## 注意
// 回調函數第一次執行時，accumulator 和currentValue的取值有兩種狀況：
// 若是調用reduce()時提供了initialValue，accumulator取值爲initialValue，currentValue取數組中的第一個值；
// 若是沒有提供 initialValue，那麼accumulator取數組中的第一個值，currentValue取數組中的第二個值。

「計算對象中的值」

要累加對象數組中包含的值，必須提供初始值，以便各個item正確經過你的函數。

/*
 * @Description: 
 * @Author: 微信公衆號: 前端自學社區
 * @Date: 2021-08-07 00:53:51
 * @LastEditTime: 2021-08-07 00:53:51
 * @LastEditors: Do not edit
 */
const data = [
    {
        date: '2021-8-1',
        income: 200
    },
    {
        date: '2021-8-2',
        income: 400
    },
    {
        date: '2021-8-3',
        income: 300
    },
]

console.log(`總收入： ${data.reduce( (pre,currentValue) => pre + currentValue.income,0)}`);
//總收入：900

「二維數組轉一位數組」

const array = [[1,2],[3,4]]

console.log(array.reduce((a,b) => a.concat(b)));
//[ 1, 2, 3, 4 ]

`find()`

find() 返回知足特定條件的元素對象或者元素值，不知足返回 undefined

「語法」

arr.find((element,index,array), thisArg)

element ：當前元素
index : 當前元素索引可選
array : 數組自己可選
thisArg : 執行回調時用做 this 的對象。可選

// 從數據中找出第一個知足特定條件的對象

const data = [
    {
        name:'張三',
        article: 3
    },
    {
        name:'老王',
        article: 9
    },
    {
        name:'老李',
        article: 10
    }
]

console.log(data.find(item => item.article > 9 ));

// { name: '老李', article: 10 }

`findIndex()`

findIndex() 返回數組中符合條件的第一個元素的索引，沒有，則返回 -1 。

「語法」

arr.findIndex((element,index,array), thisArg)

element ：當前元素
index : 當前元素索引可選
array : 數組自己可選
thisArg : 執行回調時用做 this 的對象。可選

const arr = [22,33,44,55]
console.log(arr.findIndex(val => val > 33));    //2
console.log(arr.findIndex(val => val > 99));    //-1

`key()`

key() 返回一個新的「Array Iterator」對象，該對象包含數組中每一個索引的鍵。

「語法」

keys()

「注意」

若是數組中有空原元素，在獲取key 時，也會加入遍歷的隊列中。

const inputModal = [
    {
        name:''
    },
    {
        age:''
    },
    {
        hobby:''
    }
]
for(const key of inputModal.keys()){
    console.log(key)
}
// 0
// 1
// 2

const arr = [1,2,,3]
for(const key of arr.keys()){
    console.log(key);
}
// 0
// 1
// 2
// 3


//Object.keys() 方法會返回一個由一個給定對象的自身可枚舉屬性組成的數組
// 因此 Object.keys(arr) = [ '0', '1', '3' ]
for(const key of Object.keys(arr)){
    console.log(key);
}
// 0
// 1
// 3

`values()`

values()方法返回一個新的 「Array Iterator」 對象，該對象包含數組每一個索引的值。

「語法」

arr.values()

const Color = ['red','yelloe','orange']

for(val of Color.values()){
    console.log(val);
}
// red
// yelloe
// orange

返回布爾值

`every()`

every 用來判斷數組內全部元素是否符合某個條件，返回 「布爾值」

「語法」

arr.every(callback(currentValue , index , array) ，thisArg)

currentValue : 數組當前項值必須
index : 數組當前項索引可選
arr : 數組對象自己可選
thisArg : 可選參數。當執行回調函數 callback 時，用做 this 的值。可選

「注意」

當全部的元素都符合條件纔會返回 true
every 不會改變原數組。
若傳入一個空數組，不管如何都會返回 true。

//防盜貼：微信公衆號: 前端自學社區

const arr = [2,3,4,1,44]

console.log(arr.every(val =>  val > 0 ));   //true

console.log(arr.every(val => { val > 2 })) //false

`some()`

some() 用來判斷數組元素是否符合某個條件，只要有一個元素符合，那麼返回 true.

「語法」

arr.some(callback(currentValue , index , array) ，thisArg)

currentValue : 數組當前項值必須
index : 數組當前項索引可選
arr : 數組對象自己可選
thisArg : 可選參數。當執行回調函數 callback 時，用做 this 的值。可選

「注意」

some() 被調用時不會改變數組。
若是用一個空數組進行測試，在任何狀況下它返回的都是 false。
some() 在遍歷時，元素範圍已經肯定，在遍歷過程當中添加的元素，不會加入到遍歷的序列中。

const arr = [2,3,4,1,44]

console.log(arr.some(val => val > 2))  //true
console.log([].some(val => val > 2 )); //false


const newList = [11,22,33,44]
console.log(newList.some(val => {
    newList.push(55)
    newList.push(66)
    val > 55
}));   //false

不改變原有數組，造成新的數組

`filter()`

filter() 用來遍歷原數組，過濾拿到符合條件的數組元素，造成新的數組元素。

「語法」

arr.some(callback(currentValue , index , array) ，thisArg)

currentValue : 數組當前項值必須
index : 數組當前項索引可選
arr : 數組對象自己可選
thisArg : 可選參數。當執行回調函數 callback 時，用做 this 的值。可選

「注意」

filter 不會改變原數組，它返回過濾後的新數組。
filter() 在遍歷時，元素範圍已經肯定，在遍歷過程當中添加的元素，不會加入到遍歷的序列中。

const arr = [11,22,33,44,55,66]
 

console.log(arr.filter(val => val > 44 ))
console.log(`原數組爲${arr}`);

// [ 55, 66 ]
// 原數組爲11,22,33,44,55,66

`map()`

map() 建立一個新的數組，其結果是該數組中的每一個元素都調用一個提供的函數後返回的結果。

「語法」

arr.map(callback(currentValue , index , array) ，thisArg)

currentValue : 數組當前項值必須
index : 數組當前項索引可選
arr : 數組對象自己可選
thisArg : 可選參數。當執行回調函數 callback 時，用做 this 的值。可選

「注意」

map不修改調用它的原數組自己
map() 在遍歷時，元素範圍已經肯定，在遍歷過程當中添加的元素，不會加入到遍歷的序列中。

const arr = [1,2,3,4]

console.log(arr.map(val => val*3 ))  // [ 3, 6, 9, 12 ]
console.log(arr)  // [ 1, 2, 3, 4 ]

數組 CRUD

改變原數組方法

`reverse()`

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

const arr = [1,2,3]

console.log(arr.reverse(11,22,33))  //[ 3, 2, 1 ]

`sort()`

sort() 方法採用 「原地算法」進行排序並返回數組。默認排序順序是在「將元素轉換爲字符串」，而後「比較它們的UTF-16代碼單元值序列」

「原地算法」是一個使用輔助的數據結構對輸入進行轉換的算法。可是，它容許有少許額外的存儲空間來儲存輔助變量。當算法運行時，輸入一般會被輸出覆蓋。原地算法僅經過替換或交換元素來更新輸入序列。

const arr = [23,11,33,44,1]

console.log(arr.sort())  //[ 1, 11, 23, 33, 44 ]


const arr = [23,11,33,44,1000000000]

console.log(arr.sort())  
// [ 1000000000, 11, 23, 33, 44 ]

刪除元素

`shift()`

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

「語法」

arr.shift()

「注意」

從數組中刪除的元素; 若是數組爲空則返回 undefined

const data = [
    {
        id:1,
        name:'前端'
    },
    {
        id:2,
        name:'後端'
    },
    {
        id:3,
        name:'移動端'
    },
    {
        id:4,
        name:'嵌入式開發'
    },
]

const deleObj = data.shift()



console.log('==============刪除後的元素======================');
console.log(data);
console.log('=================刪除後的元素===================');


console.log('===============被刪除的元素=====================');
console.log(deleObj);
console.log('================被刪除的元素====================');

//  ==============刪除後的元素======================
// [
//     { id: 2, name: '後端' },
//     { id: 3, name: '移動端' },
//     { id: 4, name: '嵌入式開發' }
//   ]
//   =================刪除後的元素===================

  
//   ===============被刪除的元素=====================
//   { id: 1, name: '前端' }
//   ================被刪除的元素====================

`pop()`

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

用法和 shift 相似。

「語法」

arr.pop()

「注意」

從數組中刪除的元素; 若是數組爲空則返回 undefined

const data = [
    {
        id:1,
        name:'前端'
    },
    {
        id:2,
        name:'後端'
    },
    {
        id:3,
        name:'移動端'
    },
    {
        id:4,
        name:'嵌入式開發'
    },
]

const deleObj = data.pop()




console.log(data);
// [
//     { id: 1, name: '前端' },
//     { id: 2, name: '後端' },
//     { id: 3, name: '移動端' }
// ]
console.log(deleObj);
// { id: 4, name: '嵌入式開發' }

`splice()`

splice() 方法經過「刪除」或「替換」現有元素或者原地添加新的元素來修改數組,並以數組形式返回被修改的內容。此方法會改變原數組。

「語法」

array.splice(start,deleteCount, [item1,item2....])

start : 開始的索引
deleteCount : 刪除的個數可選
[item1，item2 .....] ；從開始的索引進行添加的增長和替換的元素，可選

「注意」

由被刪除的元素組成的一個數組。若是隻刪除了一個元素，則返回只包含一個元素的數組。若是沒有刪除元素，則返回空數組。

若是隻傳遞了開始的索引位置，則會刪除索引後的全部元素對象

const data = [
    {
        id:1,
        name:'前端'
    },
    {
        id:2,
        name:'後端'
    },
    {
        id:3,
        name:'移動端'
    },
    {
        id:4,
        name:'嵌入式開發'
    },
]
data.splice(1)
console.log(data)
// [ { id: 1, name: '前端' } ]

「從索引爲 2 開始，刪除 1 個數組元素對象，添加兩個數組元素對象」

const data = [
    {
        id:1,
        name:'前端'
    },
    {
        id:2,
        name:'後端'
    },
    {
        id:3,
        name:'移動端'
    },
    {
        id:4,
        name:'嵌入式開發'
    },
]


data.splice(2,1,...[{id:5,name:'人工智能'},{id:6,name:'大數據開發'}])

console.log(data);
// [
//     { id: 1, name: '前端' },
//     { id: 2, name: '後端' },
//     { id: 5, name: '人工智能' },
//     { id: 6, name: '大數據開發' },
//     { id: 4, name: '嵌入式開發' }
// ]

增長元素

`splice()`

上面已經有介紹

`push()`

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

「語法」

arr.push(element1, ..., elementN)

const data = [
    {
        id:1,
        name:'前端'
    },
    {
        id:2,
        name:'後端'
    },
]

console.log(data.push({id:3,name:'移動端'}))  //3

「合併數組」

const data = [
    {
        id:1,
        name:'前端'
    },
    {
        id:2,
        name:'後端'
    },
]


var obj = [
    {
        id:4,
        name:'嵌入式開發'
    },
]

// 至關於 data.push({id:4,name:'嵌入式開發'});
Array.prototype.push.apply(data, obj);

console.log(data);

[
  { id: 1, name: '前端' },
  { id: 2, name: '後端' },
  { id: 4, name: '嵌入式開發' }
]

`unshift()`

unshift() 方法將一個或多個元素添加到數組的「開頭」，並返回該數組的「新長度」。

const arr = [1,2,3]



console.log(arr.unshift(11,22,33))  //6 
console.log(arr)  //[ 11, 22, 33, 1, 2, 3 ]

不改變原數組元素方法

`indexOf()`

indexOf()方法返回能夠在數組中找到給定元素的第一個索引，若是不存在，則返回 -1。

「語法」

indexOf(searchElement)
indexOf(searchElement, fromIndex)

searchElement : 要查找的元素
fromIndex ：按指定的索引進行查找出現的指定元素的第一個索引。可選

❝ ❞

若是索引大於或等於數組的長度，則返回-1
若是提供的索引值爲負數，則將其視爲距數組末尾的偏移量
若是提供的索引爲負數，仍然從前到後搜索數組
若是提供的索引爲 0，則將搜索整個數組。
默認值：0（搜索整個數組）。

const arr = [1,1,2,3,4,5,4,4,6]

console.log(arr.indexOf(3));  //3
console.log(arr.indexOf(9));  //-1


console.log(arr.indexOf(3,4)); //-1
//從索引爲 4 的元素進行查找 3, 顯而後面沒有3 ， 返回 -1

「數組去重」

建立一個新的空數組，經過indexOf 來判斷空數組是否第一次存在某個元素，

不存在則返回 [ < 0 ] ， push 到空數組中.

const newArr = []
arr.forEach(val => {
    if(newArr.indexOf(val) < 0){
       newArr.push(val)
    }
})
console.log(newArr);
// [ 1, 2, 3, 4, 5, 6 ]

`lastIndexOf()`

lastIndexOf() 查找數組中元素最後一次出現的索引，如未找到返回-1。

若是不存在則返回 -1。從數組的後面向前查找，從 fromIndex 處開始。

「語法」

arr.lastIndexOf(searchElement, fromIndex)

searchElement : 要查找的元素
fromIndex ：按指定的索引進行查找出現的指定元素的第一個索引。可選

❝ ❞

從指定的索引位置 「逆向」 查找
默認爲數組的長度減 1( arr.length - 1)，即整個數組都被查找。
若是該值大於或等於數組的長度，則整個數組會被查找。
若是爲負值，數組仍然會被從後向前查找。
若是該值爲負時，其絕對值大於數組長度，則方法返回 -1，即數組不會被查找。

「注意」

lastIndexOf 使用的是 「嚴格相等」 === 比較 searchElement 和數組中的元素。

const arr = [1,1,2,3,4,5,4,4,6]

console.log(arr.lastIndexOf(4)); //7

console.log(arr.lastIndexOf(4,11));  
//7    指定的查找的索引 大於 數組的長度， 會進行整個數組查找

console.log(arr.lastIndexOf(4,-33));
// -1   指定的索引爲負數，且絕對值大於數組長度， 則返回 -1

console.log(arr.lastIndexOf(4,-5));
//4    指定的索引爲負數，且絕對值小於數組長度， 則會 從向前進行查找

`inCludes()`

includes() 方法用來判斷一個數組是否包含一個指定的值，根據狀況，若是包含則返回 true，不然返回false。

「語法」

arr.includes(searchElement, fromIndex)

searchElement : 要查找的元素

❝
查找時，區分大小寫
❞
fromIndex ：按指定的索引進行查找出現的指定元素的第一個索引。可選

❝ ❞

從指定的索引進行查找
若是爲負值，則按升序從 array.length + fromIndex 的索引開始搜
若是 fromIndex 大於等於數組的長度，則會返回 false，且該數組不會被搜索。
默認爲0

const arr = [1,1,2,3,4,5,4,4,6]

console.log(arr.includes(4)); //true

console.log(arr.includes(4,66)); //false

console.log(arr.includes(1,-1)); //false

`concat()`

concat() 方法用於合併兩個或多個數組。

「語法」

var new_array = old_array.concat([arr1][arr2])

「注意」

concat方法不會改變this或任何做爲參數提供的數組，而是返回一個「淺拷貝」，它包含與原始數組相結合的相同元素的副本

❝ ❞

對象引用（而不是實際對象）： concat將對象引用複製到新數組中。原始數組和新數組都引用相同的對象。也就是說，若是引用的對象被修改，則更改對於新數組和原始數組都是可見的。這包括也是數組的數組參數的元素。
數據類型如字符串，數字和布爾（不是 String， Number和 Boolean) 對象）： concat將字符串和數字的值複製到新數組中。

let arr1 = [1,2,3]
let arr2 = [4,5,6]
let arr3 = [[1,2],[3,4]]
console.log(arr1.concat(arr2));
//[ 1, 2, 3, 4, 5, 6 ]

// 嵌套合併
console.log(arr1.concat(arr2).concat(arr3));
// [ 1, 2, 3, 4, 5, 6, [ 1, 2 ], [ 3, 4 ] ]


let obj1 = [{a:1},{b:2}]
let obj2 = [{c:3},{d:4}]
let obj3 = obj1.concat(obj2)  
console.log(obj3); 
//[ { a: 1 }, { b: 2 }, { c: 3 }, { d: 4 } ]


obj1[0].a = 4  //改變obj[0]對象值，會直接影響合併後的數組，由於是淺拷貝
console.log(obj3); 
//[ { a: 4 }, { b: 2 }, { c: 3 }, { d: 4 } ]

`toString()`

toString() 返回一個字符串，表示指定的數組及其元素。

「當一個數組被做爲文本值或者進行字符串鏈接操做時，將會自動調用其 toString 方法。」

對於數組對象，toString 方法鏈接數組並返回一個字符串，其中包含用逗號分隔的每一個數組元素。

「語法」

arr.toString()

const arr = [1,2,3]

console.log(arr.toString());  //1,2,3

`join()`

join()方法經過鏈接數組元素用逗號或指定的分隔符字符串分隔，返回一個字符串。

若是數組只有一項，則將在不使用分隔符的狀況下返回該項。

「語法」

join()
join(separator)

separator : 指定的分割的字符可選

const arr = ['2021','08','08']

console.log(arr.join());     //2021,08,08
console.log(arr.join('-'));  //2021-08-08
console.log(arr.join('/'));  //2021/08/08

`slice()`

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

「語法」

arr.slice(begin, end)

begin : 指定截取的「開始」索引可選

❝ ❞

默認從0 開始
若是 begin 爲負數，則以數組末尾開始的絕對值開始截取 slice(-2) 末尾第2個元素
若是 begin 超出原數組的索引範圍，則會返回空數組。

end : 指定截取的「結束」索引可選

❝ ❞

若是 end 被省略，則 slice 會一直提取到原數組末尾。
若是 end 大於數組的長度， slice 也會一直提取到原數組末尾。
若是 end 爲負數，則它表示在原數組中的倒數第幾個元素結束抽取。

const arr = [11,22,33,44,55,66,77,88]

console.log(arr.slice(1,4));
// 應該返回 索引 1 - 3 的數組元素
// [ 22, 33, 44 ]


console.log(arr.slice(-4,2))  //[]

console.log(arr.slice(-4));   //[ 55, 66, 77, 88 ]


console.log(arr.slice(0,-1));
// [
//     11, 22, 33, 44,
//     55, 66, 77
//   ]

參考文獻

Array - JavaScript | MDN

E N D

加我微信：掃碼下方二維碼 , 備注 技術交流，拉你進交流羣。

羣內學習氛圍挺好，拒絕劃水黨和伸手黨。

Vue權限路由思考

Vue 組件通訊的 8 種方式

Vue3 + TypeScript 開發實踐總結

TypeScript學習指南(有PDF小書+思維導圖)

React Hook | 必學的 9 個鉤子

2021前端面試高頻 HTML + CSS

淺聊防抖與節流實現與應用

深入剖析 JavaScript 閉包

[瀏覽器系列] ：客戶端本地存儲

轉發是對我最大的支持你

本文分享自微信公衆號 - 前端自學社區（gh_ce69e7dba7b5）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。

最全 JavaScript Array 方法 詳解

數組使用指南

遍歷數組方法

不會改變原數組的遍歷方法

forEach()

reduce()

find()

findIndex()

key()

values()

返回 布爾值

every()

some()

不改變原有數組，造成新的數組

filter()

map()

數組 CRUD

改變原數組方法

reverse()

sort()

刪除元素

shift()

pop()

splice()

增長元素

splice()

push()

unshift()

不改變原數組元素方法

indexOf()

lastIndexOf()

inCludes()

concat()

toString()

join()

slice()

參考文獻

最全 JavaScript Array 方法詳解

`forEach()`

`reduce()`

`find()`

`findIndex()`

`key()`

`values()`

返回布爾值

`every()`

`some()`

`filter()`

`map()`

`reverse()`

`sort()`

`shift()`

`pop()`

`splice()`

`splice()`

`push()`

`unshift()`

`indexOf()`

`lastIndexOf()`

`inCludes()`

`concat()`

`toString()`

`join()`

`slice()`