目錄：

1.擴展運算符

在ES6中新增加了一個...運算符，叫做擴展運算符，在我的ES6+中函數的擴展大總結 說了ES6中函數的參數有了一個rest參數，也是...的操作符，它可以讓函數調用時傳遞的參數保存到一個數組中。如下

function add(...values){
   let sum = 0;
   values.forEach(value=>{
    sum + = value; 
 ])
  return sum
}
let sum = add（1,2,3,4,5,6,7）

除了本文內容。接下來我還會在我的裙里用視頻講解的方式給大家拓展下圖中的內容：有興趣的可以來小編的扣扣裙 519293536  免費交流學習，我都會儘力幫大家哦，

 接下來繼續本文內容：

而在數組中的這個擴展運算符如同rest參數的逆運算，可以將一個數組轉為用逗號分隔的參數序列。

console.log(...[1,2,3,4,5,6,7]);
//1,2,3,4,5,6,7

[...document.querySelectorAll('div')]
//<div> <div> <div>
複製代碼

兩個運算符（rest參數和...運算符）配合起來會非常的方便

function  push(array, ...items){
   array.push(...items)
}
複製代碼

由於有了擴展運算符，所以不需要使用apply將數組轉化為函數的參數

//ES5
function f(x,y,z){
    //...
}
f.apply(null,[1,2,3])

//ES6
function f(x,y,z){
}
f(...[1,2,3])
複製代碼

應用：

1.合併數組

//在ES5中合併數組使用的時Array.concat()API，在ES6中就可以使用擴展運算符
let array = [1,2,3,4,5,...[6,7,8,9]]
let array= [...[1,2,3,4],...[5,6,7],...[8,9,0]]
複製代碼

2.與 解構賦值 配合使用

let a ,array
[a,...array] = [1,2,3,4,5,6,7,8]

a//1
array//[2,3,4,5,6,7,8]
複製代碼

上面的代碼中將等號右邊的數組中的第一個元素通過解構賦值傳遞給a，後面的傳遞給數組array,這裡需要註意的是：如果將擴展運算符用於數組賦值，則只能將其放在參數的最後一位，否則將會報錯。

const [...butlast,last] = [1,2,3,4,5,6]

//報錯！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
複製代碼

3.函數的參數

上面已經舉過例子了，這裡。。。。。。。

4.字元串

擴展運算符可以將字元串轉為真正的數組

5.將DOM節點的對象轉換為數組

請看如下代碼：

let nodeList = document.querySelectorAll("div");
let array = [...nodeList]
複製代碼

其中nodeList是一個對象（類似數組的對象，但是還是對象），而不是一個數組，但是使用擴展運算符可以將該對象轉換為真正的數組，這是因為擴展運算符內部調用的是數據結構的Iterator介面，因此只要具有Iterato介面的對象都可以使用擴展符，上面代碼中的nodeList具有Iterator介面，所以可以使用。

2.Array.from()

Array.form方法用於將兩類對象轉化為真正的數組：類似數組的對象和可遍歷的對象（ES6新增的Map和Set）。

下麵的代碼是類似數組的對象，Array.from將它轉化為真正的數組。

let arrayLike = {
   "0":"a",
   "1":"b",
   "2":"c"
    length:3
}
let array = Arrat.from(arrayLike);//["a","b","c"]
複製代碼

在實際應用中，常見的類似數組的對象是DOM操作返回的NodeList集合，以及函數內部的arguments對象，Array.from都可以將他們轉化為數組。

同樣只有部署了Iterator介面的數據結構才可以被Array.from轉化，如果轉化的對象是數組則會返回一個一模一樣的數組。

Array.from('hello');//['h','e','l','l','o']


let namesSet = new Set(['a','b']);
Array.from(namesSet)//['a','b']
複製代碼

上面我們說過，只有具有Iterator介面的數據結構才可以使用擴展運算符，而類似數組的對象，所謂類似數組的對象實際上就是具有length的屬性的對象，而有的情況下具有length的對象Array.from無法正確的轉化，請看下麵這種情況。

Array.from({length: 3})
//[undefined,undefined,undefined]
複製代碼

對於沒有部署該方法的瀏覽器可以使用Array.prototype.slice 方法代替。

Array.from還可以接受第二個參數，作用類似於數組的map方法，用來對每個元素進行處理，將處理後的值放入返回的數組。

Array.from(arrayLike,x => x*x);
//等同於
Array.from(arrayLike).map(x => x*x);

Array.from([1,2,3],(x) => x*x)
//[1,4,9] 
複製代碼

如果第二個參數（類似map的參數）用到了this，那麼參數還可以傳遞第三個值，用來綁定this。

3.Array.of()

Array.of()方法用於將一組值轉換為數組。

let array = Array.of(1,2,3,4,5);
array //[1,2,3,4,5]
複製代碼

