这是我参与11月更文挑战的第21天，活动详情查看：2021最后一次更文挑战
熟练使用 ES6 及更高版本对于我们在项目开发中可提高开发效率! 本文来学习 ES6 对数组的扩展方法: Array.from()
前面文章学习了 JavaScript 中操作数组的一些方法(Array.splice()/slice()/map()/reduce()等高阶函数), JavaScript 并不完美但是不影响其运行, 这里学习其中的一些神奇"bug"直达列表
ES6 - Array.from()
Array.from() | MDN
Array.from()方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。
Array.from方法用于将两类对象转为真正的数组：
- 类似数组的对象（array-like object）
- 可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）。
代码示例:
// 可以转化字符串为数组, 这里就有意思了
console.log(Array.from('foo'));
// output: Array ["f", "o", "o"]
// 还可以传入自定义的方法函数, 对原有数组进行操作..
console.log(Array.from([1, 2, 3], x => x + x));
// output: Array [2, 4, 6]
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']
实际应用-转化 DOM 的NodeList & arguments
在实际开发中, 比如常见的类似数组的对象是 DOM 操作返回的 NodeList 集合，以及函数内部的arguments对象。都可以使用 Array.from将它们转为真正的数组。
// 转化 NodeList 对象
let spans = document.querySelectorAll('span');
Array.from(spans).filter(span => {
return span.textContent.length > 1000;
});
// 转化 arguments 对象
function foo() {
let args = Array.from(arguments);
// ...
}
相关阅读文章列表
- JavaScript 学习-函数剩余参数
- JS 小问题学习-函数可选参数
- JS 学习-for 循环
- JS 不完美亦可运行-自动加分号(
;)问题、 - JS 不完美亦可运行-数组对象相加问题、
- JS 并不完美之箭头函数相关(二)、
- JS 并不完美~(一)浮点数
- JavaScript 高阶函数(一)
- JavaScript 高阶函数之 reduce
- 数组扁平化 Array.prototype.flat()
- 灵活操作数组数据 slice()
- 灵活操作数组-数组中间插入数据 splice()
学习 ES6系列:
