ECMAScript 6入门 / Array.from() - 汇智网

ECMAScript 6入门  互动版

简介

什么是ES6？支持环境支持

变量与字符串

let let应用 const声明常量是否包含字符串三种新方法 repeat()原字符串重复模板字符串标签模板 String.raw()

数值

值是否无穷，NaN 值是否整数 Math对象 Math 对数方法

数组

Array.from() Array.of() 数组实例的find()和findIndex() 数组实例的fill() 数组实例的entries()，keys()和values()

对象

属性的简洁表示法属性名表达式比较两个值是否严格相等 Object.assign() proto属性 Symbol类型 Proxy内置代理

函数

默认参数 rest参数扩展运算符箭头函数函数绑定尾调用优化

Set

基本用法 Set实例的属性 Set实例的方法遍历操作 WeakSet

Map

Map结构的目的和基本用法实例的属性和操作方法遍历方法 WeakMap

Iterator（遍历器）和for..of

Iterator（遍历器）的概念数据结构的默认Iterator接口调用默认Iterator接口的场合原生具备Iterator接口的数据结构 Iterator接口与Generator函数遍历器的return()，throw() for...of循环

Generator

简介 next方法的参数 for...of循环 throw方法 yield*语句作为对象属性的Generator函数

Promise

Promise的含义基本用法 Promise实例添加状态改变时的回调函数指定发生错误时的回调函数 Promise.all()方法 Promise.race()方法 Promise.resolve()方法 Promise.reject()方法 Generator函数与Promise的结合 async函数

Class

Class基本语法 Class的继承 class的取值函数（getter）和存值函数（setter） Class的Generator方法 Class的静态方法 new.target属性修饰器-类的修饰1 修饰器-类的修饰2

Module

export命令 import命令模块的整体输入 module命令 export default命令模块的继承

在线工具推荐： Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

将两类对象转为真正的数组

Array.from方法用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）。

一个转换类数组对象到数组的一个示例：

let list = document.querySelectorAll('ul.fancy li');

Array.from(list).forEach(function (li) {
  document.write(li);
});

上面代码中，querySelectorAll方法返回的是一个类似数组的对象，只有将这个对象转为真正的数组，才能使用forEach方法。

任何有length属性的对象，都可以通过Array.from方法转为数组。

let array = Array.from({ 0: "a", 1: "b", 2: "c", length: 3 });
document.write(array);    // [ "a", "b" , "c" ]

Array.from()还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理。

let array = [0,1,2,3,4];
let arrNew = Array.from(array, x => x * x);
console.log(arrNew);
// 等同于
let arrNew = Array.from(array).map(x => x * x);

下面的例子将数组中布尔值为false的成员转为0。

Array.from([1, , 2, , 3], (n) => n || 0)
// [1, 0, 2, 0, 3]

Array.from()的一个应用是，将字符串转为数组，然后返回字符串的长度。这样可以避免JavaScript将大于\uFFFF的Unicode字符，算作两个字符的bug。

function countSymbols(string) {
  return Array.from(string).length;
}

请在右侧的环境中，定义一个对象person，名字分别为张三、李四、王五，并有length属性，用Array.from转换为数组。

Math 对数方法