ES6中数组新增了哪些扩展?spread、rest

一、spread运算符的应用

ES6通过扩展元素符…，好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。主要使用情形如下：

1、用于函数调用的时候，将一个数组变为参数序列来传参

function add(x, y) {
  return x + y;
}

const numbers = [4, 38];
add(...numbers) // 42

2、用于数组的浅复制(注意与rest的第二种用法相对比)

let a1 = [1, 2];
let a2 = [...a1];
//a2为 [1,2]

3、用于数组的合并

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

4、用于把伪数组转化为真实数组

• 将NodeList 转化为 Array
• 将map.keys()返回的伪数组 转化为 Array

// 将NodeList 转化为 Array
let nodeList = document.querySelectorAll('div');
let array = [...nodeList];

// 将map.keys()返回的伪数组 转化为 Array
//注意，map中每项数组的第一个值是key,第二个值是val
let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);
map.set(4,'four')

let arr = [...map.keys()]; // [1, 2, 3,4]

二、rest运算符的应用

Rest的主要作用是，将用逗号分隔的参数序列转化为一个数组

Rest操作符和Spread操作都是用三个点（…）表示，但作用整好相反。
Rest操作符一般用在函数参数的声明中，而Spread用在函数的调用中。

使用情况如下：

1、用于函数定义的时候，将指定的参数序列转化为数组

function push(array, ...items) {
  console.log(arguments);    // es5获取所有参数的方法
  console.log(items);       //es6 中rest 运算符，将指定的参数序列转化为数组   
  var arr = array.slice(0);   //浅复制
  arr.push(...items);
  return arr;
}

var arr = [1,2]
push(arr,3,4)      
//打印的arguments, [[1,2],3,4]
//打印的items    [3,4]

2、能够更简单实现数组的浅复制

let a1 = [1, 2];
let [...a2] = a1;    // 这里是解构赋值 与 rest的结合来实现的浅复制
//a2为 [1,2]

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

let [first, ...second] = [1, 2, 3, 4, 5];
first // 1
second // [2, 3, 4, 5]

let [first1, ...second1] = [];
first1 // undefined
rest1  // []

注意：将rest运算符用于生成新的数组，只能放在参数的最后一位，否则会报错

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

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

4、可以将字符串转为真正的数组

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

5、对数据的解构

数组解构：因为数组也是对象，所以自然也可以对它进行解构, 只是属性名是下标，看起来比较奇怪：

let name_list = ["ec50n9", "xiao"];

let { 0: my_name, 1: her_name } = name_list;

console.log(my_name, her_name);   // ec50n9 xiao

数组嵌套解构：假如数组里面装的是对象，也可以利用数组嵌套解构（下面有介绍）来对数组中的对象进行解构：

let array = [{ name: "ec50n9", age:19 },
             { name: "xiao", age: 18 }];
let {
      0:{name:name_A, age:age_A},
      1:{name:name_B, age:age_B}
    } = array;
    
console.log(name_A, age_A);  // ec50n9 19
console.log(name_B, age_B);  // xiao 18

三、构造函数Array新增的方法

• Array.from()
• Array.of()

1、Array.from()

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

• 将类似数组的对象(伪数组)转化为真实的数组

// 将NodeList 转化为 Array
let nodeList = document.querySelectorAll('div');
let array = Array.from(nodeList);

//map
let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);
let arr1 = Array.from(map); // [ [1, 'one'],[2, 'two'],[3, 'three']]
let arr2 = Array.from(map.keys())  // [1,2,3]
let arr3 = Array.from(map.values())  // ['one','two','three']

//Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。
let mySet = new Set();
mySet.add(1); // Set [ 1 ]
mySet.add(5); // Set [ 1, 5 ]
mySet.add(5); // Set [ 1, 5 ]
mySet.add({a: 1, b: 2}); // Set [1,5,{a: 1, b: 2}]

let arr4 = Array.from(mySet);   // [1,5,{a: 1, b: 2}]

• 将可遍历的对象转化为真实的数组 （这一点可以忽略，感觉用处不大）

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

2、Array.of() 用于将一组值，转换为数组

• 没有参数的时候，返回一个空数组
• 当参数只有一个的时候，实际上是指定数组的长度
• 参数个数不少于 2 个时，Array()才会返回由参数组成的新数组

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

四、实例对象新增的方法

• find()、findIndex() 返回第一个符合条件的数组成员/数组成员的下标
• fill() 使用给定值，填充一个数组
• keys()，values() 返回数组的key/value所组成的列表（注意，返回的是一个类似数组的对象）
• flat(）数组的扁平化

4.1、find()、findIndex()

• find() 返回第一个符合条件的数组成员

  [1, 5, 10, 15].find(function(value, index, arr) {
    return value > 9;
  }) // 10
  

• findIndex() 返回第一个符合条件的数组成员的下标

  [1, 5, 10, 15].findIndex(function(value, index, arr) {
    return value > 9;
  })
  

4.2、fill() 使用给定值，填充一个数组

['a', 'b', 'c'].fill(7)
// [7, 7, 7]

new Array(3).fill(7)
// [7, 7, 7]

4.3、keys()，values()

keys()是对键名的遍历
values()是对键值的遍历

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

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

4.4、flat(）数组的扁平化

将数组扁平化处理，返回一个新数组，对原数据没有影响

flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]

[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

[1, 2, [3, [4, 5]]].flat(5)   
// [1, 2, 3, 4, 5]

五、数组的空位

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

ES6 则是明确将空位转为undefined

参考链接：https://mp.weixin.qq.com/s/pNruGEkPsMr0uFdJglyztA