javascript
最全 JavaScript Array 方法 详解
大家好,我是若川。最近組織了源碼共讀活動,感興趣的可以點此加我微信 ruochuan12?參與,每周大家一起學習200行左右的源碼,共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》?包含20余篇源碼文章。
? ? 我們在日常開發(fā)中,與接口打交道最多了,前端通過訪問后端接口,然后將接口數(shù)據(jù)二次處理渲染到頁面當中。
? ? 二次處理的過程是 考驗 ?Coder 對 Array 是否熟練 以及 在 何種 場景下使用哪種方法處理最優(yōu) 。
? ? 小編,在最近開發(fā)中就遇到了 Array 問題, 在處理復雜的業(yè)務需求時,沒想到Array 有類似的方法,然后將方法 組合起來解決當下問題。
文章用下班時間肝了一周才寫完。
數(shù)組使用指南
遍歷數(shù)組方法
不會改變原數(shù)組的遍歷方法
forEach()
forEach() 方法按照升序為數(shù)組中每一項執(zhí)行一次給定的函數(shù)。
「語法」
arr.forEach(callback(currentValue?,?index?,?array)?,thisArg)currentValue : ?數(shù)組當前項值
index : ?數(shù)組當前項索引
arr : 數(shù)組對象本身
thisArg : 可選參數(shù)。當執(zhí)行回調函數(shù) callback 時,用作 this 的值。
「注意」
如果使用 「箭頭函數(shù)表達式」來傳入函數(shù)參數(shù), thisArg 參數(shù)會被忽略,因為箭頭函數(shù)在詞法上綁定了 this 值。
forEach 不會直接改變調用它的對象,但是那個對象可能會被 callback 函數(shù)改變。
every 不會改變原數(shù)組。
reduce()
reduce()數(shù)組元素累計器,返回一個合并的結果值。
「語法」
arr.reduce(callback(accumulator,?currentValue,?index,?array),?initialValue)accumulator : ?累計器,默認為數(shù)組元素第一個值
currentValue : ?當前值
index : 當前元素索引 可選
array : 數(shù)組 可選
initialValue : 初始值 ?可選
reduce 有兩個參數(shù),一個是回調函數(shù),一個是初始值。
它有兩種取值情況:
當提供了 initialValue 初始值時, 那么accumulator 的值為 initialValue , currentValue 的值為 數(shù)組第一個值
當沒有提供 initialValue 初始值時, 那么 accumulator 的值 為 數(shù)組第一個值, currentValue 為第二個值。
「注意」
如果數(shù)組為空,且沒有提供initialValue 初始值時,會拋出 TypeError .
如果數(shù)組有一個元素,且沒有提供initialValue 或者 ?提供了initialValue ,數(shù)組為空,那么唯一值被返回不會執(zhí)行 callback 回調函數(shù)。
「求和」
//防盜貼:微信公眾號:?前端自學社區(qū)/ 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##?注意 //?回調函數(shù)第一次執(zhí)行時,accumulator 和currentValue的取值有兩種情況: //?如果調用reduce()時提供了initialValue,accumulator取值為initialValue,currentValue取數(shù)組中的第一個值; //?如果沒有提供 initialValue,那么accumulator取數(shù)組中的第一個值,currentValue取數(shù)組中的第二個值。「計算對象中的值」
要累加對象數(shù)組中包含的值,必須提供初始值,以便各個item正確通過你的函數(shù)。
/**?@Description:?*?@Author:?微信公眾號:?前端自學社區(qū)*?@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「二維數(shù)組轉一位數(shù)組」
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 : ?數(shù)組本身 可選
thisArg : 執(zhí)行回調時用作this 的對象。可選
findIndex()
findIndex() 返回數(shù)組中符合條件的第一個元素的索引,沒有,則返回 ?-1 。
「語法」
arr.findIndex((element,index,array),?thisArg)element :當前元素
index : ? 當前元素索引 可選
array : ?數(shù)組本身 可選
thisArg : 執(zhí)行回調時用作this 的對象。可選
key()
key() 返回一個新的「Array Iterator」對象,該對象包含數(shù)組中每個索引的鍵。
「語法」
keys()「注意」
如果數(shù)組中有空原元素,在獲取key 時, 也會加入遍歷的隊列中。
values()
values()方法返回一個新的 「Array Iterator」 對象,該對象包含數(shù)組每個索引的值。
「語法」
arr.values()const?Color?=?['red','yelloe','orange']for(val?of?Color.values()){console.log(val); } //?red //?yelloe //?orange返回 布爾值
every()
every 用來判斷數(shù)組內所有元素是否符合某個條件,返回 「布爾值」
「語法」
arr.every(callback(currentValue?,?index?,?array)?,thisArg)currentValue : ?數(shù)組當前項值 ? 必須
index : ?數(shù)組當前項索引 ? 可選
arr : 數(shù)組對象本身可選
thisArg : 可選參數(shù)。當執(zhí)行回調函數(shù) callback 時,用作 this 的值。可選
「注意」
當所有的元素都符合條件才會返回true
every 不會改變原數(shù)組。
若傳入一個空數(shù)組,無論如何都會返回 true。
some()
some() 用來判斷數(shù)組元素是否符合某個條件,只要有一個元素符合,那么返回 true.
「語法」
arr.some(callback(currentValue?,?index?,?array)?,thisArg)currentValue : ?數(shù)組當前項值 ? 必須
index : ?數(shù)組當前項索引 ? 可選
arr : 數(shù)組對象本身可選
thisArg : 可選參數(shù)。當執(zhí)行回調函數(shù) callback 時,用作 this 的值。可選
「注意」
some() 被調用時不會改變數(shù)組。
如果用一個空數(shù)組進行測試,在任何情況下它返回的都是false。
some() 在遍歷時,元素范圍已經(jīng)確定,在遍歷過程中添加的元素,不會加入到遍歷的序列中。
不改變原有數(shù)組,形成新的數(shù)組
filter()
filter() 用來遍歷原數(shù)組,過濾拿到符合條件的數(shù)組元素,形成新的數(shù)組元素。
「語法」
arr.some(callback(currentValue?,?index?,?array)?,thisArg)currentValue : ?數(shù)組當前項值 ? 必須
index : ?數(shù)組當前項索引 ? 可選
arr : 數(shù)組對象本身可選
thisArg : 可選參數(shù)。當執(zhí)行回調函數(shù) callback 時,用作 this 的值。可選
「注意」
filter 不會改變原數(shù)組,它返回過濾后的新數(shù)組。
filter() 在遍歷時,元素范圍已經(jīng)確定,在遍歷過程中添加的元素,不會加入到遍歷的序列中。
map()
map() 創(chuàng)建一個新的數(shù)組,其結果是該數(shù)組中的每個元素都調用一個提供的函數(shù)后返回的結果。
「語法」
arr.map(callback(currentValue?,?index?,?array)?,thisArg)currentValue : ?數(shù)組當前項值 ? 必須
index : ?數(shù)組當前項索引 ? 可選
arr : 數(shù)組對象本身可選
thisArg : 可選參數(shù)。當執(zhí)行回調函數(shù) callback 時,用作 this 的值。可選
「注意」
map不修改調用它的原數(shù)組本身
map() 在遍歷時,元素范圍已經(jīng)確定,在遍歷過程中添加的元素,不會加入到遍歷的序列中。
數(shù)組 CRUD
改變原數(shù)組方法
reverse()
reverse() 方法將數(shù)組中元素的位置顛倒,并返回該數(shù)組。數(shù)組的第一個元素會變成最后一個,數(shù)組的最后一個元素變成第一個。該方法會改變原數(shù)組。
const?arr?=?[1,2,3]console.log(arr.reverse(11,22,33))??//[?3,?2,?1?]sort()
sort() 方法采用 「原地算法」進行排序并返回數(shù)組。默認排序順序是在「將元素轉換為字符串」,然后「比較它們的UTF-16代碼單元值序列」
「原地算法」是一個使用輔助的數(shù)據(jù)結構對輸入進行轉換的算法。但是,它允許有少量額外的存儲空間來儲存輔助變量。當算法運行時,輸入通常會被輸出覆蓋。原地算法僅通過替換或交換元素來更新輸入序列。
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() 方法從數(shù)組中刪除「第一個」元素,并返回該元素的值。此方法更改數(shù)組的長度。
「語法」
arr.shift()「注意」
從數(shù)組中刪除的元素; 如果數(shù)組為空則返回undefined
pop()
pop()方法從數(shù)組中刪除最后一個元素,并返回該元素的值。此方法更改數(shù)組的長度。
用法和 shift 類似。
「語法」
arr.pop()「注意」
從數(shù)組中刪除的元素; 如果數(shù)組為空則返回undefined
splice()
splice() 方法通過「刪除」或「替換」現(xiàn)有元素或者原地添加新的元素來修改數(shù)組,并以數(shù)組形式返回被修改的內容。此方法會改變原數(shù)組。
「語法」
array.splice(start,deleteCount,?[item1,item2....])start : 開始的索引
deleteCount : 刪除的個數(shù) ?可選
[item1,item2 .....] ;從開始的索引進行 添加的增加和替換的元素, 可選
「注意」
由被刪除的元素組成的一個數(shù)組。如果只刪除了一個元素,則返回只包含一個元素的數(shù)組。如果沒有刪除元素,則返回空數(shù)組。
如果只傳遞了開始的索引位置,則會刪除索引后的所有元素對象
const?data?=?[{id:1,name:'前端'},{id:2,name:'后端'},{id:3,name:'移動端'},{id:4,name:'嵌入式開發(fā)'}, ] data.splice(1) console.log(data) //?[?{?id:?1,?name:?'前端'?}?]
「從索引為 2 開始, 刪除 1 個數(shù)組元素對象,添加兩個數(shù)組元素對象」
const?data?=?[{id:1,name:'前端'},{id:2,name:'后端'},{id:3,name:'移動端'},{id:4,name:'嵌入式開發(fā)'}, ]data.splice(2,1,...[{id:5,name:'人工智能'},{id:6,name:'大數(shù)據(jù)開發(fā)'}])console.log(data); //?[ //?????{?id:?1,?name:?'前端'?}, //?????{?id:?2,?name:?'后端'?}, //?????{?id:?5,?name:?'人工智能'?}, //?????{?id:?6,?name:?'大數(shù)據(jù)開發(fā)'?}, //?????{?id:?4,?name:?'嵌入式開發(fā)'?} //?]增加元素
splice()
上面已經(jīng)有介紹
push()
push() 方法將一個或多個元素添加到數(shù)組的「末尾」,并返回該數(shù)組的新長度。
「語法」
arr.push(element1,?...,?elementN)const?data?=?[{id:1,name:'前端'},{id:2,name:'后端'}, ]console.log(data.push({id:3,name:'移動端'}))??//3「合并數(shù)組」
const?data?=?[{id:1,name:'前端'},{id:2,name:'后端'}, ]var?obj?=?[{id:4,name:'嵌入式開發(fā)'}, ]//?相當于?data.push({id:4,name:'嵌入式開發(fā)'}); Array.prototype.push.apply(data,?obj);console.log(data);[{?id:?1,?name:?'前端'?},{?id:?2,?name:?'后端'?},{?id:?4,?name:?'嵌入式開發(fā)'?} ]unshift()
unshift() 方法將一個或多個元素添加到數(shù)組的「開頭」,并返回該數(shù)組的「新長度」。
const?arr?=?[1,2,3]console.log(arr.unshift(11,22,33))??//6? console.log(arr)??//[?11,?22,?33,?1,?2,?3?]不改變原數(shù)組元素方法
indexOf()
indexOf()方法返回可以在數(shù)組中找到給定元素的第一個索引,如果不存在,則返回 -1。
「語法」
indexOf(searchElement) indexOf(searchElement,?fromIndex)searchElement : ? 要查找的元素
fromIndex :?按指定的索引進行查找出現(xiàn)的指定元素的第一個索引。?可選
??如果索引大于或等于數(shù)組的長度,則返回-1
如果提供的索引值為負數(shù),則將其視為距數(shù)組末尾的偏移量
如果提供的索引為負數(shù),仍然從前到后搜索數(shù)組
如果提供的索引為 0,則將搜索整個數(shù)組。
默認值:0(搜索整個數(shù)組)。
「數(shù)組去重」
創(chuàng)建一個新的空數(shù)組,通過indexOf 來判斷空數(shù)組是否第一次存在某個元素,
不存在則返回 [ ?< 0 ? ] ,push 到空數(shù)組中.
lastIndexOf()
lastIndexOf() 查找數(shù)組中元素最后一次出現(xiàn)的索引,如未找到返回-1。
如果不存在則返回 -1。從數(shù)組的后面向前查找,從 fromIndex 處開始。
「語法」
arr.lastIndexOf(searchElement,?fromIndex)searchElement : ? 要查找的元素
fromIndex :?按指定的索引進行查找出現(xiàn)的指定元素的第一個索引。?可選
??從指定的索引位置 「逆向」 查找
默認為數(shù)組的長度減 1(arr.length - 1),即整個數(shù)組都被查找。
如果該值大于或等于數(shù)組的長度,則整個數(shù)組會被查找。
如果為負值,數(shù)組仍然會被從后向前查找。
如果該值為負時,其絕對值大于數(shù)組長度,則方法返回 -1,即數(shù)組不會被查找。
「注意」
lastIndexOf 使用的是 「嚴格相等」 ? === ?比較 ?searchElement 和數(shù)組中的元素。
inCludes()
includes() 方法用來判斷一個數(shù)組是否包含一個指定的值,根據(jù)情況,如果包含則返回 true,否則返回false。
「語法」
arr.includes(searchElement,?fromIndex)searchElement : ? 要查找的元素
?查找時,區(qū)分大小寫
?fromIndex :?按指定的索引進行查找出現(xiàn)的指定元素的第一個索引。?可選
??從指定的索引進行查找
如果為負值,則按升序從 array.length + fromIndex 的索引開始搜
如果 fromIndex 大于等于數(shù)組的長度,則會返回 false,且該數(shù)組不會被搜索。
默認為0
concat()
concat() 方法用于合并兩個或多個數(shù)組。
「語法」
var?new_array?=?old_array.concat([arr1][arr2])「注意」
concat方法不會改變this或任何作為參數(shù)提供的數(shù)組,而是返回一個「淺拷貝」,它包含與原始數(shù)組相結合的相同元素的副本
??對象引用(而不是實際對象):concat將對象引用復制到新數(shù)組中。原始數(shù)組和新數(shù)組都引用相同的對象。也就是說,如果引用的對象被修改,則更改對于新數(shù)組和原始數(shù)組都是可見的。這包括也是數(shù)組的數(shù)組參數(shù)的元素。
數(shù)據(jù)類型如字符串,數(shù)字和布爾(不是String,Number和 Boolean) 對象):concat將字符串和數(shù)字的值復制到新數(shù)組中。
toString()
toString() 返回一個字符串,表示指定的數(shù)組及其元素。
「當一個數(shù)組被作為文本值或者進行字符串連接操作時,將會自動調用其 toString 方法。」
對于數(shù)組對象,toString 方法連接數(shù)組并返回一個字符串,其中包含用逗號分隔的每個數(shù)組元素。
「語法」
arr.toString()const?arr?=?[1,2,3]console.log(arr.toString());??//1,2,3join()
join()方法通過連接數(shù)組元素用逗號或指定的分隔符字符串分隔,返回一個字符串。
如果數(shù)組只有一項,則將在不使用分隔符的情況下返回該項。
「語法」
join() join(separator)separator : ?指定的分割的 字符 ?可選
slice()
slice() 方法返回一個新的數(shù)組對象,這一對象是一個由 begin 和 end 決定的原數(shù)組的「淺拷貝」(包括 begin,不包括end)。原始數(shù)組不會被改變。
「語法」
arr.slice(begin,?end)begin : 指定截取的「開始」索引 ?可選
??默認從0 開始
如果begin 為負數(shù),則以數(shù)組末尾開始 的 絕對值開始截取 ?slice(-2) ?末尾第2個元素
如果 begin 超出原數(shù)組的索引范圍,則會返回空數(shù)組。
end : 指定截取的「結束」索引 ? ?可選
??如果 end 被省略,則 slice 會一直提取到原數(shù)組末尾。
如果 end 大于數(shù)組的長度,slice 也會一直提取到原數(shù)組末尾。
如果 end 為負數(shù), 則它表示在原數(shù)組中的倒數(shù)第幾個元素結束抽取。
參考文獻
Array - JavaScript | MDN
·················?若川簡介?·················
你好,我是若川,畢業(yè)于江西高校。現(xiàn)在是一名前端開發(fā)“工程師”。寫有《學習源碼整體架構系列》20余篇,在知乎、掘金收獲超百萬閱讀。
從2014年起,每年都會寫一篇年度總結,已經(jīng)寫了7篇,點擊查看年度總結。
同時,最近組織了源碼共讀活動,幫助3000+前端人學會看源碼。公眾號愿景:幫助5年內前端人走向前列。
識別上方二維碼加我微信、拉你進源碼共讀群
今日話題
略。分享、收藏、點贊、在看我的文章就是對我最大的支持~
總結
以上是生活随笔為你收集整理的最全 JavaScript Array 方法 详解的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 前端学习(2971):静态打包资源
- 下一篇: [html] 如果列表元素li的兄弟元