ES6之陣列的擴充套件

wade3po發表於2019-03-22

ES6在陣列方面增加了一些方法和原型屬性,有些還是蠻有用的。

擴充套件運算子:把陣列或者類陣列轉成用逗號隔開的引數: 把類陣列轉成陣列,有限制(類陣列就是有長度的變數):

var str = 'wade';
console.log([...str]);//["w", "a", "d", "e"]
把陣列轉成用逗號隔開的引數序列:
var arr = [1, 2, 3];
console.log(...arr); //1 2 3
console.log(1, 2, 3); //1 2 3
複製程式碼

擴充套件運算子使用場景很多: 替代apply傳參:

Math.max.apply(null, [1, 2, 3])
Math.max(...[1, 2, 3])
複製程式碼

Push函式:

var arr = [1, 2, 3];
arr.push(5, 6, 7);
arr.push(...[5, 6, 7]);
複製程式碼

大部分都是陣列的使用,合併陣列、複製陣列、與結構結合、函式傳參等等。

Array.from:將類陣列轉換成陣列,無限制

console.log(Array.from('wade')); //["w", "a", "d", "e"]
console.log(Array.from( {'0': 'a', '1': 'b', '2': 'c', length: 3})); //["a", "b", "c"]
console.log(Array.from([1, 2, 3])); //[1, 2, 3]
console.log(Array.from({ length: 3 })); //[undefined, undefined, undefined]
複製程式碼

Array.from還接受第二個函式引數,對每個元素進行處理返回:

console.log(Array.from('5678', (x) => {
    return x*2
})) //[10, 12, 14, 16]
複製程式碼

Array.from第三個引數是this,用以this的指向。

Array.of:將值轉成陣列 這個函式其實就是解決了Array的行為差異:

console.log(Array (3)) //[ , , ,}
console.log(Array.of (3)) //[3]
複製程式碼

copyWithin方法:改變原陣列,接收三個引數,在當前陣列內部,將指定位置的成員複製到其他位置(陣列函式引數的下標都是包前不包後)

arr.copyWithin(target, start, end)
target(必需):從該位置開始替換資料。如果為負值,表示倒數。
start(可選):從該位置開始讀取資料,預設為 0。如果為負值,表示倒數。
end(可選):到該位置前停止讀取資料,預設等於陣列長度。如果為負值,表示倒數。
var arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3)
console.log(arr);// [4, 5, 3, 4, 5]
複製程式碼

find() 和 findIndex():不改變原陣列,接收一個函式引數和一個this物件 Find返回第一個符合條件的元素,否則undefined,findIndex返回第一個元素的下標,否則-1

var arr = [1, 0, 9, -5, 12]
var resFind = arr.find((value, index, arr) => {
    return value > 9;
}, this);
var resFindIndex = arr.findIndex((value, index, arr) => {
    return value > 9;
}, this);
console.log(resFind); //12
console.log(resFindIndex); //4
複製程式碼

Fill:填充陣列,改變原陣列,接收三個引數,第一個是替換元素,第二個是起始位置,第三個是結束位置。

var arr = [1, 0, 9, -5, 12]
arr.fill('a', 1, 3);
console.log(arr); //[1, "a", "a", -5, 12]
複製程式碼

entries(),keys() 和 values():返回遍歷器物件Interator,配合for of迴圈,keys是對鍵名的遍歷、values是對鍵值的遍歷、entries是對鍵名和鍵值的遍歷

var arr = [1, 2, 3]
for(var val of arr.keys()){
    console.log(val);
}//0 1 2
for(var val of arr.values()){
    console.log(val);
}// 1 2 3
for(var val of arr.entries()){
    console.log(val);
}//[0, 1] [1, 2] [2, 3]
複製程式碼

includes():返回一個布林值,表示是否包含某個元素,接收兩個個引數,第一個是要查詢的元素,第二個是起始位置 var arr = [1, 2, 3, 4, 5] console.log(arr.includes(4, 2)); //true

flat(),flatMap():返回新陣列,不改變原陣列。拉平陣列,就是把二維、三維陣列變成一維陣列 flat接收一個引數,拉平幾維陣列,會跳過空位:

console.log([1, 2, [3, [4, 5]]].flat())// [1, 2, 3, [4, 5]]
console.log([1, 2, [3, [4, 5]]].flat(2));// [1, 2, 3, 4, 5]
flatMap跟map函式一樣,需要return
console.log([1, 2, 3].flatMap((val, index, arr) => {
    return val * 2;
}));// [2, 4, 6]
複製程式碼

陣列空位:陣列的空位指,陣列的某一個位置沒有任何值,比如[,,,]空位不是undefined,一個位置的值等於undefined,依然是有值的。空位是沒有任何值。 ES5 對空位的處理很不一致,大多數情況下會忽略空位。ES6則不跳過空位,轉為undefined

console.log(Array.from([1, , 2]));//[1, undefined, 2]
複製程式碼

forEach(),filter(),reduce(),every()和some()都會跳過空位。 map()會跳過空位,但會保留這個值 join()和toString()會將空位視為undefined,而undefined和null會被處理成空字串。

Array.from()、擴充套件運算子...、entries()、keys()、values()、find()和findIndex()會將空位處理成undefined。 For of也會迴圈遍歷空位,CopyWithin()會連空位一起拷貝,fill也會把空位視為正常位置

陣列的組合使用其實很好用,只是平時很少去考慮使用這些提供的方法,要是能把陣列的使用都記清楚,對平時開發有很大的便利。

Coding 個人筆記

ES6之陣列的擴充套件

相關文章