数组的扩展

2019-08-07 本文已影响27人前白

1：扩展运算符

主要作用就是展开当前数组；一般应用于浅拷贝、合并数组、解构

    console.log(1, ...[2, 3, 4], 5);
    // 1  2  3  4  5
    
    ...[2, 3, 4]
    // VM71: 1 Uncaught SyntaxError: Unexpected token...
    
    [...[2, 3, 4]]
    // (3)[2, 3, 4]

浅拷贝

      const arr1 = [1,2];
      const arr2 = [...arr1];
      // arr2 --> [1,2]
      
      
      // 情况二
      const arry1 = [3, 4];
      const arry2 = [...arry1, ...arry1];
      // arry2 --> [3,4,3,4]

合并数组

      const arr1 = [1, 2];
      const arr2 = [2, 2];
      const arr3 = [3, 2];
      [...arr1, ...arr2, ...arr3];
      // (6)[1, 2, 2, 2, 3, 2]

解构

      const [first, ...rest] = [1, 2, 3, 4, 5];
      // first --> 1
      // rest --> [2, 3, 4, 5]

拆分字符串

      [...'hello']
      // [ "h", "e", "l", "l", "o" ]

转换Iterator接口的对象

      [...'abcabcabc'.matchAll('ab')]; //matchAll返回一个迭代器
      // [Array(1), Array(1), Array(1)]
      
      
      let nodeList = document.querySelectorAll('div');
      let array = [...nodeList];
      // [Array(1), Array(1), Array(1)]

2：Array.from，从类数组(包含length)的对象和迭代器对象转换为数组

用法1

    let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
    };
    
    Array.from(arrayLike);
    // ['a', 'b', 'c'] 
    // 如果去掉 '0': 'a',这一行，那么也是会返回一个数组只是去掉的位置换成了undefined。

用法2 querySelectorAll

    Array.from([...'abcabcabc'.matchAll('ab')]);
    // [Array(1), Array(1), Array(1)]
    
    Array.from([1, 2, 3]);
    // [1, 2, 3] 
    
    Array.from({length: 3});
    // [ undefined, undefined, undefined ] 
    
    
    Array.from({
      length: 100
    }).fill(0);
    
    // (100) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]    fill代表返回的值
    
    
    // 接收函数
    Array.from([1, 2, 3], (x) => x * x);
    //  [1, 4, 9]

3：Array.of，将一组值, 转换为数组

    Array();
    // [] 
    
    Array(3);
    // [, , ,] 
    
    Array(3, 11, 8);
    // [3, 11, 8]
    
    Array.of();
    // [] 
    
    Array.of(undefined);
    // [undefined] 
    
    Array.of(1);
    // [1] 
    
    Array.of(1, 2);
    // [1, 2]

4：copyWithin ，将指定位置的成员复制到其他位置

也就是说在当前数组里面它会把指定位置的元素或者数复制到其他地方，它会修改当前数组。它接收三个参数：

Array.prototype.copyWithin(target, start = 0, end = this.length);
target(必需)：从该位置开始替换数据(负值表示倒数)，也就是说从哪里开始替换
start(可选)：从该位置开始读取数据(默认为 0), 负值表示从末尾开始计算
end(可选)：到该位置前停止读取数据(默认为数组长度), 负值表示从末尾开始计算 start - end 决定了一个范围，然后范围里面的成员复制到target里面开始

    [1, 2, 3, 4, 5].copyWithin(0, 3);
    // [4, 5, 3, 4, 5] 
    
    [1, 2, 3, 4, 5].copyWithin(0, 3, 4);
    // [4, 2, 3, 4, 5] 
    
     
    [1, 2, 3, 4, 5].copyWithin(0, -2, -1);
    // 等于：-2 + length = 3 ，-1 + length = 4 
    // [4, 2, 3, 4, 5]

5：find，找出第一个符合条件的数组成员

    [1, -24, -5, 10].find((value, index, arr) => value < 0);
    //  -24

6：findIndex，找出第一个符合条件的数组成员位置下标

    [-11, 4, -5, 10].findIndex((value, index, arr) => value < 0);
    // 0

7：fill，使用给定值填充一个数组(处理模式和copywithin一样)

fill的第一个参数是填充的值，第二个参数和第三个参数类似于copywithin的start end。

    ['a', 'b', 'c'].fill(7);
    // [7, 7, 7] 
    
    new Array(3).fill(7);
    // [7, 7, 7]
    
    ['a', 'b', 'c'].fill(7, 1, 2);
    // ['a', 7, 'c']
    
    ['a', 'b', 'c'].fill(7, 1);
    // ['a', 7, 7]

8：entries、keys、values，遍历数组, 返回一个遍历器对象。

['a', 'b'].keys() 返回一个迭代器Array Iterator {}，[...['a', 'b'].keys()]扩展一下返回一个数组[0,1]

keys：返回一个下标

      for (let index of ['a', 'b'].keys()) {
        console.log(index);
      }
      // 0 
      // 1

values：返回字符本身值

      for (let elem of ['a', 'b'].values()) {
        console.log(elem);
      }
      // 'a' 
      // 'b'

entries：返回既包含下标也包含值

      for (let [index, elem] of ['a', 'b'].entries()) {
        console.log(index, elem);
      }
      // 0 "a" 
      // 1 "b" 
      
      let letter = ['a', 'b', 'c'];
      let entries = letter.entries();
      
      // 依次遍历
      console.log(entries.next().value);
      // [0, 'a'] 
      console.log(entries.next().value);
      // [1, 'b']
      console.log(entries.next().value);
      // [2, 'c']

9：includes，某个数组是否包含给定的值，第二个参数表示起始位置。

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

10：flat，数组降低维度

    [1, 2, [3, 4]].flat(); //[1, 2, [3, 4]]数组里面嵌套一个数组是一个二维数组，使用flat降低维度
    // [1, 2, 3, 4]
    
    [1, 2, [3, [4, 5]]].flat(2);
    // [1, 2, 3, 4, 5] 
    
    // 如果不知道维度，可以给一个无限大Infinity
    [1, [2, [3]]].flat(Infinity);
    // [1, 2, 3] 
    
    // 如果有一个空对象，flat会默认过滤处理掉空元素
    [1, 2, , 4, 5].flat();
    // [1, 2, 4, 5]

11：flatMap，执行map函数再执行flat，也就是说把里面本身值先处理一遍输出然后再展开运算下一个值。

    [2, 3, 4].flatMap((x) => [x, x * 2]);
    
    // [2, 4, 3, 6, 4, 8]

12：数组空位，ES6将空位转为undefined, ES5不同方法处理方式不一致。

    Array(3);
    // [, , ,] 或者 [empty × 3]
    
    Array.from(['a', , 'b']);
    // [ "a", undefined, "b" ] 
    
    [...['a', , 'b']];
    // [ "a", undefined, "b" ]