摘要：講講的一些數(shù)組的新方法吧，之前面試有問(wèn)到，自己用了一下還挺好用，先看看數(shù)組新方法的列表擴(kuò)展運(yùn)算符擴(kuò)展運(yùn)算符在中我們要將兩個(gè)打散數(shù)組合并會(huì)用到數(shù)組對(duì)象的方法方法最終會(huì)返回一個(gè)拼接完的數(shù)組，也就是我們所需的結(jié)果如果用擴(kuò)展運(yùn)算符又是如何操作呢不僅

講講ES6的一些數(shù)組的新方法吧，之前面試有問(wèn)到，自己用了一下還挺好用，先看看數(shù)組新方法的列表

擴(kuò)展運(yùn)算符

Array.from()

Array.of()

copyWithin()

find() findIndex()

fill()

entries() keys() values()

includes()

flat() flatMap()

擴(kuò)展運(yùn)算符
在ES5中我們要將兩個(gè)打散數(shù)組合并會(huì)用到數(shù)組對(duì)象的concat方法

let arr = [1,2,3,4,5,6,7,8,9,0]
    console.log(arr.concat([1],[1,2,3,4],"aaaa",["bbbb","ffffdd"])) //[1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 1, 2, 3, 4, "aaaa", "bbbb", "ffffdd"]

concat方法最終會(huì)返回一個(gè)拼接完的數(shù)組，也就是我們所需的結(jié)果
如果用擴(kuò)展運(yùn)算符又是如何操作呢？

let arr = [1,2,3,4,5,6,7,8,9,0]
    console.log(...arr)  //1 2 3 4 5 6 7 8 9 0
    let arr2 = [...arr,...[1],...[1,2,3,4],"aaaa",...["bbbb","ffffdd"]]
    console.log(arr2) //[1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 1, 2, 3, 4, "aaaa", "bbbb", "ffffdd"]

不僅可以打散數(shù)組，擴(kuò)展運(yùn)算符也可以打散字符串

console.log([..."hello world"]) //["h","e","l","l","o"," ","w","o","r","l","d"]

當(dāng)然也能運(yùn)用于數(shù)組的解構(gòu)賦值

 let [a,...b] = [1,2,3,4,5,6]
    console.log(a)//1
    console.log(b)//[2,3,4,5,6]
    //但是必須要知道的一點(diǎn)是在進(jìn)行數(shù)組的解構(gòu)賦值時(shí)只能作用于數(shù)組的最后一位，不然會(huì)報(bào)錯(cuò)！
    let[...c,d] = [22,33,44,55] //Uncaught SyntaxError: Rest element must be last element

當(dāng)然也可以和Aray.from()一樣，將一個(gè)類(lèi)數(shù)組轉(zhuǎn)換成數(shù)組

let set = new Set([1,2,3,4,5,6,7,8])
    console.log([...set]) //[1, 2, 3, 4, 5, 6, 7, 8]

運(yùn)行后可知，...可將Array對(duì)象打散，在數(shù)組中打散則會(huì)返回一個(gè)新的數(shù)組，對(duì)于使用長(zhǎng)邏輯時(shí)，有時(shí)候concat可能會(huì)使代碼看起來(lái)并不是很易懂，用這個(gè)會(huì)好很多。但是擴(kuò)展運(yùn)算符并不是主要用來(lái)打散重組數(shù)組的。把它用在方法傳參中，會(huì)用起來(lái)很簡(jiǎn)潔靈活

let arr = [1,2,3,4,5,6,7,8,9,0]
    function add(...arr){
        let aaa = arguments[0].reduce((i,j)=>{
           return i+j
        })
        console.log(aaa)//45
    }
    add(arr)

當(dāng)然也可以這樣子做

function testFoo(a,b,c,d){
        return a+b+c+d
    }
let arr = [1,2,3,4]
testFoo(...arr)

Array.from()

將類(lèi)數(shù)組對(duì)象和迭代器對(duì)象轉(zhuǎn)換成數(shù)組最常用的應(yīng)該就是數(shù)組去重操作了

let arr = [1,2,3,3,3,3,444,4,4,4,5,5,"a","a","b","f"]
let set = new Set(arr)  //set數(shù)據(jù)類(lèi)型中不會(huì)存在相同的元素，因此把數(shù)組轉(zhuǎn)換成set會(huì)將數(shù)組中重復(fù)的部分去除
let newArr = Array.from(set)  //將set數(shù)據(jù)類(lèi)型轉(zhuǎn)換成數(shù)組
console.log(newArr) //[1, 2, 3, 444, 4, 5, "a", "b", "f"]

當(dāng)然它也能像擴(kuò)展運(yùn)算符一樣，將String字符串轉(zhuǎn)換成數(shù)組

let str = "hello world"
let arr = Array.from(str)
console.log(arr)//["h","e","l","l","o"," ","w","o","r","l","d"]

這里要了解一個(gè)概念什么是類(lèi)數(shù)組對(duì)象一般來(lái)說(shuō)，類(lèi)數(shù)組對(duì)象和數(shù)組沒(méi)多大區(qū)別在操作上也是

let likeArr = {
        "0":0,
        "1":1,
        "2":"aa",
        "3":"bb",
        "4":"cc",
        "length":5
    }  //是不是和你控制臺(tái)打印出來(lái)的數(shù)組對(duì)象很像甚至可以這樣子做

console.log(likeArr[4])//cc
//我們可以用Array.from()將其轉(zhuǎn)換成真正的數(shù)組
let arr = Array.from(likeArr)
console.log(arr)//[0, 1, "aa", "bb", "cc"]

在剛剛操作過(guò)程中我第一次在創(chuàng)建類(lèi)數(shù)組對(duì)象時(shí)忘記定義length屬性了，于是控制臺(tái)報(bào)錯(cuò)了，說(shuō)白了類(lèi)數(shù)組對(duì)象都有一個(gè)length屬性，如果沒(méi)有則和普通對(duì)象沒(méi)多大區(qū)別當(dāng)然Array.from()也會(huì)控制臺(tái)報(bào)錯(cuò)，當(dāng)然擴(kuò)展運(yùn)算符是不能將類(lèi)數(shù)組對(duì)象轉(zhuǎn)換成數(shù)組的，但是Array.from()可以，對(duì)此我們可以用代碼進(jìn)行驗(yàn)證

let likeArr = {
     length:3
}
console.log(Array.from(likeArr))//[undefined,undefined,undefined]
console.log(...likeArr)//Uncaught TypeError: Found non-callable @@iterator

我特地試了一下map數(shù)據(jù)類(lèi)型

let map = new Map()
map.set("0","a").set("1","b")
let arr = Array.from(map)
console.log(arr) //[["0","a"],["1","b"]]

發(fā)現(xiàn)map數(shù)據(jù)類(lèi)型可以被Array.from()轉(zhuǎn)換但是轉(zhuǎn)換成的是一個(gè)數(shù)組是一個(gè)[["鍵"，"值"]，["鍵"，"值"]，["鍵"，"值"]]數(shù)組，一般也不會(huì)這么用我私下再去研究

Array.of()

Array.of()的作用是將一組值轉(zhuǎn)換成數(shù)組，是不是和concat方法有點(diǎn)像，但是concat方法是作用于數(shù)組對(duì)象的，而且，如果傳入的參數(shù)中包含數(shù)組是會(huì)將數(shù)組打散轉(zhuǎn)換成獨(dú)立值，而Array.of()不同，存入數(shù)組，轉(zhuǎn)換成數(shù)組后該參數(shù)在返回值中還是數(shù)組在文檔中阮一峰大神是這樣子來(lái)說(shuō)明的

這個(gè)方法的主要目的，是彌補(bǔ)數(shù)組構(gòu)造函數(shù)Array()的不足。因?yàn)閰?shù)個(gè)數(shù)的不同，會(huì)導(dǎo)致Array()的行為有差異。

舉個(gè)例子

Array.of(0,1,2,3,4)//[0,1,2,3,4]
Array.of(0)//[0]
//如果我們用傳統(tǒng)的生成數(shù)組方式會(huì)是怎么樣？
new Array() //[]
//傳入一個(gè)參數(shù)
new Array(3)//生成一個(gè)長(zhǎng)度為3的數(shù)組 [undefined,undefined,undefined]
//傳入多個(gè)參
new Array(1,2)//[1,2]

從打印結(jié)果可知Array構(gòu)造方法傳入?yún)?shù)數(shù)量不同，返回的結(jié)果并不統(tǒng)一，而Array.of()卻是出奇的統(tǒng)一，這彌補(bǔ)了Array構(gòu)造方法的不足

在不傳入?yún)?shù)時(shí)Array.of()會(huì)返回一個(gè)空數(shù)組

Array.of()//[]

數(shù)組對(duì)象的copyWithin()方法
引用文檔中的介紹：數(shù)組實(shí)例的copyWithin方法，在當(dāng)前數(shù)組內(nèi)部，將指定位置的成員復(fù)制到其他位置（會(huì)覆蓋原有成員），然后返回當(dāng)前數(shù)組。也就是說(shuō)，使用這個(gè)方法，會(huì)修改當(dāng)前數(shù)組。

改方法可接收三個(gè)參數(shù)：
（使用的不多，繼續(xù)抄文檔）

target（必需）：從該位置開(kāi)始替換數(shù)據(jù)。如果為負(fù)值，表示倒數(shù)。

start（可選）：從該位置開(kāi)始讀取數(shù)據(jù)，默認(rèn)為 0。如果為負(fù)值，表示倒數(shù)。

end（可選）：到該位置前停止讀取數(shù)據(jù)，默認(rèn)等于數(shù)組長(zhǎng)度。如果為負(fù)值，表示倒數(shù)

let arr = [1,2,3,4,5,6,7,8,9]
console.log(arr.copyWithin(0,3,8))//[4, 5, 6, 7, 8, 6, 7, 8, 9]
let arr1 = [1,2,3,4,5,6,7,8,9]
console.log(arr1.copyWithin(0,5))//[6, 7, 8, 9, 5, 6, 7, 8, 9]

文檔中有更詳細(xì)的例子以下抄文檔

// 將3號(hào)位復(fù)制到0號(hào)位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

// -2相當(dāng)于3號(hào)位，-1相當(dāng)于4號(hào)位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]

// 將3號(hào)位復(fù)制到0號(hào)位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5}

// 將2號(hào)位到數(shù)組結(jié)束，復(fù)制到0號(hào)位
let i32a = new Int32Array([1, 2, 3, 4, 5]);
i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]

// 對(duì)于沒(méi)有部署 TypedArray 的 copyWithin 方法的平臺(tái)
// 需要采用下面的寫(xiě)法
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]

數(shù)組對(duì)象 find() findIndex()

find()用于找尋數(shù)組對(duì)象中第一個(gè)符合條件的值傳入?yún)?shù)是一個(gè)回調(diào)函數(shù)由此可見(jiàn)是一個(gè)高階函數(shù)，該方法類(lèi)似數(shù)組對(duì)象的every()方法 some()方法 filter()方法，用于鑒別數(shù)組中的值，回調(diào)方法傳入?yún)?shù)也類(lèi)似都是必傳value(值)，可選index(索引)，與arr（原數(shù)組）具體差別用實(shí)驗(yàn)來(lái)鑒別

let arr = [1,2,3,4,5,6,7,8,9]
//every()方法用于鑒別數(shù)組的所有元素是否符合要求并返回boolean
arr.every((value,index,arr)=>{
    return value===7&&index===6
})//false
//some()方法用于鑒別數(shù)組中是否有符合要求的值并返回boolean
arr.some((value,index,arr)=>{
   return value===7&&index===6
})//true
//filter()方法將數(shù)組中符合要求的值拼接成一個(gè)新數(shù)組并返回
arr.filter(value=>{
    return value>3
})//[4, 5, 6, 7, 8, 9]
//find()方法返回?cái)?shù)組中符合要求的第一個(gè)值
arr.find((value)=>{
    return value>3
})//4
//若沒(méi)有符合要求的值則返回undifined
arr.find((value)=>{
    return value>100
})//undifined

findIndex的用法和find一樣，但是返回值不同，find方法是返回符合條件的第一個(gè)值，若沒(méi)有符合要求的值則返回undifined。findIndex則是返回符合條件的第一個(gè)值在數(shù)組中的位置，若沒(méi)有符合要求的值則返回-1

arr.findIndex(value=>{
        return value>3
    })//3
arr.findIndex(value=>{
        return value>100
})//-1

數(shù)組對(duì)象的fill()方法

用于填充數(shù)組對(duì)象并返回新數(shù)組，會(huì)改變?cè)瓟?shù)組例子如下

let arr = Array(3)//長(zhǎng)度為3的數(shù)組 =>[undefined,undefined,undefined]
arr.fill(666)              //[666,666,666]
console.log(arr)           //[666,666,666]
let arr1 = [1,2,3,5,4]
arr1.fill(2333)//[2333, 2333, 2333, 2333, 2333]

迭代器遍歷對(duì)象entries() keys() values()

自己知道是怎么一回事但是不知道怎么解釋?zhuān)^續(xù)引用文檔中的解釋?zhuān)篍S6 提供三個(gè)新的方法——entries()，keys()和values()——用于遍歷數(shù)組。它們都返回一個(gè)遍歷器對(duì)象，可以用for...of循環(huán)進(jìn)行遍歷，唯一的區(qū)別是keys()是對(duì)鍵名的遍歷、values()是對(duì)鍵值的遍歷，entries()是對(duì)鍵值對(duì)的遍歷。

    let arr = [1,2,3,4,5,6,7,8,9]
    for (let index of arr.keys()) {
        //返回key值
        console.log(index); //0 1 2 3 4 5 6 7 8
    }
    for (let index of arr.values()){
        //返回value值
        console.log(index); //0 1 2 3 4 5 6 7 8
    }
    for (let index of arr.entries()){
        //返回鍵值對(duì)
        console.log(index) //[0,1],[1,2],[2,3]........
    }

