最新ES6+中數組的拓展總結,面試必備

目錄:

1.擴展運算符
2.Array.form()
3.Array.of()
4.數組實例的copyWithin()
5.數組實例的find()和findIndex()
6.數組實例的fill()
7.數組實例的entries(),keys(),vlaues()
8.數組實例的includes()
9.數組的空位

1.擴展運算符

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

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

除了本文內容。接下來我還會在個人裙裏用視頻講解的方式給你們拓展下圖中的內容:有興趣的能夠來小編的扣扣裙 519293536  免費交流學習,我都會盡力幫你們哦,java

 接下來繼續本文內容:node

而在數組中的這個擴展運算符如同rest參數的逆運算,能夠將一個數組轉爲用逗號分隔的參數序列。web

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,這裏須要注意的是:若是將擴展運算符用於數組賦值,則只能將其放在參數的最後一位,不然將會報錯。app

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 免費交流學習本文的文字及圖片來源於網絡加上本身的想法,僅供學習、交流使用,不具備任何商業用途,版權歸原做者全部,若有問題請及時聯繫咱們以做處理

相關文章
相關標籤/搜索