爱站程序员基地
前言
JavaScript 中数组的本质是一个对象，它存在的 length 属性值随数组元素的长度变化，但是开发中经常会遇到拥有 length 属性和若干索引属性的对象，被称为类数组对象，类数组对象和数组类似，但是不能调用数组的方法。Array.from()方法解决了这一问题，将类数组转化为数组，本文就来总结一下 Array.of() 和Array.from() 的相关知识。
正文
1、Array.of()
首先来对比一下普通创建数组的方法：
var ar1 = new Array(2)console.log(ar1.length, ar1) //2 [empty,empty] (empty表示空位)var ar2 = new Array(1, 2, 3, 4)console.log(ar2.length, ar2) //4 [1,2,3,4]var ar3 = new Array(\"2\")console.log(ar3.length, ar3) //1 [\"2\"]
上面的代码中当使用单个数值参数来调用构造函数创建数据的时候，该数值会默认成为数组的长度；如果使用多项数据作为参数，这些参数会成为数组的项；而使用单个非数值类型的参数来调用，该参数会成为数组的唯一项。通过调用构造函数来创建数组，无法确定传入的参数是数组的长度还是具体的每一项，因此，ES6 针对这一点做了优化，提供了 Array.of () 方法。
Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。使用方法与构造函数类似，如下：
var ar1 = Array.of(3)console.log(ar1); //[3]var ar2 = Array.of(\"3\")console.log(ar2); //[\"3\"]var ar3 = Array.of(undefined)console.log(ar3); //undefined
区别：Array.of() 和 Array 构造函数之间的区别在于处理整数参数：Array.of(3) 创建一个具有单个元素 3 的数组，而 Array(3) 创建一个长度为 3 的空数组（注意：这是指一个有 3 个空位 ( empty ) 的数组，而不是由 3 个 undefined 组成的数组）。
2、Array.from()
Array.from()方法从一个类似数组或可迭代对象（内部有Symbol.iterator迭代器）创建一个新的，浅拷贝的数组实例并返回。
语法：Array.from (arrayLike [, mapFn [, thisArg ] ] )，Array.from() 方法接收三个参数，其中第一个arrayLike 表示想要转化成数组的伪数组对象或者可迭代对象，第二个参数 mapFn 为可选参数，指定新数组中每个元素都执行的回调函数，相当于执行了一边map遍历，第三个参数 thisArg 为可选参数，表示执行第二个回调函数时的 this 对象。
（1）Array.from 转化 arguments类数组对象为数组
首先对比一下没有Array.from() 方法之前的转化方法：
function makeArray(arrayLike) {var resultArr = []for (let i = 0; i < arrayLike.length; i++) {resultArr.push(arrayLike[i])}return resultArr//或者return Array.prototype.slice.call(arrayLike);}function doSomething() {console.log(arguments);var args = makeArray(arguments)console.log(args);}doSomething(\"a\", \"b\")// Arguments(2)[\"a\",\"b\",length:2...]// [\"a\",\"b\"]
基于上面的问题，ES6 优化后的便利方法如下：同样，除了arguments对象类似数组外，常用的还有 DOM 节点类数组 nodeList 等。
function doSomething() {var args = Array.from(arguments)console.log(args);}doSomething(\"a\", \"b\")//[\"a\",\"b\"]
（2）Array.from() 不仅可以用于类数组对象，也可以用于迭代对象，这意味着该方法可以将任意Symbol.iterator 属性的对象转化为数组。
var numbers = {*[Symbol.iterator]() {yield 1;yield 2;yield 3;}};var numbers2 = Array.from(numbers, (value) => value + 1);console.log(numbers2); // [2,3,4]
（3）除此之外，Array.from() 还有其他使用方法，如下：
// 将字符串转化为数组var str = \'foo\'console.log(Array.from(str)); //[\'f\',\'o\',\'o\']// 将Set集合转化为数组var set = new Set([1, 1, 2, 3, 4])console.log(Array.from(set));// [1, 2, 3, 4] 数组去重// 将map 集合转化为数组var map = new Map([[\'1\', \'a\'], [\'2\', \'b\']])console.log(Array.from(map)); // [[\'1\', \'a\'], [\'2\', \'b\']]console.log(Array.from(map.keys()));// [\'1\',\'2\']console.log(Array.from(map.values())); // [\'a\',\'b\']// 传入第二个参数var arr = [1, 2, 3]console.log(Array.from(arr, x => x * 2));//[2, 4, 6]// 数组浅复制（拷贝）var arr1 =[{name:\"name\"},{age:\"age\"}]var arr2 = Array.from(arr1)console.log(arr2);//[{name:\"name\"},{age:\"age\"}]arr1[0].name = \"new Nmae\"console.log(arr1);// [{name:\"new Nmae\"},{age:\"age\"}]console.log(arr2);//[{name:\"new Nmae\"},{age:\"age\"}]
写在最后
以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。
