最全總結 JavaScript Array 方法詳解

小阿鑫發表於2021-08-09
JavaScript Array  指南.png
JavaScript Array 指南.png
Array  API 大全    (公眾號: 前端自學社群).png
Array API 大全 (公眾號: 前端自學社群).png

前言

我們在日常開發中,與介面打交道最多了,前端通過訪問後端介面,然後將介面資料二次處理渲染到頁面當中。 二次處理的過程是 考驗 CoderArray 是否熟練 以及 在 何種 場景下使用哪種方法處理最優 。 小編,在最近開發中就遇到了 Array 問題, 在處理複雜的業務需求時,沒想到Array 有類似的方法,然後將方法 組合起來解決當下問題。

文章用下班時間肝了一週才寫完,看完點贊、轉發 是對我最大的支援。


遍歷陣列方法

不會改變原陣列的遍歷方法

forEach()

forEach() 方法按照升序為陣列中每一項執行一次給定的函式。

語法

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 有兩個引數,一個是回撥函式,一個是初始值。

它有兩種取值情況:

    1. 當提供了 initialValue 初始值時, 那麼accumulator 的值為 initialValue , currentValue 的值為 陣列第一個值
    1. 當沒有提供 initialValue 初始值時, 那麼 accumulator 的值 為 陣列第一個值, currentValue 為第二個值。

注意

  • 如果陣列為空,且沒有提供initialValue 初始值時,會丟擲 TypeError .
  • 如果陣列有一個元素,且沒有提供initialValue 或者 提供了initialValue ,陣列為空,那麼唯一值被返回不會執行 callback 回撥函式。

求和

//防盜貼:微信公眾號: 前端自學社群/
const arr = [1234]

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',
        income200
    },
    {
        date'2021-8-2',
        income400
    },
    {
        date'2021-8-3',
        income300
    },
]

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:'張三',
        article3
    },
    {
        name:'老王',
        article9
    },
    {
        name:'老李',
        article10
    }
]

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);

[
  { id1name'前端' },
  { id2name'後端' },
  { id4name'嵌入式開發' }
]

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將物件引用複製到新陣列中。 原始陣列和新陣列都引用相同的物件。 也就是說,如果引用的物件被修改,則更改對於新陣列和原始陣列都是可見的。 這包括也是陣列的陣列引數的元素。
    • 資料型別如字串,數字和布林(不是StringNumberBoolean) 物件):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() 方法返回一個新的陣列物件,這一物件是一個由 beginend 決定的原陣列的淺拷貝(包括 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

最後

文章用下班時間肝了一週,寫作不易,文中的內容都是 參考 MDN 文件 。 如果喜歡的話可以點贊???關注,支援一下,希望大家可以看完本文有所收穫 !

最全總結 JavaScript Array 方法詳解

相關文章