目錄：

1.擴展運算子

在ES6中新增加了一個...運算子，叫做擴展運算子，在我的ES6+中函式的擴展大總結 說了ES6中函式的引數有了一個rest引數，也是...的運算子，它可以讓函式呼叫時傳遞的引數保存到一個陣列中，如下

function add(...values){
   let sum = 0;
   values.forEach(value=https://www.cnblogs.com/chengxuyuanaa/p/>{
    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 免費交流學習
本文的文字及圖片來源于網路加上自己的想法,僅供學習、交流使用,不具有任何商業用途,著作權歸原作者所有,如有問題請及時聯系我們以作處理

標籤：JavaScript

上一篇：JavaScript連載17-變數提升、物件的分類

下一篇：ES6核心問題是什么？本文詳解