亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

es6處理數(shù)組的方法匯總(非常詳細(xì))

 更新時間：2023年06月27日 15:45:24   作者：Naive_Jam  
ES6中引入了一些新的數(shù)組方法,例如:Array.of(),Array.from()等,下面這篇文章主要給大家介紹了關(guān)于es6處理數(shù)組的方法匯總,需要的朋友可以參考下

創(chuàng)建數(shù)組靜態(tài)方法 ES6

Array.from()

用于將類數(shù)組結(jié)構(gòu)轉(zhuǎn)換為數(shù)組實(shí)例

  • 第一個參數(shù)是一個類數(shù)組對象，即任何可迭代的結(jié)構(gòu)或者有一個length屬性和可索引元素的結(jié)構(gòu)。
  • 第二個可選的映射函數(shù)參數(shù)，這個函數(shù)可以直接增強(qiáng)新數(shù)組的值
  • 第三個可選參數(shù)用于指定映射函數(shù)中 this 的值 (箭頭函數(shù)無法使用)
Array.from({ length: 10 }, (item, index) => index); //[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

Array.of()

可以把一組參數(shù)轉(zhuǎn)換為數(shù)組

  • 用于代替在ES6之前使用的 Array.prototype.slice.call(arguments)，一種異常笨拙的將 arguments 對象轉(zhuǎn)換為數(shù)組的寫法
Array.of((1,2,3,4,5)); //[1, 2, 3, 4, 5]

檢測數(shù)組方法

instanceof

在只有一個網(wǎng)頁(因而只有一個全局作用域)的情況下，使用 instanceof 操作符足以

value instanceof Array

Array.isArray()

如果網(wǎng)頁由多個框架，則可能設(shè)計(jì)兩個不同的全局執(zhí)行上下文，因此會有兩個不同版本的 Array 構(gòu)造函數(shù)

Array.isArray(value)

迭代器方法 ES6

  • Array在原型上暴露了三個用于檢索數(shù)組內(nèi)容的方法：keys()、values()和entries()
  • 因?yàn)檫@些方法都是返回迭代器，所以可以將他們的內(nèi)容用 Array.from() 轉(zhuǎn)換為數(shù)組實(shí)例
const lazy = ['one', 'two', 'three', 'four'];

keys()

返回?cái)?shù)組索引的迭代器

Array.from(lazy.keys); //[0, 1, 2, 3]

values()

返回?cái)?shù)組元素的迭代器

Array.from(lazy.values); //["one", "two", "three", "four"]

entries()

返回?cái)?shù)組元素的迭代器

Array.from(lazy.entries()); //[[0, "one"][1, "two"][2, "three"][3, "four"]]

復(fù)制和填充方法 ES6

Array.fill()

向一個已有的數(shù)組中插入全部或部分相同的值

  • 第一個參數(shù)是需要填充的值
  • 第二個參數(shù)是開始索引，可選，不選的話從0開始
  • 第三個參數(shù)是結(jié)束索引，可選，不選的話到末尾結(jié)束
  • 索引為負(fù)的話從數(shù)組末尾開始計(jì)算索引，也可以將負(fù)索引想象成數(shù)組長度加上它得到的一個正索引
const zeroes = [0, 0, 0, 0, 0];
 
// 用5填充整個數(shù)組
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() 靜默忽略超出數(shù)組邊界、零長度及方向相反的索引范圍
 
// 索引過低，忽略
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()

  • 按照指定范圍淺復(fù)制數(shù)組中的部分內(nèi)容，然后將它們插入到指定索引開始的位置
  • 開始索引和結(jié)束索引與 fill() 使用相同的計(jì)算方法
  • copyWithin() 也靜默忽略超出數(shù)組邊界、零長度及方向相反的索引范圍
let ints;
reset = () => ints = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
reset(); //重置
 
// 從inits中復(fù)制0開始的內(nèi)容，插入到索引5的位置
// 在源索引或目標(biāo)索引到達(dá)數(shù)組邊界時停止
ints.copyWithin(5); //[0, 1, 2, 3, 4, 0, 1, 2, 3, 4]
reset(); // 重置
 
// 從ints中復(fù)制索引5開始的內(nèi)容，插入到索引0開始的位置
ints.copyWithin(0, 5); //[5, 6, 7, 8, 9, 5, 6, 7, 8, 9]
reset(); // 重置
 
// 從int中復(fù)制索引0開始到索引3結(jié)束的內(nèi)容
// 插入到索引4的位置
ints.copyWithin(4, 0, 3); //[0, 1, 2, 3, 0, 1, 2, 7, 8, 9]
reset(); // 重置
 
