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()
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方法篩選出符合條件的資料,返回一個新的陣列。