Array.from() 方法从一个类数组或可迭代对象,创建一个新的数组实例.
在 ES6里, 类的语法允许你从内置的类和自定义的类创建子类,因此,像 Array.from 这样类的静态方法也被 Array 的子类所继承了,它创建的是子类的实例,而不是 Array 的实例.
语法
Array.from(arrayLike[, mapFn[, thisArg]])
参数
arrayLike
一个类数组或可迭代对象,用于被转换成数组.
mapFn
可选的.数组里每个元素都要经过这个函数的执行.
thisArg
可选的.当执行 mapFn 的时候,函数的this指针指向这个参数
描述
Array.from() 允许你通过以下对象创建数组对象:
Array.from() 有一个可选的参数 mapFn ,可以对创建的数组的每个元素迭代执行 map 函数.说的更清楚点,Array.from(obj,mapFn,thisArg) 和 Array.from(obj).map(mapFn,thisArg) 效果是一样的,只是它不产生中间数组.这对某些数组子类是很有用的,比如 typed arrays,因为对于他们,中间数组的值不得不被删减以适应对应的类型.
from()方法的length属性值是 1.
栗子
// 类数组对象 (arguments) 转数组
function f() {
return Array.from(arguments);
}
f(1, 2, 3);
// [1, 2, 3]
// 可迭代对象...
// Set
var s = new Set(["foo", window]);
Array.from(s);
// ["foo", window]
// Map
var m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m);
// [[1, 2], [2, 4], [4, 8]]
// 字符串
Array.from("foo");
// ["f", "o", "o"]
// 查看下面的pollify,可以看到,有一句是 Object(arrayLike),既把参数转换为对象.字符串`'foo'`通过`Object('foo')`以后,变成了这样的对象:
// String {0: "f", 1: "o", 2: "o", length: 3, [[PrimitiveValue]]: "foo"}
// 使用一个箭头函数作为map函数来操作元素.
Array.from([1, 2, 3], x => x + x);
// [2, 4, 6]
// 生成数字序列
Array.from({length: 5}, (v, k) => k);
// [0, 1, 2, 3, 4]
Polyfill
Array.from 方法被添加在第六版的 ECMA-262 标准中; 因此,在其他版本的标准中可能不能使用.你可以在你脚本的开头插入下面这段代码来使用它.这个算法事实上也是在ECMA-262第六版里指定的算法. 假设 Object 和 TypeError 是已经存在的方法. callback.call 相当于 Function.prototype.call. 另外,由于真正的迭代器不能被polyfilled,所以这个执行环境不支持 ECMA-262第六版所定义的 generic iterable
// Production steps of ECMA-262, Edition 6, 22.1.2.1
// 参考: https://people.mozilla.org/~jorendorff/es6-draft.html#sec-array.from
if (!Array.from) {
Array.from = (function () {
var toStr = Object.prototype.toString;
var isCallable = function (fn) {
return typeof fn === 'function' || toStr.call(fn) === '[object Function]';
};
var toInteger = function (value) {
var number = Number(value);
if (isNaN(number)) { return 0; }
if (number === 0 || !isFinite(number)) { return number; }
return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));
};
var maxSafeInteger = Math.pow(2, 53) - 1;
var toLength = function (value) {
var len = toInteger(value);
return Math.min(Math.max(len, 0), maxSafeInteger);
};
// The length property of the from method is 1.
return function from(arrayLike/*, mapFn, thisArg */) {
// 1. 把this对象定义成变量C.
var C = this;
// 2. 把需要转换的类数组对象定义成变量items
var items = Object(arrayLike);
// 3. 如果遇到意外则抛出错误.(items).
if (arrayLike == null) {
throw new TypeError("Array.from requires an array-like object - not null or undefined");
}
// 4. mapfn没有定义时, 不执行mapping迭代操作
var mapFn = arguments.length > 1 ? arguments[1] : void undefined;
var T;
if (typeof mapFn !== 'undefined') {
// 5. else
// 5. a. 如果 IsCallable(mapfn) 是false, 抛出 TypeError 错误.
if (!isCallable(mapFn)) {
throw new TypeError('Array.from: when provided, the second argument must be a function');
}
// 5. b. 如果提供了thisArg参数, 把thisArg定义成变量T; 反之,T就是undefined
if (arguments.length > 2) {
T = arguments[2];
}
}
// 10. 获取对象的长度
// 11. 把对象的长度通过 ToLength(lenValue) 转换,并将结果赋值给len.
var len = toLength(items.length);
// 13. 如果 IsConstructor(C) 是 true, 则:
// 13. a. 通过C来执行内部的Construct构造函数,把对象的长度作为参数传入.把执行结果定义为变量A.
// 14. a. 反之, 创建一个新的数组(len),并把它定义为变量A.
var A = isCallable(C) ? Object(new C(len)) : new Array(len);
// 16. 定义变量k,初始值为0.
var k = 0;
// 17. 循环 while k < len… (also steps a - h)
var kValue;
while (k < len) {
kValue = items[k];
if (mapFn) {
A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);
} else {
A[k] = kValue;
}
k += 1;
}
// 18. 把length添加进去 Put(A, "length", len, true).
A.length = len;
// 20. 返回 A.
return A;
};
}());
}