// JavaScript 引擎在插值錢回完整復(fù)制范圍內(nèi)的值
// 因此復(fù)制期間不存在重寫的風(fēng)險(xiǎn) 
ints.copyWithin(2, 0, 6); //[0, 1, 0, 1, 2, 3, 4, 5, 8, 9]
reset(); // 重置
 
// 支持負(fù)索引值，與fill()相對于數(shù)組末尾計(jì)算正向索引的過程是一樣的
ints.copyWithin(-4, -7, -3); //[0, 1, 2, 3, 4, 5, 3, 4, 5, 6]

轉(zhuǎn)化方法

let colors = ['red', 'blue', 'yellow'];

Array.valueOf()

返回的還是數(shù)組本身

colors.valueOf(); // ["red", "blue", "yellow"]

Array.toString()

返回由每個值的等效字符串拼接而成的一個逗號分隔的字符串

colors.toString(); // "red,blue,yellow"

Array.toLocaleString()

  • 得到一個逗號分隔的數(shù)組值的字符串
  • 為了得到最終的字符串，會調(diào)用每個值的 toLocaleString() 方法，而不是 toString() 方法
colors.toLocaleString(); // 'red,blue,yellow'

Array.join()

  • 該方法只接收一個參數(shù)separator：即分隔符
  • 將數(shù)組的元素組起一個字符串，以 separator 為分隔符，省略的話則用默認(rèn)用逗號為分隔符
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]（原數(shù)組不變）

實(shí)現(xiàn)重復(fù)字符串

通過join()方法可以實(shí)現(xiàn)重復(fù)字符串，只需傳入字符串以及重復(fù)的次數(shù)，就能返回重復(fù)后的字符串，函數(shù)如下：

function repeatString(str, n) {
    return new Array(n + 1).join(str);
}
console.log(repeatString("abc", 3)); // abcabcabc
console.log(repeatString("Hi", 5)); // HiHiHiHiHi

注意，如果數(shù)組中的某一項(xiàng)是 null 或 undefined， 則在 join() toLocaleString() toString() valueOf() 返回的結(jié)果以空字符串表示

棧方法

push()和pop() 

  • push(): 可以接收任意數(shù)量的參數(shù)，把它們逐個添加到數(shù)組末尾，并返回修改后數(shù)組的長度。
  • pop()：數(shù)組末尾移除最后一項(xiàng)，減少數(shù)組的 length 值，然后返回移除的項(xiàng)。
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"]

隊(duì)列方法

shift() 和 unshift()

  • shift()：刪除原數(shù)組第一項(xiàng)，并返回刪除元素的值；如果數(shù)組為空則返回undefined 。
  • unshift:將參數(shù)添加到原數(shù)組開頭，并返回?cái)?shù)組的長度 。
  • 這組方法和上面的push()和pop()方法正好對應(yīng)，一個是操作數(shù)組的開頭，一個是操作數(shù)組的結(jié)尾。
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()

反轉(zhuǎn)數(shù)組項(xiàng)的順序

let arr = [13, 24, 51, 3];
console.log(arr.reverse()); //[3, 51, 24, 13]
console.log(arr); //[3, 51, 24, 13](原數(shù)組改變)

sort()

  • 按升序排列數(shù)組項(xiàng)——即最小的值位于最前面，最大的值排在最后面。
  • 在排序時，sort() 方法會調(diào)用每個數(shù)組項(xiàng)的 toString() 轉(zhuǎn)型方法，然后比較得到的字符串，以確定如何排序。即使數(shù)組中的每一項(xiàng)都是數(shù)值， sort() 方法比較的也是字符串，因此會出現(xiàn)以下的這種情況：
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] 兩位數(shù)字先比較第一位再比較第二位
console.log(arr2); // [13, 24, 3, 51](原數(shù)組被改變)

為了解決上述問題，sort()方法可以接收一個比較函數(shù)作為參數(shù)，以便我們指定哪個值位于哪個值的前面。比較函數(shù)接收兩個參數(shù)

  • 如果第一個參數(shù)應(yīng)該位于第二個之前則返回一個負(fù)數(shù)，如果兩個參數(shù)相等則返回 0，如果第一個參數(shù)應(yīng)該位于第二個之后則返回一個正數(shù)。以下就是一個簡單的比較函數(shù)：
function compare(value1, value2) {
    return value1 - value2;
}
let arr = [13, 24, 51, 3];
console.log(arr.sort(compare)); // [3, 13, 24, 51]

如果需要通過比較函數(shù)產(chǎn)生降序排序的結(jié)果，只要交換比較函數(shù)返回的值即可：