也能配合數(shù)組對(duì)象的其他高階函數(shù)使用，比如我要?jiǎng)?chuàng)建一個(gè)包含過(guò)去7天Date的數(shù)組

let dateArr = [...Array(7).keys()].map(d=>new Date(Date.now()-d*1000*24*60))
    //[Tue May 28 2019 13:27:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間), Tue May 28 2019 13:03:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間), Tue May 28 2019 12:39:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間), Tue May 28 2019 12:15:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間), Tue May 28 2019 11:51:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間), Tue May 28 2019 11:27:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間), Tue May 28 2019 11:03:00 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)]

//或者說(shuō)生成一個(gè)0到9的數(shù)組
let numArr = [...Array(10).keys()].map(n=>n)
//[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

如果不適用Array.from()或者擴(kuò)展運(yùn)算符與高階函數(shù)配合或者不用for of 循環(huán)進(jìn)行配合則需要用到迭代器的next()方法進(jìn)行往下操作

    let arr = ["a","b","c","d","e"]
    let keysData = arr.keys()
    console.log(keysData.next().value)//0
    console.log(keysData.next().value)//1
    console.log(keysData.next().value)//2

    let valuesData = arr.values()
    console.log(valuesData.next().value)//a
    console.log(valuesData.next().value)//b
    console.log(valuesData.next().value)//c

    let entriesData = arr.entries()
    console.log(entriesData.next().value)//[0,"a"]
    console.log(entriesData.next().value)//[1,"b"]
    console.log(entriesData.next().value)//[2,"c"]

關(guān)于ES6迭代器其他操作可自己去理解

數(shù)組對(duì)象的 includes()方法

非常好用的一個(gè)方法，用于判斷數(shù)組中是否包含某個(gè)值若有則返回true，沒(méi)有則返回false

let arr = [1,2,3,4,5]
arr.includes(2)//true
arr.includes(6)//false

改方法可以傳入兩個(gè)參數(shù)，第一個(gè)是用于判斷是否存在的值，第二個(gè)是判斷開(kāi)始位置

let arr = [1,2,3,4,5]
arr.includes(2,3) //false
arr.includes(4,3) //true

數(shù)組對(duì)象的 flat() flatMap()方法

flat()方法將數(shù)組中的數(shù)組打散生成一個(gè)新的數(shù)組，不改變?cè)瓟?shù)組，不好理解是不是？！那還是看例子吧

let arr = [1,2,3,[4,5,6],7,[8,9]]
let newArr = arr.flat() //[1, 2, 3, 4, 5, 6, 7, 8, 9]

但是flat()方法只能打散一層數(shù)組，如果數(shù)組中嵌套的數(shù)組是多維數(shù)組則需要傳入?yún)?shù)（Number類(lèi)型），要打散幾維數(shù)組則傳幾默認(rèn)是1

let arr = [1,[2,[3,4,[5,6]]],7]
arr.flat(2) //[1,2,3,4,[5,6],7]
arr.flat(3) //[1,2,3,4,5,6,7]

如果不管數(shù)組中有幾維數(shù)組都要將數(shù)組打散成一維數(shù)組的話可以傳入關(guān)鍵字Infinity

let arr = [1,[2,[3,[4,[5,[6,[7,[8]]]]]]],9]
arr.flat(Infinity)//[1,2,3,4,5,6,7,8,9]

flatMap()方法與flat()類(lèi)似，都能打散數(shù)組，但是flatMap()只能打散一層并且flatMap()與map類(lèi)似可以傳入一個(gè)回調(diào)函數(shù)作為參數(shù)，并且返回一個(gè)新數(shù)組

let arr = [1,[2,[3,[4,[5,[6,[7,[8]]]]]]],9]
    let mapArr = arr.flatMap(i=>{
        return typeof(i)
    })//["number", "object", "number"]

flatMap()方法回調(diào)函數(shù)參數(shù)也與map()方法回調(diào)函數(shù)參數(shù)相同都可以傳入value（值，必填）,key(索引，選填)，arr（原數(shù)組，選填）

差不多就這點(diǎn)，主要是我寫(xiě)累了就不寫(xiě)了吧