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

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

擴展運算符

Array.from()

Array.of()

copyWithin()

find() findIndex()

fill()

entries() keys() values()

includes()

flat() flatMap()

擴展運算符
在ES5中我們要將兩個打散數(shù)組合并會用到數(shù)組對象的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方法最終會返回一個拼接完的數(shù)組，也就是我們所需的結(jié)果
如果用擴展運算符又是如何操作呢？

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ù)組，擴展運算符也可以打散字符串

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

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

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

當(dāng)然也可以和Aray.from()一樣，將一個類數(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]

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

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

將類數(shù)組對象和迭代器對象轉(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ù)類型中不會存在相同的元素，因此把數(shù)組轉(zhuǎn)換成set會將數(shù)組中重復(fù)的部分去除
let newArr = Array.from(set)  //將set數(shù)據(jù)類型轉(zhuǎn)換成數(shù)組
console.log(newArr) //[1, 2, 3, 444, 4, 5, "a", "b", "f"]

當(dāng)然它也能像擴展運算符一樣，將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"]

這里要了解一個概念什么是類數(shù)組對象一般來說，類數(shù)組對象和數(shù)組沒多大區(qū)別在操作上也是

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

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

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

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

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

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ù)類型可以被Array.from()轉(zhuǎn)換但是轉(zhuǎn)換成的是一個數(shù)組是一個[["鍵"，"值"]，["鍵"，"值"]，["鍵"，"值"]]數(shù)組，一般也不會這么用我私下再去研究

Array.of()

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

這個方法的主要目的，是彌補數(shù)組構(gòu)造函數(shù)Array()的不足。因為參數(shù)個數(shù)的不同，會導(dǎo)致Array()的行為有差異。

舉個例子

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

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

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

Array.of()//[]

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

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

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

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

end（可選）：到該位置前停止讀取數(shù)據(jù)，默認等于數(shù)組長度。如果為負值，表示倒數(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]

文檔中有更詳細的例子以下抄文檔

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

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

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

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

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

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

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

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ù)組中符合要求的值拼接成一個新數(shù)組并返回
arr.filter(value=>{
    return value>3
})//[4, 5, 6, 7, 8, 9]
//find()方法返回數(shù)組中符合要求的第一個值
arr.find((value)=>{
    return value>3
})//4
//若沒有符合要求的值則返回undifined
arr.find((value)=>{
    return value>100
})//undifined

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

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

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

用于填充數(shù)組對象并返回新數(shù)組，會改變原數(shù)組例子如下

let arr = Array(3)//長度為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]

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

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

    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()){
        //返回鍵值對
        console.log(index) //[0,1],[1,2],[2,3]........
    }

也能配合數(shù)組對象的其他高階函數(shù)使用，比如我要創(chuàng)建一個包含過去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 (中國標(biāo)準(zhǔn)時間), Tue May 28 2019 13:03:00 GMT+0800 (中國標(biāo)準(zhǔn)時間), Tue May 28 2019 12:39:00 GMT+0800 (中國標(biāo)準(zhǔn)時間), Tue May 28 2019 12:15:00 GMT+0800 (中國標(biāo)準(zhǔn)時間), Tue May 28 2019 11:51:00 GMT+0800 (中國標(biāo)準(zhǔn)時間), Tue May 28 2019 11:27:00 GMT+0800 (中國標(biāo)準(zhǔn)時間), Tue May 28 2019 11:03:00 GMT+0800 (中國標(biāo)準(zhǔn)時間)]

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

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

    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ù)組對象的 includes()方法

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

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

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

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

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

flat()方法將數(shù)組中的數(shù)組打散生成一個新的數(shù)組，不改變原數(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類型），要打散幾維數(shù)組則傳幾默認是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()類似，都能打散數(shù)組，但是flatMap()只能打散一層并且flatMap()與map類似可以傳入一個回調(diào)函數(shù)作為參數(shù)，并且返回一個新數(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ù)組，選填）

差不多就這點，主要是我寫累了就不寫了吧