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

es6-陣列的擴充套件

陣列原型方法

Array.from() 可以將類似陣列的物件可遍歷物件轉為真正的陣列

類陣列物件須為鍵值為數值,否則陣列值為undefined、必須有length屬性,決定陣列的長度。 可遍歷物件必須有自己的Iterator物件,檢視Iterator部分,部署Iterator物件

1.類似陣列的物件(DOM操作返回的NodeList集合、函式的arguments物件)
let arr = {
	'0':'hello',
	'1':'world',
	'2':'!',
	length:3
}
Array.from(arr);             //['hello','world','!']
2.可遍歷的物件(Set、Map、字串...)
//Set、Map資料結構可直接作為引數傳入其建構函式中.
//可以處理各種Unicode字元,將字串轉為陣列在獲取長度
Array.from("大家好!").length;           //4
Array.from(" ").length        空格鍵        // 1
Array.from("	").length          tab鍵       //1

可接受第二個引數、對每個陣列進行處理後,值放入返回的陣列。

Array.from("123",(item)=>item*item);            //[1,4,9]

可接受第三個引數、用來繫結this

let i = 3;
let obj = {
	i:2
}
Array.from("123",(item)=>i*item);           // [3,6,9]
Array.from("123",function(item){
	this.i*item
},obj);             //[2,4,6]

使用this時注意不要使用箭頭函式。

Array.of()

將一組值轉換為陣列。彌補陣列建構函式Array()的不足。

1.Array()建構函式
Array()      //[]
Array(3)         //[,,,]
Array(1,2,3)     //[1,2,3]
2.
Array.of()      //[]
Array.of(3)        //[3]
Array.of(1,2,3)       //[1,2,3]

規範行為,使陣列表現行為一致

以上兩個方法都可使用Array.prototype.slice方法替代。

陣列例項的方法

Array.copyWithin() 將陣列內部指定的成員複製到其他位置,接受三個引數:

	target:從該位置開始替換資料
	start:從該位置開始取資料,預設為0
	end:到該位置停止度資料,預設等於陣列長度
[1,2,3].copyWithin(1);          //[1,1,2]
[1,2,3,4].copyWithin(2,1);          //[1,2,2,3]
[1,2,3,4,5,6].copyWithin(2,-2);          //[1,2,5,6,5,6] 
//start值與end值
[1,2,3,4,5,6].copyWithin(2,-2,0)           //[1,2,3,4,5,6]
[1,2,3,4,5,6].copyWithin(2,-2,1)         //[1,2,3,4,5,6]
[1,2,3,4,5,6].copyWithin(2,-2,-3)      // [1,2,3,4,5,6]
[1,2,3,4,5,6].copyWithin(2,-2,-1)        //[1,2,5,4,5,6]   
[1,2,3,4,5,6].copyWithin(2,-3,-1)     //[1,2,4,5,5,6] 

start 為負值時,end須為負值且大於start start和end顧頭不顧尾

find()、findIndex() 查詢符合條件的資料,接受一個回撥函式作為引數;find()查找出第一個符合的資料返回該資料,findIndex()查找出第一個符合的資料返回它的下標。否則返回-1

//回撥函式接收三個引數,當前的值、當前的位置、原陣列。
[1,2,3,4].find((item)=>item<3);        //1
[1,2,3,4].find((item,index,arr)=>{console.log(item,index)); return item>2} ; 
// 1 0      2 1         3  2         3
[1,2,3,4].findIndex(item=>item>2);            // 2
[1,NaN,3].indexOf(NaN);             //-1
[1,NaN,3].findIndex(item=>Object.is(NaN,item));       //1

接收第二個引數,繫結回撥函式中的this 藉助Object.is() 都可以發現NaN,

fill() 使用給定值填充陣列,接收三個引數,目標值、開始位置、結束位置

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

entries()/keys()/values() 遍歷陣列、使用for…of迴圈遍歷。keys()是鍵名,values()是鍵值,entries()是鍵值對。 includes() 是否包含給定的值,返回布林值。接收兩個引數,給定值、查詢起始位置。

[1,2,3].includes(2);            //true
[1,2,3].includes(5);            //false
//可以查找出NaN
[1,2,,NaN].includes(NaN);          //true

Map資料結構的has()方法用來查詢鍵名 Set資料結構的has()方法用來查詢值。

陣列的空位

1.空位沒有任何值,不是undefined。
new Array(3);               //[,,,]
1 in [undefined,undefined,undefined]          //true
1 in [,,,]                         //false
	2.ES5對空值的處理
 	 - forEach(),filter(),every(),some()會跳過空位
	 - map()會跳過空位,但會保留這個值,
	 - join()/toString() 會將空值視為undefined,而undefined和null會被處理為空字串。
	3.ES6會將空位轉為undefined
	 - Array.from()會將空位轉為undefined,
	 - 擴充套件運算子(...)會將空位轉為undefined,
	 - copyWithin()會連空位一起復制
	 - fill()會將空位視為正常的陣列
	 - for...of會遍歷空位
	 - entries()/keys()/values()/find()/findIndex()會將空位處理為undefined。

陣列推導 提供簡介寫法,使用現有的陣列生成新陣列。ES7 瀏覽器未支援

1、使用for...of迴圈處理
var arr1= [1,2,3];
var arr2 = [for(item in arr1) item*2];            //[2,4,6]
2、for...of後面可加if語句,設定限制條件。
var arr3 = [for(item in arr1) if(item>2) item*2];    //[6]
3.陣列推導可代替map()和filter()
4.可使用多重for...of迴圈處理多個數組

陣列推導的方括號構成內部的作用域,其中的變數宣告類似於let宣告。 字串類陣列,也可使用陣列推導。

陣列的方法 1、every、some、map、filter、forEach 都接收兩個引數,回撥函式(當前值、索引、原陣列)、回撥函式中this的繫結值

1.every檢測陣列中所有的值是否都符合條件,返回布林值。
[1,2,3].every(item=>item>0);              //true
[1,2,3].every(item=>item>2);                //false
2.some檢測陣列中值是否有符合條件的,返回布林值。
[1,2,3].some(item=>item>2);              //true 
3.map操作原陣列返回一個新的陣列。
4.forEach遍歷陣列,在回撥函式中進行操作。
5.filter方法篩選出符合條件的資料,返回一個新的陣列。