面试官：ES6中数组新增了哪些扩展?

素颜马尾好姑娘i 2023-01-05 12:50 123阅读 0赞

故心故心故心故心小故冲啊

--------------------

### 文章目录 ###

*  一、扩展运算符的应用
 *  二、构造函数新增的方法
 *   *  Array.from()
     *  Array.of() 特别注意一下
 *  三、实例对象新增的方法
 *  四、数组的空位
 *  五、排序稳定性
 *  参考文献

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]

# 一、扩展运算符的应用 #

ES6通过扩展元素符…，好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列

console.log(...[1, 2, 3])
    // 1 2 3
    
    console.log(1, ...[2, 3, 4], 5)
    // 1 2 3 4 5
    
    [...document.querySelectorAll('div')]
    // [<div>, <div>, <div>]

主要用于函数调用的时候，将一个数组变为参数序列

function push(array, ...items) { 
      array.push(...items);
    }
    
    function add(x, y) { 
      return x + y;
    }
    
    const numbers = [4, 38];
    add(...numbers) // 42

数组的合并也更为简洁了

const arr1 = ['a', 'b'];
    const arr2 = ['c'];
    const arr3 = ['d', 'e'];
    [...arr1, ...arr2, ...arr3]
    // [ 'a', 'b', 'c', 'd', 'e' ]

注意：通过扩展运算符实现的是浅拷贝，修改了引用指向的值，会同步反映到新数组

const arr1 = ['a', 'b',[1,2]];
    const arr2 = ['c'];
    const arr3  = [...arr1,...arr2]
    arr[1][0] = 9999 // 修改arr1里面数组成员值
    console.log(arr[3]) // 影响到arr3,['a','b',[9999,2],'c']

扩展运算符可以与解构赋值结合起来，用于生成数组

const [first, ...rest] = [1, 2, 3, 4, 5];
    first // 1
    rest  // [2, 3, 4, 5]
    
    const [first, ...rest] = [];
    first // undefined
    rest  // []
    
    const [first, ...rest] = ["foo"];
    first  // "foo"
    rest   // []

如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错

const [...butLast, last] = [1, 2, 3, 4, 5];
    // 报错
    
    const [first, ...middle, last] = [1, 2, 3, 4, 5];
    // 报错

# 二、构造函数新增的方法 #

关于构造函数，数组新增的方法有如下：  
Array.from()  
Array.of()

## Array.from() ##

将两类对象转为真正的数组：类似数组的对象和可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）

let arrayLike = { 
        '0': 'a',
        '1': 'b',
        '2': 'c',
        length: 3
    };
    let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

还可以接受第二个参数，用来对每个元素进行处理，将处理后的值放入返回的数组

Array.from([1, 2, 3], (x) => x * x)
    // [1, 4, 9]

## Array.of() 特别注意一下 ##

用于将一组值，转换为数组

Array.of(3, 11, 8) // [3,11,8]

没有参数的时候，返回一个空数组

当参数只有一个的时候，实际上是指定数组的长度

参数个数不少于 2 个时，Array()才会返回由参数组成的新数组

Array() // []
    Array(3) // [, , ,]
    Array(3, 11, 8) // [3, 11, 8]

# 三、实例对象新增的方法 #

于数组实例对象新增的方法有如下：

*  copyWithin()
 *  find()、findIndex()
 *  fill()
 *  entries()，keys()，values()
 *  includes()
 *  flat()，flatMap()

flatMap()方法对原数组的每个成员执行一个函数相当于执行Array.prototype.map()，然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
    [2, 3, 4].flatMap((x) => [x, x * 2])
    // [2, 4, 3, 6, 4, 8]

flatMap()方法还可以有第二个参数，用来绑定遍历函数里面的this  
[详细可见][Link 1]

# 四、数组的空位 #

数组的空位指，数组的某一个位置没有任何值

ES6 则是明确将空位转为undefined，包括Array.from、扩展运算符、copyWithin()、fill()、entries()、keys()、values()、find()和findIndex()

建议大家在日常书写中，避免出现空位

# 五、排序稳定性 #

将sort()默认设置为稳定的排序算法

const arr = [
      'peach',
      'straw',
      'apple',
      'spork'
    ];
    
    const stableSorting = (s1, s2) => { 
      if (s1[0] < s2[0]) return -1;
      return 1;
    };
    
    arr.sort(stableSorting)
    // ["apple", "peach", "straw", "spork"]

排序结果中，straw在spork的前面，跟原始顺序一致

# 参考文献 #

https://es6.ruanyifeng.com/\#docs/array

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNTU1ODU0_size_16_color_FFFFFF_t_70]: /images/20221119/a592da15bbbd45dcb3d976b123f492ed.png
[Link 1]: https://blog.csdn.net/qq_41555854/article/details/109487772