ECMAScript 中 Array 的from()方法

「这是我参与2022首次更文挑战的第19天，活动详情查看：2022首次更文挑战」

前言

今天到处都洋溢着过节的氛围，但是我们千万不能放弃这个卷死他们的好时机，因为现在一卷就卷一对儿，真正的事半功倍！哈哈哈哈，跟大家分享一下新学到的一个很有用的小方法。

Array

ECMAScript数据和其它语言中的数组一样也是一组有序的数据，不一样的地方在于数组中每个槽位可以存储任意类型的数据，例如：一个数组，第一个元素是字符串，第二个元素是数字值，第三个元素是对象；这也是合法的。而且ECMAScript数组也是动态大小的，可以随着数据的添加自动变长。
创建数组的方法：

• Array构造函数

let names = new Array();

已知数组长度，可以向构造函数中传入一个数值；已知数组元素，可以给构造函数传入要保存的元素；

let names = new Array(3);
let address = new Array("Dalian","Beijing","Shanghai");

在使用构造函数时可以省略new操作符，结果是一样的。

• 数组字面量表示法 数组字面量就是在中括号中包含用逗号分割的元素列表，如：

let values = [1,2,3];
let names = [];

• Array.from()静态方法
  • 把字符串拆分为单字符数组
  • 把集合和映射转换为一个数组
  • 对现有数组进行浅复制
  • 使用任何可迭代对象
  • 把arguments对象转换为数组
  • 把有必要属性的自定义对象转换为数组
  • 接收第二个可选的映射函数参数（直接增强新数组的值）

1、
Array.from("Mike");//输出为["M","i","k","e"]
2、
const m = new Map().set(1,2)
                   .set(3,4);
const s = new Set().add(1)
                   .add(2)
                   .add(3)
                   .add(4);
Array.from(m);//输出为[[1,2],[3,4]]
Array.from(s);//输出为[1,2,3,4]
3、
const a1 = [1,2,3,4];
const a2 = Array.from(a1);
console.log(a2);//输出为[1,2,3,4]
alert(a1 === a2);// false
4、
const iter = {
    *[Symbol.iterator](){
        yield 1;
        yield 2;
        yield 3;
        yield 4;
    }
};
console.log(Array.from(iter));//输出为[1,2,3,4]
5、
function getArgs(){
    return Array.from(arguments);
}
console.log(getArgs(1,2,3,4));//输出为[1,2,3,4]
6、
const arrObj = {
    0:1,
    1:2,
    2:3,
    3:4,
    length:4
};
console.log(Array.from(arrObj));//输出为[1,2,3,4]
7、
const a1 = [1,2,3,4]; 
const a2 = Array.from(a1，x => x**2);
console.log(a2);//输出为[1,4,9,16]

总结

Array.from()的第一个参数是类数组对象，也就是任意可以迭代的结构，或者是有一个length属性和可索引元素的结构，所以它可以用于很多场合。