function compare(value1, value2) {
    return value2 - value1;
}
let arr = [13, 24, 51, 3];
console.log(arr.sort(compare)); // [51, 24, 13, 3]

操作方法

Array.concat()

將參數(shù)添加到原數(shù)組中。這個方法會先創(chuàng)建當(dāng)前數(shù)組一個副本，然后將接收到的參數(shù)添加到這個副本的末尾，最后返回新構(gòu)建的數(shù)組。在沒有給 concat() 方法傳遞參數(shù)的情況下，它只是復(fù)制當(dāng)前數(shù)組并返回副本

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](原數(shù)組未被修改)

從上面測試結(jié)果可以發(fā)現(xiàn)：傳入的不是數(shù)組，則直接把參數(shù)添加到數(shù)組后面，如果傳入的是數(shù)組，則將數(shù)組中的各個項(xiàng)添加到數(shù)組中。但是如果傳入的是一個二維數(shù)組呢？

const arrCopy2 = arr.concat([9,[11,13]]);
console.log(arrCopy2); //[1, 3, 5, 7, 9, Array[2]]
console.log(arrCopy2[5]); //[11, 13]

上述代碼中，arrCopy2 數(shù)組的第五項(xiàng)是一個包含兩項(xiàng)的數(shù)組，也就是說concat方法只能將傳入數(shù)組中的每一項(xiàng)添加到數(shù)組中，如果傳入數(shù)組中有些項(xiàng)是數(shù)組，那么也會把這一數(shù)組項(xiàng)當(dāng)作一項(xiàng)添加到 arrCopy2 中

Array.slice()

返回從原數(shù)組中指定開始下標(biāo)到結(jié)束下標(biāo)之間的項(xiàng)組成的新數(shù)組

slice() 方法可以接受一或兩個參數(shù)，即要返回項(xiàng)的起始和結(jié)束位置。

  • 在只有一個參數(shù)的情況下， slice() 方法返回從該參數(shù)指定位置開始到當(dāng)前數(shù)組末尾的所有項(xiàng)
  • 如果有兩個參數(shù)，該方法返回起始和結(jié)束位置之間的項(xiàng)——但不包括結(jié)束位置的項(xiàng)
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](原數(shù)組沒變)
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只設(shè)置了一個參數(shù)，也就是起始下標(biāo)為1，所以返回的數(shù)組為下標(biāo)1（包括下標(biāo)1）開始到數(shù)組最后。 
// arrCopy2設(shè)置了兩個參數(shù)，返回起始下標(biāo)（包括1）開始到終止下標(biāo)（不包括4）的子數(shù)組。 
// arrCopy3設(shè)置了兩個參數(shù)，終止下標(biāo)為負(fù)數(shù)，當(dāng)出現(xiàn)負(fù)數(shù)時，將負(fù)數(shù)加上數(shù)組長度的值（6）來替換該位置的數(shù)，因此就是從1開始到4（不包括）的子數(shù)組。 
// arrCopy4中兩個參數(shù)都是負(fù)數(shù)，所以都加上數(shù)組長度6轉(zhuǎn)換成正數(shù)，因此相當(dāng)于slice(2,5)。

Array.splice()

  • splice()：很強(qiáng)大的數(shù)組方法，它有很多種用法，可以實(shí)現(xiàn)刪除、插入和替換。
  • 刪除：可以刪除任意數(shù)量的項(xiàng)，只需指定 2 個參數(shù)：要刪除的第一項(xiàng)的位置和要刪除的項(xiàng)數(shù)。例如， splice(0,2)會刪除數(shù)組中的前兩項(xiàng)。
  • 插入：可以向指定位置插入任意數(shù)量的項(xiàng)，只需提供 3 個參數(shù)：起始位置、 0（要刪除的項(xiàng)數(shù)）和要插入的項(xiàng)。例如，splice(2,0,4,6)會從當(dāng)前數(shù)組的位置 2 開始插入4和6。
    替換：可以向指定位置插入任意數(shù)量的項(xiàng)，且同時刪除任意數(shù)量的項(xiàng)，只需指定 3 個參數(shù)：起始位置、要刪除的項(xiàng)數(shù)和要插入的任意數(shù)量的項(xiàng)。插入的項(xiàng)數(shù)不必與刪除的項(xiàng)數(shù)相等。例如，splice (2,1,4,6)會刪除當(dāng)前數(shù)組位置 2 的項(xiàng)，然后再從位置 2 開始插入4和6。
  • splice()方法始終都會返回一個數(shù)組，該數(shù)組中包含從原始數(shù)組中刪除的項(xiàng)，如果沒有刪除任何項(xiàng)，則返回一個空數(shù)組。
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]

