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

前言

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

 

写在最后

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