关于javascript:ES6新增APIArray篇一

新增的动态函数

1. Array.of

   函数类型：

   // 接管任意数量、任意类型的参数，返回这些参数依照传入程序组成的数组
   (...args?:any[])=>any[];

   Array.of用于创立一个具备 可变数量 参数的新的数组实例。它和通过 Array 构造函数创立数组的不同之处在于，当应用 new Array 的形式创立数组时，如果只传入了 一个整数 参数 a，则会创立一个 长度为 a 的数组，每个元素都是 空位 （指empty，而不是undefined），而Array.of 则会创立返回[a]。

   console.log(Array(3)); //[<3 empty items>]
   console.log(Array.of(3)); // [3]

   当咱们须要依据传入的参数来创立数组时，如果应用的 Array 构造函数，而且没有非凡解决参数只有一个整数的状况，就会呈现意料之外的状况。这种并非逻辑上的、细节性的问题，在修复时，往往咱们也是最难以意识到的一类问题。

2. Array.from

   函数类型：

   /**
    * @author: forceddd
    * @desc: 依据传入的一个伪数组或可迭代对象创立一个新的、浅拷贝的数组实例
    * @param {ArrayLike<any>|Iterable<any>} arrayLike 传入的数据源
    * @param {MapFn} mapFn 可选的映射函数，与 Array.map 用处雷同
    * @param {any} thisArg 可选的 this 对象，映射函数 mapFn 中的 this 会指向该参数
    * @return {any[]} 新创建的数组
    */
   (arrayLike:  ArrayLike<any> | Iterable<any>, mapFn?: MapFn, thisArg?: any) => any[];
   
   /**
    * @author: forceddd
    * @desc: 映射回调
    * @param {any} value 数组中的元素
    * @param {number} index 元素的在数组中的下标
    * @return {any} 映射返回的值
    */
   type MapFn = (value: any, index: number) => any;

   Array.from是依据传入的一个 伪数组 或可迭代对象 创立一个 新的 、 浅拷贝 的数组实例。

   与 Array.of 不同，Array.of是间接将参数作为返回值数组中的元素，而 Array.from 会依据传入的参数来产生返回值数组：

   当传入伪数组时，伪数组的 length 会作为返回值数组的length，伪数组的元素会作为返回值数组的元素。

   // 传入了一个伪数组
   console.log(Array.from({ 0: '第一项元素', length: 2}));//['第一项元素', undefined]
   // tag 属性不能转换成数组下标，被过滤掉了
   console.log(Array.from({ 0: '第一项元素', length: 2, tag: '一个字符串 key'}));//['第一项元素', undefined]
   // 传入的是一个一般对象，既不是伪数组，也不是一个 iterable 对象，返回一个空数组
   console.log(Array.from({ 0: '第一项元素', tag: '一个字符串 key'}));//[]

   当传入一个 iterable 对象参数时，比方 Array，Set 等，会对参数进行迭代，并将迭代失去的值作为返回值数组中的元素。

   console.log(Array.from([1, , 3])); //[1, undefined, 3]
   console.log(Array.from(new Set([1, , 3]))); //[1, undefined, 3]
   // 传入了一个映射函数
   console.log(Array.from([1, 2, 3], (item) => 2 * item)); //[2, 4, 6]
   const obj = {
       value: 0,
       // 自定义   [Symbol.iterator]，是该对象成为 iterable 对象，执行失去的迭代器是它本身
       [Symbol.iterator]() {return this;},
       //value > 3 后，设置迭代状态为 true，完结迭代
       next() {
           this.value++;
           return {
               value: this.value,
               done: this.value > 3,
           };
       },
   };
   // 传入一个自定义的 iterable
   console.log(Array.from(obj));//[1, 2, 3]

   须要留神的是，Array.from不会产生 空位 （empty），如果传入的参数中，该地位的元素是 空位 （empty），会应用undefined 作为后果。

   当咱们须要将一个伪数组转为真正的数组，以便应用数组的 map 等办法时——比方进行 dom 操作，相较于应用 [].slice.call(arrayLike) 来说（这种办法有可能产生 空位 （empty）元素），应用Array.from 无疑是一个更优雅也更简洁的形式。

3. 为什么要防止数组中的空位元素？

   在解决数组的函数中，不同的函数看待 空位 元素的形式是不同的，有些函数会疏忽 空位 元素，比方 map 函数，而有些则不会疏忽，比方Array.from，这就很有可能会产生一些莫名其妙的问题。

   如果咱们须要通过变量 count 统计一个数组的 length，这能够让咱们很显著的看到 空位 元素的问题所在。

   当存在 空位 元素时：

   const empty = [1, , 3];
   let count1 = 0;
   let count2 = 0;
   empty.map(() => count1++);
   Array.from(empty, () => count2++);
   // 因为 map 函数疏忽了空位元素，所以传入的回调只执行了两次，count1 的值为 2
   console.log({count1, count2}); //{count1: 2, count2: 3}

   当不存在空位元素时：

   const normal = [1, undefined, 3];
   let count1 = 0;
   let count2 = 0;
   normal.map(() => count1++);
   normal.forEach(() => count2++);
   
   console.log({count1, count2}); //{count1: 3, count2: 3}