如果將擴展運算符用于數(shù)組賦值男图,只能放在參數(shù)的最后一位锰霜,否則會報錯筹误。
const [...butLast, last] = [1, 2, 3, 4, 5];
// 報錯
const [first, ...middle, last] = [1, 2, 3, 4, 5];
// 報錯
擴展運算符還可以將字符串轉(zhuǎn)為真正的數(shù)組。
[...'hello']
// [ "h", "e", "l", "l", "o" ]
上面的寫法癣缅,有一個重要的好處厨剪,那就是能夠正確識別四個字節(jié)的 Unicode 字符。
'x\uD83D\uDE80y'.length // 4
[...'x\uD83D\uDE80y'].length // 3
實現(xiàn)了 Iterator 接口的對象
任何 Iterator 接口的對象友存,都可以用擴展運算符轉(zhuǎn)為真正的數(shù)組祷膳。
let nodeList = document.querySelectorAll('div');
let array = [...nodeList];
上面代碼中,querySelectorAll方法返回的是一個nodeList對象屡立。它不是數(shù)組直晨,而是一個類似數(shù)組的對象。這時膨俐,擴展運算符可以將其轉(zhuǎn)為真正的數(shù)組勇皇,原因就在于NodeList對象實現(xiàn)了 Iterator 。對于那些沒有部署 Iterator 接口的類似數(shù)組的對象吟策,擴展運算符就無法將其轉(zhuǎn)為真正的數(shù)組儒士。
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// TypeError: Cannot spread non-iterable object.
let arr = [...arrayLike];
上面代碼中的止,arrayLike是一個類似數(shù)組的對象檩坚,但是沒有部署 Iterator 接口,擴展運算符就會報錯诅福。這時匾委,可以改為使用Array.from方法將arrayLike轉(zhuǎn)為真正的數(shù)組。
Array.from()
Array.from方法用于將兩類對象轉(zhuǎn)為真正的數(shù)組:類似數(shù)組的對象(array-like object)和可遍歷(iterable)的對象(包括ES6新增的數(shù)據(jù)結(jié)構(gòu)Set和Map)氓润。
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']
擴展運算符背后調(diào)用的是遍歷器接口(Symbol.iterator)赂乐,如果一個對象沒有部署這個接口,就無法轉(zhuǎn)換咖气。Array.from方法還支持類似數(shù)組的對象挨措。所謂類似數(shù)組的對象,本質(zhì)特征只有一點崩溪,即必須有l(wèi)ength屬性浅役。因此,任何有l(wèi)ength屬性的對象伶唯,都可以通過Array.from方法轉(zhuǎn)為數(shù)組觉既,而此時擴展運算符就無法轉(zhuǎn)換。
Array.from({ length: 3 });
// [ undefined, undefined, undefined ]
對于還沒有部署該方法的瀏覽器,可以用Array.prototype.slice方法替代瞪讼。
const toArray = (() =>
Array.from ? Array.from : obj => [].slice.call(obj)
)();
Array.from還可以接受第二個參數(shù)钧椰,作用類似于數(shù)組的map方法,用來對每個元素進行處理符欠,將處理后的值放入返回的數(shù)組嫡霞。
Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);
Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]
Array.of()
Array.of方法用于將一組值,轉(zhuǎn)換為數(shù)組希柿。
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
這個方法的主要目的秒际,是彌補數(shù)組構(gòu)造函數(shù)Array()的不足。因為參數(shù)個數(shù)的不同狡汉,會導(dǎo)致Array()的行為有差異娄徊。
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
上面代碼中,Array方法沒有參數(shù)盾戴、一個參數(shù)寄锐、三個參數(shù)時,返回結(jié)果都不一樣尖啡。只有當(dāng)參數(shù)個數(shù)不少于2個時橄仆,Array()才會返回由參數(shù)組成的新數(shù)組。參數(shù)個數(shù)只有一個時衅斩,實際上是指定數(shù)組的長度盆顾。
Array.of基本上可以用來替代Array()或new Array(),并且不存在由于參數(shù)不同而導(dǎo)致的重載畏梆。它的行為非常統(tǒng)一您宪。
copyWithin()
數(shù)組實例的copyWithin方法,在當(dāng)前數(shù)組內(nèi)部奠涌,將指定位置的成員復(fù)制到其他位置(會覆蓋原有成員)宪巨,然后返回當(dāng)前數(shù)組。也就是說溜畅,使用這個方法捏卓,會修改當(dāng)前數(shù)組。
Array.prototype.copyWithin(target, start = 0, end = this.length)
它接受三個參數(shù)慈格。
target(必需):從該位置開始替換數(shù)據(jù)怠晴。
start(可選):從該位置開始讀取數(shù)據(jù),默認為0浴捆。如果為負值蒜田,表示倒數(shù)。
end(可選):到該位置前停止讀取數(shù)據(jù)汤功,默認等于數(shù)組長度物邑。如果為負值,表示倒數(shù)。
[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]
// 將3號位復(fù)制到0號位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]
// -2相當(dāng)于3號位色解,-1相當(dāng)于4號位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]
// 將3號位復(fù)制到0號位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5}
// 將2號位到數(shù)組結(jié)束茂嗓,復(fù)制到0號位
let i32a = new Int32Array([1, 2, 3, 4, 5]);
i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]
// 對于沒有部署 TypedArray 的 copyWithin 方法的平臺
// 需要采用下面的寫法
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]