代碼看起來是不是似曾相識？？？是不是像let array = Array(1,2,3,4,5)其實這個方法是對Array（）的彌補，因為Array（）的參數個數不同會返回不同的結果，會有一些差異。

Array()//[]
Array(3)//[ , , ]
Array(1,2,3)//[1,2,3]
複製代碼

上面的代碼中參數的個數分別為0個，1個，多個時所返回的結果會有不同，而Array.of就不會因為參數的個數不同而導致重載，他的行為非常統一。

Array.of()//[]
Array.of(2)//[2]
Array.of(1,2)//[1,2]
Array.of(undefined)//[undefined]
複製代碼

4. 數組實例的copyWithin()

數組實例的copyWithin方法會在當前內部指定位置的成員複製到其他位置（會覆蓋原有成員），然後返回當前數組，也就是說使用這個方法會改變當前數組。

Array.prototype.copyWithin(target,start = 0,end = this.length)

它接受三個參數：
1.（必選） target: 從該位置開始複製
2. （可選）start ：從該位置開始讀取數據，預設為0，如果為負值則表示倒數
3.（可選）end：到該位置停止讀取數據，預設為數組的長度，如果為負值則表示倒數

這三個位置應該都是數子,表示對應的下標，如果不是則會自動轉為數值。

5.數組實例的find()和findIndex()

數組實例的find()和findIndex()方法都是用於找出數組中第一個符合條件的數組成員，它的參數是一個回調函數，所有數組成員一次執行該回調函數，直到找出第一個返回值為true的成員，他們的區別就是find()會返回值，而findindex()會返回下標。他們都可以接受三個參數，依次是：當前值，當前的位置和原數組。

[1,2,3,4,5,6].find((n)=>n > 5) //6(值)
[1,2,3,4,5,6].findIndex((n)=>n > 5) //5（下標）
複製代碼

需要註意的是這兩個方法里的參數是回調函數，可以在回調函數裡面使用 Object.is()來區分NaN，彌補了indexOf的不足

6.數組實例的fill()

fill方法使用給定值填充一個數組

['a','b','c'].fill(7)
//[7,7,7]
new Array(3).fill(7);
//[7,7,7]
複製代碼

從上面代碼可以看出，fill方法用於空數組的初始化時非常方便，數組中已有的元素會被覆蓋，當然也可以傳遞第二個和第三個參數來表示開始和結束填充的位置

['a','b','c'].fill(7,1,2)
複製代碼

7.數組實例的entries(),keys(),values()

ES6提供了這三個新的方法用於遍曆數組，他們都返回一個遍歷器對象，可以使用for ... of ...迴圈遍歷，他們的區別在於：keys()是對鍵名的遍歷，values是對鍵值對的遍歷，entries是對鍵值對的遍歷。

 for(let index of ['a','b'].keys()){console.log(index)}//0 1

 for(let value of ['a','b'].keys()){console.logvalue)}//a  b

 for(let [index,value] of ['a','b'].keys()){console.log(index,value)}//0  'a'   1  'b'
複製代碼

需要註意的是第三行代碼的[index,value]中的是數組

8.數組實例的includes()

Array.prototype.includes方法返回一個布爾值，表示數組是否包含給定的值，與字元串的includes類似。

[1,2,3].includes(2) //true 
複製代碼

該方法還可以傳遞第二個參數表示開始搜索的位置，如果該參數大於數組的長度則會被重置為0，如果為負數則表示倒數。

[1,2,3].includes(2,2) //false
複製代碼

這個方法與indexOf類似，需要區別的是indexOf不夠語義化，無法指定開始搜索的位置，而且indexOf中使用===來進行判斷,會導致NaN誤判，includes使用的是不一樣的演算法，就沒有這個問題。

9.數組的空位

數組的空位表示在聲明一個數組的時候只定義了數組的大小並未賦值時的空位

new Array(3);
//[  ,   ,  ]
複製代碼

空位不是undefined，一個位置的值等於undefined依然是有值的，空位是沒有任何值得,可以使用in操作符證明

在ES5中對空位的處理很不一致，大多數情況下會忽略（forEach(),filter(),every(),some()會跳過空位，map()會跳過空位，但會保留這個值，join(),toString()會將空位視為undefined，而undefined和null會被處理成空字元串）。ES6則明確的將空位轉為undefined。（Array.from,擴展運算符會視為undefined,copyWithin會將空位一起複制，fill將空位視為正常的數組位置。。。。。）

總之：由於空位的處理非常不統一，所以要避免出現空位 !!!!!

好了，除了以上內容。接下來我還會在我的裙里用視頻講解的方式給大家拓展下圖中的內容：有興趣的可以來我的扣扣裙 519293536  免費交流學習，我都會儘力幫大家哦，

以上內容我會不定期在群里視頻講解。想學習的可以來小編的扣扣裙 519293536 免費交流學習
本文的文字及圖片來源於網路加上自己的想法,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理