ES6数组的扩展

构造器上新增的方法

• Array.of()，弥补了原本 Array 创建数组时传入一个参数的缺陷。

  console.log(Array()); // -> []
  console.log(Array.of()); // -> []
      
  // Array()传入的参数为一个时，指定的是数组的长度为 3
  console.log(Array(3)); // -> [empty × 3]
  console.log(Array.of(3)); // -> [3]
      
  console.log(Array(1, 2)); // -> [1, 2]
  console.log(Array.of(1, 2)); // -> [1, 2]
  

  PHP

  复制

• Array.from()，可以将类数组转和部署了iterator接口的对象转换为数组。可接收三个参数，第一个参数为arrayLike，要转换为数组的对象，第二个可选参数，mapFn，将转换成的数组进行二次处理，第三个可选参数改变this指向，后两个参数一般不会用到。

  function foo (a, b, c, d) {
    console.log(arguments); // -> Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
    arguments = Array.from(arguments);
    console.log(arguments); // -> [1, 2, 3, 4]
  }
  foo(1, 2, 3, 4);
      
  let obj = {
    start: [1, 2, 3],
    end: [4, 5],
    [Symbol.iterator] () {
      let index = 0,
          arr = [...this.start, ...this.end],
          len = arr.length;
      return {
        next () {
          if(index < len){
            return {value: arr[index++], done: false}
          }else{
            return {value: undefined, done: true}
          }
        }
      }
    }
  }
  console.log(Array.from(obj)); // -> [1, 2, 3, 4, 5]
  

  PHP

  复制

原型上新增的方法

• [].fill(value, start, end)，填充数组(改变原始数组)，第一个参数为指定填充的值，后两个参数无指定，默认填充整个数组。第二个参数为开始填充的索引（默认值为0）包含当前索引，第三个参数为结束填充的索引（默认值为this.length）不包含当前索引。

  let arr = [1, 2, 3, 4];
  arr.fill(5);
  console.log(arr); // -> [5, 5, 5, 5]
      
  arr.fill(5, 1);
  console.log(arr); // -> [1, 5, 5, 5]
      
  arr.fill(5, 1, 2);
  console.log(arr); // -> [1, 5, 3, 4]
      
  // 注意：这种方式对象也可以调用
  let obj = {
    length: 3
  };
  [].fill.call(obj, 4);
  console.log(obj); // ->  {0: 4, 1: 4, 2: 4, length: 3}
  

  PHP

  复制

• [].keys() / values() / entries()，返回值是一个遍历器（iterator）对象，就可以使用for of 遍历当前对应的值。

• 注意： 与Object.keys() / values() / entries()的区别，对象构造器上的方法返回的是数组，而这里返回的是遍历器（iterator）对象。

  let arr = ['a', 'b', 'c'];
  console.log(arr.keys()); // -> Array Iterator {}
  console.log(arr.values()); // -> Array Iterator {}
  console.log(arr.entries()); // -> Array Iterator {}
      
  let iter = arr.values();
  console.log(iter.next()); // -> {value: 'a', done: false}
  console.log(iter.next()); // -> {value: 'b', done: false}
  console.log(iter.next()); // -> {value: 'c', done: false}
  console.log(iter.next()); // -> {value: undefined, done: true}
      
  for(let item of arr.entries()){
    console.log(item); // -> [0, 'a'] [1, 'b'] [2, 'c']
  }
  

  PHP

  复制

• [].find() / findIndex()，与map()等方法的使用方式一致，但返回值不同，返回的是当前符合回调函数条件的第一个成员，没有返回undefined，findeIndex()，返回的是第一个符合条件成员的索引，没有返回-1。

  let arr = [1, 2, 3, 4];
  let res = arr.find((value, index, arr) => {
    return value > 2;
  })
  console.log(res); // -> 3
      
  let idx = arr.findIndex(value => value > 2); 
  console.log(idx); // -> 2
      
  // 改善了indexOf() 的缺陷
  console.log([NaN].indexOf(NaN)); // -> -1
      
  console.log([NaN].findIndex(val => Object.is(NaN, val))); // -> 0
  

  PHP

  复制

• [].includes()，查询数组中是否包含传入的参数，返回一个布尔值。

  console.log([1, 2, 4, NaN].includes(3)); // -> false
      
  console.log([1, 2, 4, NaN].includes(NaN)); // -> true
  

  PHP

  复制