es6處理數組的方法匯總(非常詳細)
更新時間：2023年06月27日 15:45:24 作者：Naive_Jam
ES6中引入了一些新的數組方法,例如:Array.of(),Array.from()等,下面這篇文章主要給大家介紹了關于es6處理數組的方法匯總,需要的朋友可以參考下
創(chuàng)建數組靜態(tài)方法 ES6
Array.from()
用于將類數組結構轉換為數組實例
- 第一個參數是一個類數組對象，即任何可迭代的結構或者有一個length屬性和可索引元素的結構。
- 第二個可選的映射函數參數，這個函數可以直接增強新數組的值
- 第三個可選參數用于指定映射函數中 this 的值 (箭頭函數無法使用)
Array.from({ length: 10 }, (item, index) => index); //[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]Array.of()
可以把一組參數轉換為數組
- 用于代替在ES6之前使用的 Array.prototype.slice.call(arguments)，一種異常笨拙的將 arguments 對象轉換為數組的寫法
Array.of((1,2,3,4,5)); //[1, 2, 3, 4, 5]
檢測數組方法
instanceof
在只有一個網頁(因而只有一個全局作用域)的情況下，使用 instanceof 操作符足以
value instanceof Array
Array.isArray()
如果網頁由多個框架，則可能設計兩個不同的全局執(zhí)行上下文，因此會有兩個不同版本的 Array 構造函數
Array.isArray(value)
迭代器方法 ES6
- Array在原型上暴露了三個用于檢索數組內容的方法：keys()、values()和entries()
- 因為這些方法都是返回迭代器，所以可以將他們的內容用 Array.from() 轉換為數組實例
const lazy = ['one', 'two', 'three', 'four'];
keys()
返回數組索引的迭代器
Array.from(lazy.keys); //[0, 1, 2, 3]
values()
返回數組元素的迭代器
Array.from(lazy.values); //["one", "two", "three", "four"]
entries()
返回數組元素的迭代器
Array.from(lazy.entries()); //[[0, "one"][1, "two"][2, "three"][3, "four"]]
復制和填充方法 ES6
Array.fill()
向一個已有的數組中插入全部或部分相同的值
- 第一個參數是需要填充的值
- 第二個參數是開始索引，可選，不選的話從0開始
- 第三個參數是結束索引，可選，不選的話到末尾結束
- 索引為負的話從數組末尾開始計算索引，也可以將負索引想象成數組長度加上它得到的一個正索引
const zeroes = [0, 0, 0, 0, 0]; // 用5填充整個數組 zeroes.fill(5); //[5, 5, 5, 5, 5] zeroes.fill(0); // 重置 // 用6填充索引大于等于3的元素 zeroes.fill(6, 3); //[0, 0, 0, 6, 6] zeroes.fill(0); // 重置 // 用7填充大于等于1且小于3的元素 zeroes.fill(7, 1, 3); //[0, 7, 7, 0, 0] zeroes.fill(0); // 重置 // 用8填充索引大于等于1且小于4的元素 // (-4 + zeroes.length = 1) // (-1 + zeroes.length = 1) zeroes.fill(8, -4, -1); //[0, 8, 8, 8, 0] zeroes.fill(0); // 重置 // fill() 靜默忽略超出數組邊界、零長度及方向相反的索引范圍 // 索引過低，忽略 zeroes.fill(1, -10, -6); //[0, 0, 0, 0, 0] // 索引過高忽略 zeroes.fill(1, 10, 15); //[0, 0, 0, 0, 0] // 索引反向，忽略 zeroes.fill(2, 4, 2); //[0, 0, 0, 0, 0] // 索引部分可用，填充可用部分 zeroes.fill(4, 3, 10); //[0, 0, 0, 4, 4]
Array.copyWithin()
- 按照指定范圍淺復制數組中的部分內容，然后將它們插入到指定索引開始的位置
- 開始索引和結束索引與 fill() 使用相同的計算方法
- copyWithin() 也靜默忽略超出數組邊界、零長度及方向相反的索引范圍
let ints; reset = () => ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; reset(); //重置 // 從inits中復制0開始的內容，插入到索引5的位置 // 在源索引或目標索引到達數組邊界時停止 ints.copyWithin(5); //[0, 1, 2, 3, 4, 0, 1, 2, 3, 4] reset(); // 重置 // 從ints中復制索引5開始的內容，插入到索引0開始的位置 ints.copyWithin(0, 5); //[5, 6, 7, 8, 9, 5, 6, 7, 8, 9] reset(); // 重置 // 從int中復制索引0開始到索引3結束的內容 // 插入到索引4的位置 ints.copyWithin(4, 0, 3); //[0, 1, 2, 3, 0, 1, 2, 7, 8, 9] reset(); // 重置 // JavaScript 引擎在插值錢回完整復制范圍內的值 // 因此復制期間不存在重寫的風險 ints.copyWithin(2, 0, 6); //[0, 1, 0, 1, 2, 3, 4, 5, 8, 9] reset(); // 重置 // 支持負索引值，與fill()相對于數組末尾計算正向索引的過程是一樣的 ints.copyWithin(-4, -7, -3); //[0, 1, 2, 3, 4, 5, 3, 4, 5, 6]
轉化方法
let colors = ['red', 'blue', 'yellow'];
Array.valueOf()
返回的還是數組本身
colors.valueOf(); // ["red", "blue", "yellow"]
Array.toString()
返回由每個值的等效字符串拼接而成的一個逗號分隔的字符串
colors.toString(); // "red,blue,yellow"
Array.toLocaleString()
- 得到一個逗號分隔的數組值的字符串
- 為了得到最終的字符串，會調用每個值的 toLocaleString() 方法，而不是 toString() 方法
colors.toLocaleString(); // 'red,blue,yellow'
Array.join()
- 該方法只接收一個參數separator：即分隔符
- 將數組的元素組起一個字符串，以 separator 為分隔符，省略的話則用默認用逗號為分隔符
let arr = [1, 2, 3];
console.log(arr.join()); // 1,2,3
console.log(arr.join("-")); // 1-2-3
console.log(arr); // [1, 2, 3]（原數組不變）實現重復字符串
通過join()方法可以實現重復字符串，只需傳入字符串以及重復的次數，就能返回重復后的字符串，函數如下：
function repeatString(str, n) {
return new Array(n + 1).join(str);
}
console.log(repeatString("abc", 3)); // abcabcabc
console.log(repeatString("Hi", 5)); // HiHiHiHiHi 注意，如果數組中的某一項是 null 或 undefined， 則在 join() toLocaleString() toString() valueOf() 返回的結果以空字符串表示
棧方法
push()和pop()
- push(): 可以接收任意數量的參數，把它們逐個添加到數組末尾，并返回修改后數組的長度。
- pop()：數組末尾移除最后一項，減少數組的 length 值，然后返回移除的項。
const arr = ["Lily","lucy","Tom","lazy"];
const count = arr.push("Jack","Sean");
console.log(count); // 6
console.log(arr); // ["Lily", "lucy", "Tom", "lazy", "Jack", "Sean"]
const item = arr.pop();
console.log(item); // Sean
console.log(arr); // ["Lily", "lucy", "Tom", "lazy", "Jack"]隊列方法
shift() 和 unshift()
- shift()：刪除原數組第一項，并返回刪除元素的值；如果數組為空則返回undefined 。
- unshift:將參數添加到原數組開頭，并返回數組的長度 。
- 這組方法和上面的push()和pop()方法正好對應，一個是操作數組的開頭，一個是操作數組的結尾。
const arr = ["Lily", "lucy", "Tom", "lazy"];
const count = arr.unshift("Jack", "Sean");
console.log(count); // 6
console.log(arr); //["Jack", "Sean", "Lily", "lucy", "Tom", "lazy"]
const item = arr.shift();
console.log(item); // Jack
console.log(arr); // ["Sean", "Lily", "lucy", "Tom", "lazy"]排序方法
reverse()
反轉數組項的順序
let arr = [13, 24, 51, 3]; console.log(arr.reverse()); //[3, 51, 24, 13] console.log(arr); //[3, 51, 24, 13](原數組改變)
sort()
- 按升序排列數組項——即最小的值位于最前面，最大的值排在最后面。
- 在排序時，sort() 方法會調用每個數組項的 toString() 轉型方法，然后比較得到的字符串，以確定如何排序。即使數組中的每一項都是數值， sort() 方法比較的也是字符串，因此會出現以下的這種情況：
let arr1 = ["a", "d", "c", "b"]; console.log(arr1.sort()); // ["a", "b", "c", "d"] let arr2 = [13, 24, 51, 3]; console.log(arr2.sort()); // [13, 24, 3, 51] 兩位數字先比較第一位再比較第二位 console.log(arr2); // [13, 24, 3, 51](原數組被改變)
為了解決上述問題，sort()方法可以接收一個比較函數作為參數，以便我們指定哪個值位于哪個值的前面。比較函數接收兩個參數
- 如果第一個參數應該位于第二個之前則返回一個負數，如果兩個參數相等則返回 0，如果第一個參數應該位于第二個之后則返回一個正數。以下就是一個簡單的比較函數：
function compare(value1, value2) {
return value1 - value2;
}
let arr = [13, 24, 51, 3];
console.log(arr.sort(compare)); // [3, 13, 24, 51]如果需要通過比較函數產生降序排序的結果，只要交換比較函數返回的值即可：
function compare(value1, value2) {
return value2 - value1;
}
let arr = [13, 24, 51, 3];
console.log(arr.sort(compare)); // [51, 24, 13, 3]操作方法
Array.concat()
將參數添加到原數組中。這個方法會先創(chuàng)建當前數組一個副本，然后將接收到的參數添加到這個副本的末尾，最后返回新構建的數組。在沒有給 concat() 方法傳遞參數的情況下，它只是復制當前數組并返回副本
const arr = [1,3,5,7]; const arrCopy = arr.concat(9,[11,13]); console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13] console.log(arr); // [1, 3, 5, 7](原數組未被修改)
從上面測試結果可以發(fā)現：傳入的不是數組，則直接把參數添加到數組后面，如果傳入的是數組，則將數組中的各個項添加到數組中。但是如果傳入的是一個二維數組呢？
const arrCopy2 = arr.concat([9,[11,13]]); console.log(arrCopy2); //[1, 3, 5, 7, 9, Array[2]] console.log(arrCopy2[5]); //[11, 13]
上述代碼中，arrCopy2 數組的第五項是一個包含兩項的數組，也就是說concat方法只能將傳入數組中的每一項添加到數組中，如果傳入數組中有些項是數組，那么也會把這一數組項當作一項添加到 arrCopy2 中
Array.slice()
返回從原數組中指定開始下標到結束下標之間的項組成的新數組
slice() 方法可以接受一或兩個參數，即要返回項的起始和結束位置。
- 在只有一個參數的情況下， slice() 方法返回從該參數指定位置開始到當前數組末尾的所有項
- 如果有兩個參數，該方法返回起始和結束位置之間的項——但不包括結束位置的項
const arr = [1,3,5,7,9,11]; const arrCopy = arr.slice(1); const arrCopy2 = arr.slice(1,4); const arrCopy3 = arr.slice(1,-2); const arrCopy4 = arr.slice(-4,-1); console.log(arr); //[1, 3, 5, 7, 9, 11](原數組沒變) console.log(arrCopy); //[3, 5, 7, 9, 11] console.log(arrCopy2); //[3, 5, 7] console.log(arrCopy3); //[3, 5, 7] console.log(arrCopy4); //[5, 7, 9] // arrCopy只設置了一個參數，也就是起始下標為1，所以返回的數組為下標1（包括下標1）開始到數組最后。 // arrCopy2設置了兩個參數，返回起始下標（包括1）開始到終止下標（不包括4）的子數組。 // arrCopy3設置了兩個參數，終止下標為負數，當出現負數時，將負數加上數組長度的值（6）來替換該位置的數，因此就是從1開始到4（不包括）的子數組。 // arrCopy4中兩個參數都是負數，所以都加上數組長度6轉換成正數，因此相當于slice(2,5)。
Array.splice()
- splice()：很強大的數組方法，它有很多種用法，可以實現刪除、插入和替換。
- 刪除：可以刪除任意數量的項，只需指定 2 個參數：要刪除的第一項的位置和要刪除的項數。例如， splice(0,2)會刪除數組中的前兩項。
- 插入：可以向指定位置插入任意數量的項，只需提供 3 個參數：起始位置、 0（要刪除的項數）和要插入的項。例如，splice(2,0,4,6)會從當前數組的位置 2 開始插入4和6。
替換：可以向指定位置插入任意數量的項，且同時刪除任意數量的項，只需指定 3 個參數：起始位置、要刪除的項數和要插入的任意數量的項。插入的項數不必與刪除的項數相等。例如，splice (2,1,4,6)會刪除當前數組位置 2 的項，然后再從位置 2 開始插入4和6。 - splice()方法始終都會返回一個數組，該數組中包含從原始數組中刪除的項，如果沒有刪除任何項，則返回一個空數組。
let arr = [1,3,5,7,9,11]; let arrRemoved = arr.splice(0,2); console.log(arr); //[5, 7, 9, 11] console.log(arrRemoved); //[1, 3] let arrRemoved2 = arr.splice(2,0,4,6); console.log(arr); // [5, 7, 4, 6, 9, 11] console.log(arrRemoved2); // [] let arrRemoved3 = arr.splice(1,1,2,4); console.log(arr); // [5, 2, 4, 4, 6, 9, 11] console.log(arrRemoved3); //[7]
搜索和位置方法
嚴格相等
Array.indexOf()和 Array.lastIndexOf()
- indexOf()：接收兩個參數：要查找的項和（可選的）表示查找起點位置的索引。其中， 從數組的開頭（位置 0）開始向后查找。
- lastIndexOf：接收兩個參數：要查找的項和（可選的）表示查找起點位置的索引。其中， 從數組的末尾開始向前查找。
- 這兩個方法都返回要查找的項在數組中的位置，或者在沒找到的情況下返回?1。在比較第一個參數與數組中的每一項時，會使用全等操作符。
const arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5)); //2
console.log(arr.lastIndexOf(5)); //5
console.log(arr.indexOf(5,2)); //2
console.log(arr.lastIndexOf(5,4)); //2
console.log(arr.indexOf("5")); //-1Array.includes() ES7
- 第一個參數為要找的元素
- 第二個可選參數為可選的起始搜索位置，默認索引0
- 返回一個布爾值
const arr = [1,3,5,7,7,5,3,1]; arr.includes(3); // true arr.includes(4); // false
斷言函數
- ECMAScript 也允許按照定義的斷言函數搜索數組，每個索引都會調用這個函數
- 斷言函數的返回值決定了想要的索引的元素是否被認為匹配
- 第一個參數為元素：數組中當前搜索的元素
- 第二個參數是索引：當前元素的索引
- 第三個參數是數組本身： 正在搜索的數組
Array.find()和Array.findIndex()
- find() 返回第一個匹配的元素
- findIndex() 返回第一個匹配元素的索引
- 這兩個方法都是從數組的最小索引開始
- 都接收第二個可選的參數，用于指定斷言函數內部 this 的值
const people = [
{
name: 'lazy',
age: 25
},
{
name: 'lazy',
age: 23
},
{
name: 'make',
age: 20
}
]
people.find((element, index, array) => element.age > 21); //{name: "lazy", age: 25}
people.findIndex((element, index, array) => element.age > 21); //0找到匹配項后，這兩個方法都不再繼續(xù)搜索
迭代方法
Array.forEach()
- 對數組進行遍歷循環(huán)，對數組中的每一項運行給定函數。
- 這個方法沒有返回值。參數都是function類型，默認有傳參，參數分別為：遍歷的數組內容；第對應的數組索引，數組本身。
const arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a){
console.log(x + '|' + index + '|' + (a === arr));
});
// 輸出為：
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|trueArray.map()
- 指“映射”，對數組中的每一項運行給定函數，返回每次函數調用的結果組成的數組。
- 下面代碼利用map方法實現數組中每個數求平方。
const arr = [1, 2, 3, 4, 5];
const arr2 = arr.map(function(item){
return item*item;
});
console.log(arr2); //[1, 4, 9, 16, 25]Array.filter()
“過濾”功能，數組中的每一項運行給定函數，返回滿足過濾條件組成的數組。
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const arr2 = arr.filter(function(x, index) {
return index % 3 === 0 || x >= 8;
});
console.log(arr2); //[1, 4, 7, 8, 9, 10]Array.every()
判斷數組中每一項都是否滿足條件，只有所有項都滿足條件，才會返回true。
const arr = [1, 2, 3, 4, 5];
const arr2 = arr.every(function(x) {
return x < 10;
});
console.log(arr2); //true
const arr3 = arr.every(function(x) {
return x < 3;
});
console.log(arr3); // falseArray.some()
判斷數組中是否存在滿足條件的項，只要有一項滿足條件，就會返回true。
const arr = [1, 2, 3, 4, 5];
const arr2 = arr.some(function(x) {
return x < 3;
});
console.log(arr2); //true
const arr3 = arr.some(function(x) {
return x < 1;
});
console.log(arr3); // false歸并方法
Array.reduce()和 Array.reduceRight()
這兩個方法都會實現迭代數組的所有項，然后構建一個最終返回的值。reduce()方法從數組的第一項開始，逐個遍歷到最后。而 reduceRight() 則從數組的最后一項開始，向前遍歷到第一項。
這兩個方法都接收兩個參數：
- 每一項上調用的函數
- (可選的)作為歸并基礎的初始值
傳給 reduce()和 reduceRight() 的函數接收 4 個參數：前一個值、當前值、項的索引和數組對象。這個函數返回的任何值都會作為第一個參數自動傳給下一項。第一次迭代發(fā)生在數組的第二項上，因此第一個參數是數組的第一項，第二個參數就是數組的第二項。
下面代碼用 reduce() 實現數組求和，數組一開始加了一個初始值10。
const values = [1,2,3,4,5];
const sum = values.reduceRight(function(prev, cur, index, array){
return prev + cur;
},10);
console.log(sum); //25總結
到此這篇關于es6處理數組的方法的文章就介紹到這了,更多相關es6處理數組方法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
JavaScript 中字符串和數組的概念解析與多角度對比區(qū)分
JavaScript中的字符串和數組是兩種重要的數據結構,各有特點和應用場景,字符串主要用于文本處理,是不可變的；數組用于存儲有序集合,是可變的,理解它們的區(qū)別和應用場景,有助于編寫更高效和易維護的代碼,感興趣的朋友跟隨小編一起看看吧2024-11-11
IE6、IE7、Firefox javascript 無提示關閉窗口的代碼
2009-03-03
在前端開發(fā)中數據的加密和解密是為了保障用戶隱私和數據的安全性而常見的任務,這篇文章主要給大家介紹了關于前端使用crypto-js庫aes加解密的相關資料,需要的朋友可以參考下2024-03-03
這篇文章主要為大家詳細介紹了JS猜數字游戲實例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了JavaScript駕馭網頁－DOM的相關資料,需要的朋友可以參考下2016-03-03
下面小編就為大家?guī)硪黄狫avaScript 函數的執(zhí)行過程。小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
ES6引入了模塊化概念,提供命名導出、默認導出、導出重命名和導出合并功能,支持動態(tài)導入,模塊默認嚴格模式,避免全局污染,支持循環(huán)依賴,代碼更可維護,本文介紹es6-module的語法知識,感興趣的朋友一起看看吧2025-02-02
這篇文章主要介紹了微信小程序仿朋友圈發(fā)布動態(tài)界面，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了javascript數組去重方法,通過2個示例對比分析了javascript數組去重的原理與操作技巧,需要的朋友可以參考下
2016-12-12