1. 程式人生 > >es6 -- 陣列的擴充套件

es6 -- 陣列的擴充套件

目錄

 

陣列建構函式的擴充套件

Array.from()

Array.of()

陣列原型的擴充套件

copyWithin()

find()

findIndex()

fill()

entries()、keys()、values()

includes()


陣列建構函式的擴充套件

Array.from()

該方法可以將類陣列物件與可遍歷(iterrable)物件轉換為陣列

類陣列物件:任何具有length屬性的物件。

可遍歷物件:任何部署了Iterrator介面的資料結構,例如: String、Array、set、map等

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

//轉換類陣列物件 dom中

var div=document.querySelectorAll('div');
Array.from(div);

//將陣列中為false的成員轉換為0
Array.from([1,,2,4,false,'',5],(n)=>n||0);

Array.of()

該方法用於將一組值轉換為陣列。該方法主要彌補了建構函式的不足。

// new Array
var arr=new Array(4);
arr.length //4

//es6 Array.of
var arr1=Array.of(4)
arr.length //1

**:Array.of總是返回引數值組成的陣列。如果沒有引數返回空陣列

陣列原型的擴充套件

copyWithin()

 該方法,在當前陣列內部將指定位置的成員複製到其他位置(會覆蓋原有成員),然後返回當前陣列。

引數:

   target(必須):從該位置開始替換資料

  start(可選) :從該位置開始讀取資料,預設從0。如果為負值,表示倒數。

  end(可選): 到該位置前停止讀取資料,預設等於陣列長度。如果為負值,表示倒數。

var arr=[1,2,3,4];
//從索引位置為 2開始複製知道陣列結束,複製到0號位置
arr.copyWithin(0,2);
console.log(arr); //[3,4,3,4];

find()

用於找出第一個符合條件的陣列成員。該方法的引數是一個回撥函式,知道找到第一個返回值為true的成員,然後返回該成員。

var res=[1,2,3,4].find(function(value,index,arr){
    return value>2;
}); //3

//es6簡寫
var res1=[1,2,3,4].find((item)=>item>2);

findIndex()

該方法用於返回第一個滿足條件的陣列成員的位置,如果都不符合則返回-1

var res=[1,2,3,4].findIndex(function(value,index,arr){
    return value>2;
}); //2

//es5中 indexOf採用 === NaN===NaN為false
[NaN].indexOf(NaN); //-1

[NaN].findIndex(value=>Object.is(NaN,value)); //0

fill()

該方法用於給定值填充陣列

new Array(3).fill(1); //[1,1,1]

entries()、keys()、values()

這三個方法用於遍歷陣列。它們都返回一個遍歷器物件。可以for...of迴圈遍歷。keys()是對鍵名的遍歷,values()是對鍵值的遍歷、entries()是對鍵值對的遍歷

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

for(let [index,item] of ['a',1,4].entries()){
    console.log(index,item); 
}
// 0 'a'
// 1 1
// 2 4

includes()

該方法用於判斷陣列中是否包含給定值。有則返回true,否則返回false

[1,2,3].includes(2); //true

//該方法的第二個引數 表示起始位置,預設是從0開始
//如果第二個引數為負數,則表示倒數位置,如果該值超出陣列位置則重置從0開始
[1,2,3].includes(2,1) //true
[1,2,3].includes(2,-1); //false
[1,2,3,4].includes(2,5); //false
[1,2,3,4].includes(2,-5); //true