搜索和位置方法

嚴(yán)格相等

Array.indexOf()和 Array.lastIndexOf()

  • indexOf()：接收兩個參數(shù)：要查找的項(xiàng)和（可選的）表示查找起點(diǎn)位置的索引。其中， 從數(shù)組的開頭（位置 0）開始向后查找。
  • lastIndexOf：接收兩個參數(shù)：要查找的項(xiàng)和（可選的）表示查找起點(diǎn)位置的索引。其中， 從數(shù)組的末尾開始向前查找。
  • 這兩個方法都返回要查找的項(xiàng)在數(shù)組中的位置，或者在沒找到的情況下返回?1。在比較第一個參數(shù)與數(shù)組中的每一項(xiàng)時，會使用全等操作符。
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")); //-1

Array.includes() ES7

  • 第一個參數(shù)為要找的元素
  • 第二個可選參數(shù)為可選的起始搜索位置，默認(rèn)索引0
  • 返回一個布爾值
const arr = [1,3,5,7,7,5,3,1];
arr.includes(3); // true
arr.includes(4); // false

斷言函數(shù)

  • ECMAScript 也允許按照定義的斷言函數(shù)搜索數(shù)組，每個索引都會調(diào)用這個函數(shù)
  • 斷言函數(shù)的返回值決定了想要的索引的元素是否被認(rèn)為匹配
  • 第一個參數(shù)為元素：數(shù)組中當(dāng)前搜索的元素
  • 第二個參數(shù)是索引：當(dāng)前元素的索引
  • 第三個參數(shù)是數(shù)組本身： 正在搜索的數(shù)組

Array.find()和Array.findIndex()

  • find() 返回第一個匹配的元素
  • findIndex() 返回第一個匹配元素的索引
  • 這兩個方法都是從數(shù)組的最小索引開始
  • 都接收第二個可選的參數(shù)，用于指定斷言函數(shù)內(nèi)部 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

找到匹配項(xiàng)后，這兩個方法都不再繼續(xù)搜索

迭代方法

Array.forEach()

  • 對數(shù)組進(jìn)行遍歷循環(huán)，對數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)。
  • 這個方法沒有返回值。參數(shù)都是function類型，默認(rèn)有傳參，參數(shù)分別為：遍歷的數(shù)組內(nèi)容；第對應(yīng)的數(shù)組索引，數(shù)組本身。
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|true

Array.map()

  • 指“映射”，對數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組。
  • 下面代碼利用map方法實(shí)現(xiàn)數(shù)組中每個數(shù)求平方。
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()

“過濾”功能，數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)，返回滿足過濾條件組成的數(shù)組。

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

判斷數(shù)組中每一項(xiàng)都是否滿足條件，只有所有項(xiàng)都滿足條件，才會返回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); // false

Array.some()

判斷數(shù)組中是否存在滿足條件的項(xiàng)，只要有一項(xiàng)滿足條件，就會返回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()

這兩個方法都會實(shí)現(xiàn)迭代數(shù)組的所有項(xiàng)，然后構(gòu)建一個最終返回的值。reduce()方法從數(shù)組的第一項(xiàng)開始，逐個遍歷到最后。而 reduceRight() 則從數(shù)組的最后一項(xiàng)開始，向前遍歷到第一項(xiàng)。

這兩個方法都接收兩個參數(shù)：

  • 每一項(xiàng)上調(diào)用的函數(shù)
  • (可選的)作為歸并基礎(chǔ)的初始值

傳給 reduce()和 reduceRight() 的函數(shù)接收 4 個參數(shù)：前一個值、當(dāng)前值、項(xiàng)的索引和數(shù)組對象。這個函數(shù)返回的任何值都會作為第一個參數(shù)自動傳給下一項(xiàng)。第一次迭代發(fā)生在數(shù)組的第二項(xiàng)上，因此第一個參數(shù)是數(shù)組的第一項(xiàng)，第二個參數(shù)就是數(shù)組的第二項(xiàng)。

下面代碼用 reduce() 實(shí)現(xiàn)數(shù)組求和，數(shù)組一開始加了一個初始值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

總結(jié)

到此這篇關(guān)于es6處理數(shù)組的方法的文章就介紹到這了,更多相關(guān)es6處理數(shù)組方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • javascript數(shù)組去重方法分析

    javascript數(shù)組去重方法分析

    這篇文章主要介紹了javascript數(shù)組去重方法,通過2個示例對比分析了javascript數(shù)組去重的原理與操作技巧,需要的朋友可以參考下
    2016-12-12

    • 最新評論