語(yǔ)法:
Array.from(arrayLike, mapFn, thisArg)
相當(dāng)于
Array.from(arrayLike).map(mapFn, thisArg)
參數(shù):
arrayLike
:想要轉(zhuǎn)換成數(shù)組的偽數(shù)組對(duì)象或可迭代對(duì)象俩檬。
mapFn
(可選):如果指定了該參數(shù)庇忌,新數(shù)組中的每個(gè)元素會(huì)執(zhí)行該回調(diào)函數(shù)贤牛,就是在生成的數(shù)組上在執(zhí)行一次map
方法在返回徙歼。
thisArg
(可選):執(zhí)行回調(diào)函數(shù)mapFn時(shí)this對(duì)象
作用
將 類似數(shù)組的對(duì)象 和 可遍歷對(duì)象 轉(zhuǎn)換成真正的數(shù)組碎乃。
- 偽數(shù)組對(duì)象(擁有一個(gè)
length
屬性和若干索引屬性的任意對(duì)象) - 可迭代對(duì)象(可以獲取對(duì)象中的元素,如 Map和 Set 等)
舉例??
//字符串轉(zhuǎn)換
Array.from('foo');
// ["f", "o", "o"]
//將字符串轉(zhuǎn)為數(shù)組姊扔,然后返回字符串的長(zhǎng)度。
//因?yàn)樗苷_處理各種 Unicode 字符梅誓,可以避免 JavaScript 將大于\uFFFF的 Unicode 字符恰梢,算作兩個(gè)字符的 bug佛南。
Array.from('fafafa').length
6
//含有l(wèi)ength的類似數(shù)組對(duì)象轉(zhuǎn)換
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
//只含有l(wèi)ength的對(duì)象轉(zhuǎn)換
Array.from({ length: 3 });
// [ undefined, undefined, undefined ]
//set轉(zhuǎn)換
let s = new Set(['foo', 'aa']);
Array.from(s);
// ["foo", 'aa']
//map轉(zhuǎn)換
let m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m);
// [[1, 2], [2, 4], [4, 8]]
//arguments數(shù)組轉(zhuǎn)換
function f() {
return Array.from(arguments);
}
f(1, 2, 3);
// [1, 2, 3]
// 實(shí)際應(yīng)用中,常見(jiàn)的類似數(shù)組的對(duì)象是 DOM 操作返回的 NodeList 集合嵌言,轉(zhuǎn)換成數(shù)組
let ps = document.querySelectorAll('p');
let a = Array.from(ps);
使用mapFn參數(shù)
Array.from([1, 2, 3], x => x + x);
// [2, 4, 6]
Array.from({length: 5}, (v, i) => i);
// [0, 1, 2, 3, 4]
//取出一組 DOM 節(jié)點(diǎn)的文本內(nèi)容嗅回。
let ps = document.querySelectorAll('span');
let a = Array.from(ps,s => s.textContent);
//["11", "22", "33", "44", "55"]
function combine(){
let arr = [].concat.apply([], arguments); //[1, 2, 2, 2, 3, 3]沒(méi)有去重復(fù)的新數(shù)組
return Array.from(new Set(arr));//new Set(arr): Set(3) {1, 2, 3}
}
var m = [1, 2, 2], n = [2,3,3];
console.log(combine(m,n)); // [1, 2, 3]
使用thisArg綁定this
//這里this就指向了{(lán)a:1}
Array.from([1, 2, 3],function(x){return x + this.a},{a:1});
//[2, 3, 4]
ps:??由于thisArg這個(gè)參數(shù)我沒(méi)有什么應(yīng)用場(chǎng)景,沒(méi)什么使用的機(jī)會(huì)摧茴,所以找不到使用的意義和重要性绵载,如果有了解和使用的小伙伴期待多交流~