js--数组的|js--数组的 Array.of() 和 Array.from() 方法的使用总结 js--数组的Array.of()和Array.from(

文章图片

前言
JavaScript 中数组的本质是一个对象，它存在的 length 属性值随数组元素的长度变化，但是开发中经常会遇到拥有 length 属性和若干索引属性的对象，被称为类数组对象，类数组对象和数组类似，但是不能调用数组的方法。Array.from()方法解决了这一问题，将类数组转化为数组，本文就来总结一下 Array.of()和Array.from()的相关知识。
正文
1、Array.of()
【js--数组的|js--数组的 Array.of() 和 Array.from() 方法的使用总结】首先来对比一下普通创建数组的方法：

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"}]

写在最后
以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。