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

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

擴展運算符

Array.from()

Array.of()

copyWithin()

find() findIndex()

fill()

entries() keys() values()

includes()

flat() flatMap()

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

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"]

不僅可以打散數組，擴展運算符也可以打散字符串

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

當然也能運用于數組的解構賦值

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

當然也可以和Aray.from()一樣，將一個類數組轉換成數組

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

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

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)

當然也可以這樣子做

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

Array.from()

將類數組對象和迭代器對象轉換成數組最常用的應該就是數組去重操作了

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

當然它也能像擴展運算符一樣，將String字符串轉換成數組

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

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

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

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

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

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

我特地試了一下map數據類型

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

發現map數據類型可以被Array.from()轉換但是轉換成的是一個數組是一個[["鍵"，"值"]，["鍵"，"值"]，["鍵"，"值"]]數組，一般也不會這么用我私下再去研究

Array.of()

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

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

舉個例子

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

從打印結果可知Array構造方法傳入參數數量不同，返回的結果并不統一，而Array.of()卻是出奇的統一，這彌補了Array構造方法的不足

在不傳入參數時Array.of()會返回一個空數組

Array.of()//[]

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

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

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

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

end（可選）：到該位置前停止讀取數據，默認等于數組長度。如果為負值，表示倒數

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號位復制到0號位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

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

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

// 將2號位到數組結束，復制到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]

數組對象 find() findIndex()

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

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

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

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

數組對象的fill()方法

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

let arr = Array(3)//長度為3的數組 =>[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()

自己知道是怎么一回事但是不知道怎么解釋，繼續引用文檔中的解釋：ES6 提供三個新的方法——entries()，keys()和values()——用于遍歷數組。它們都返回一個遍歷器對象，可以用for...of循環進行遍歷，唯一的區別是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]........
    }

也能配合數組對象的其他高階函數使用，比如我要創建一個包含過去7天Date的數組

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

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

如果不適用Array.from()或者擴展運算符與高階函數配合或者不用for of 循環進行配合則需要用到迭代器的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"]

關于ES6迭代器其他操作可自己去理解

數組對象的 includes()方法

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

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

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

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

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

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

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()方法只能打散一層數組，如果數組中嵌套的數組是多維數組則需要傳入參數（Number類型），要打散幾維數組則傳幾默認是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]

如果不管數組中有幾維數組都要將數組打散成一維數組的話可以傳入關鍵字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()類似，都能打散數組，但是flatMap()只能打散一層并且flatMap()與map類似可以傳入一個回調函數作為參數，并且返回一個新數組

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

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

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