ES6數組的擴充
- 一、 擴充運算符
-
- 1、 含義
- 2、 替代函數的 apply 方法
- 二、數組執行個體的 copyWithin()
- 三、數組執行個體的 find() 和 findIndex()
- 四、 數組執行個體的 fill()
- 五、數組執行個體的 includes()
-
- 1、indexOf( )方法的缺點
- 六、 Array.from()
- 七、 Array.of()
一、 擴充運算符
1、 含義
擴充運算符(spread)是三個點(…)。它好比 rest 參數的逆運算,将一個數組轉為用逗号分隔的參數序列。
該運算符主要用于函數調用。
function add(x, y) {
return x + y;
}
const numbers = [4, 38];
add(...numbers) // 42
2、 替代函數的 apply 方法
由于擴充運算符可以展開數組,是以不再需要apply方法,将數組轉為函數的參數了。
// ES5 的寫法
function f(x, y, z) {
// ...
}
var args = [0, 1, 2];
f.apply(null, args);
// ES6的寫法
function f(x, y, z) {
// ...
}
let args = [0, 1, 2];
f(...args);
下面是擴充運算符取代apply方法的一個實際的例子,應用Math.max方法,簡化求出一個數組最大元素的寫法。
// ES5 的寫法
Math.max.apply(null, [14, 3, 77])
// ES6 的寫法
Math.max(...[14, 3, 77])
// 等同于
Math.max(14, 3, 77);
另一個例子是通過push函數,将一個數組添加到另一個數組的尾部。
// ES5的 寫法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);
// ES6 的寫法
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1.push(...arr2);
上面代碼的 ES5 寫法中,push方法的參數不能是數組,是以隻好通過apply方法變通使用push方法。有了擴充運算符,就可以直接将數組傳入push方法。
二、數組執行個體的 copyWithin()
數組執行個體的copyWithin()方法,在目前數組内部,将指定位置的成員複制到其他位置(會覆寫原有成員),然後傳回目前數組。也就是說,使用這個方法,會修改目前數組
它接受三個參數。
target(必需):從該位置開始替換資料。如果為負值,表示倒數。
start(可選):從該位置開始讀取資料,預設為 0。如果為負值,表示從末尾開始計算。
end(可選):到該位置前停止讀取資料,預設等于數組長度。如果為負值,表示從末尾開始計算。(標頭不包尾)
這三個參數都應該是數值,如果不是,會自動轉為數值。
[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]
上面代碼表示将從 3 号位直到數組結束的成員(4 和 5),
複制到從 0 号位開始的位置,結果覆寫了原來的 1 和 2。
// 将3号位複制 到 0号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]
// -2相當于3号位,-1相當于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]
// 将3号位複制 到 0号位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5}
三、數組執行個體的 find() 和 findIndex()
數組執行個體的find方法,用于找出第一個符合條件的數組成員。它的參數是一個回調函數,所有數組成員依次執行該回調函數,直到找出第一個傳回值為true的成員,然後傳回該成員。如果沒有符合條件的成員,則傳回undefined。
[1, 4, -5, 10].find(n => n < 0)
// -5
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
上面代碼中,find方法的回調函數可以接受三個參數,依次為目前的值、目前的位置和原數組。
數組執行個體的findIndex方法的用法與find方法非常類似,傳回第一個符合條件的數組成員的位置,如果所有成員都不符合條件,則傳回-1。
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2
這兩個方法都可以接受第二個參數,用來綁定回調函數的this對象。
function f(v){
return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person); // 26
上面的代碼中,find函數接收了第二個參數person對象,回調函數中的this對象指向person對象。
四、 數組執行個體的 fill()
fill方法使用給定值,填充一個數組。
['a', 'b', 'c'].fill(7)
// [7, 7, 7]
new Array(3).fill(7)
// [7, 7, 7]
上面代碼表明,fill方法用于空數組的初始化非常友善。數組中已有的元素,會被全部抹去。
fill方法還可以接受第二個和第三個參數,用于指定填充的起始位置和結束位置。
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']
上面代碼表示,fill方法從 1 号位開始,向原數組填充 7,到 2 号位之前結束。
注意,如果填充的類型為對象,那麼被指派的是同一個記憶體位址的對象,而不是深拷貝對象。
let arr = new Array(3).fill({name: "Mike"});
arr[0].name = "Ben";
arr
// [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]
let arr = new Array(3).fill([]);
arr[0].push(5);
arr
// [[5], [5], [5]]
五、數組執行個體的 includes()
Array.prototype.includes方法傳回一個布爾值,表示某個數組是否包含給定的值,與字元串的includes方法類似
[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false
[1, 2, NaN].includes(NaN) // true
該方法的第二個參數表示搜尋的起始位置,預設為0。如果第二個參數為負數,則表示倒數的位置,如果這時它大于數組長度(比如第二個參數為-4,但數組長度為3),則會重置為從0開始。
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
1、indexOf( )方法的缺點
indexOf方法有兩個缺點,一是不夠語義化,它的含義是找到參數值的第一個出現位置,是以要去比較是否不等于-1,表達起來不夠直覺。二是,它内部使用嚴格相等運算符(===)進行判斷,這會導緻對NaN的誤判。
[NaN].indexOf(NaN)
// -1
includes使用的是不一樣的判斷算法,就沒有這個問題。
[NaN].includes(NaN)
// true
六、 Array.from()
Array.from方法用于将兩類對象轉為真正的數組
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5的寫法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的寫法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
七、 Array.of()
Array.of方法用于将一組值,轉換為數組。
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
這個方法的主要目的,是彌補數組構造函數Array()的不足。因為參數個數的不同,會導緻Array()的行為有差異。
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
上面代碼中,Array方法沒有參數、一個參數、三個參數時,傳回結果都不一樣。隻有當參數個數不少于 2 個時,Array()才會傳回由參數組成的新數組。參數個數隻有一個時,實際上是指定數組的長度。
Array.of基本上可以用來替代Array()或new Array(),并且不存在由于參數不同而導緻的重載。它的行為非常統一。
Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]
Array.of總是傳回參數值組成的數組。如果沒有參數,就傳回一個空數組。
Array.of方法可以用下面的代碼模拟實作。
function ArrayOf(){
return [].slice.call(arguments);
}