ES6——数组扩展

数组扩展

1. 扩展运算符
扩展运算符（spread）是三个...，是rest参数的逆运算，将一个数组转为逗号分隔的参数序列。

console.log(…[1,2,3]) //1 2 3
console.log(…document.querySelectAll(”div)) // [div, div, div]

扩展运算符主要用于函数调用。

function push(array, ...items) {
  array.push(...item);
}

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

add(...[1,2]) //3

扩展运算符后面可以放置表达式

const arr = [
…(x > 0 ? [‘a’] : []),
‘b’,
]

扩展运算符后面是一个空数组，则不产生任何效果。

[…[], 1] // 1

代替函数的apply方法
扩展运算符可以展开数组，可以不需apply方法，将数组转化为函数的参数。

// es5
function f(x, y){
//...
}
f.apply(null, [2, 3])

// es6
f(...args)

扩展运算符取代apply方法的一个实际的例子，应用Math.max方法，简化求出数组最大元素的方法。

Math.max.apply(null, [14, 3, 66])  //es5
Math.max(...[14, 3, 66]) //es6

扩展运算符的应用
复制数组
数组是复合（引用类型），直接复制只是复制了指向底层数据结构的指针，而不是克隆一个全新的数组。（这可以称为浅复制，改变这个数组值，另一份指向该数据的内容也会改变）

const a1 = [1, 2];
const a2 = a1;
a2[0] = 2;
console.log(a1); // [2, 2]

es5只能用变通的方法来复制数组。

const a1 = [1, 2];
const a2 = a1.concat();
a2[0] = 2;
console.log(a1); // [1, 2]

上述代码中，a1会返回原数组的克隆，再修改a2就不会对a1产生影响。

扩展运算符提供了复制数组的简便方法。

   const a1 = [1, 2];
   const a2 = [..a1]; // 写法一
   const [...a2] = a1;// 写法二

上述两种写法，a2都是a1的克隆（深复制）

合并数组

 [1, 2].concat(more) // es5
 [1, 2, ...more] //es6

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

   a = list[0], rest = list.slice(1) // es5
   [a, ...rest] = list //es6

   const [first, ...rest] = [] // first: undefined rest: []
   const [first, ...rest] = [] //['foo']  // first: 'foo' rest: []

字符串
扩展运算符可以将字符串转为真正的数组。

[…’hello’] // [‘h’, ‘e’, ‘l’, ‘l’, ‘o’]

涉及到操作四个字符的Unicode字符的函数，最好使用扩展运算符改写。

实现Iterator接口的对象
任何Iterator接口的对象，都可以用扩展运算符转为真正的数组。

   let nodeList = document.querySelectorAll('div');
   let array = [...nodeList];

上述代码中，querySelectorAll方法返回一个nodeList对象（类数组对象）。这时可以用扩展运算符将其转为真正的数组。（ps:对于没有部署Iterator接口的类似数组的对象，扩展运算符就无法将其转为真正的数组）。

对于没有部署Iterator接口的对象可以采用Array.from方法将其转为真正的数组。

Map和Set结构，Generator函数
扩展运算符内部调用的是数据结构的 Iterator 接口，因此只要具有 Iterator 接口的对象，都可以使用扩展运算符，比如 Map 结构。

 let map = new Map([
     [1, 'one'],
     [2, 'two'],
     [3, 'three'],
]);
let arr = [...map.keys()]; // [1, 2, 3]

2. Array.from
用于将两类对象转化为真正的数组：类数组对象和可遍历（iterable）的对象（包括ES6新增的数据结构Set和Map）
下面是一个类数组对象，Array.from将其转化为真正的数组。

let arrayLike = {
    '0': 'a',
    '1': 'b',
};
// es5
var arr1 = [].slice.call(arrayLike); // ['a', 'b']
// es6
var arr2 = Array.from(arrayLike); // ['a', 'b']

实际应用中，常见的类似数组的对象为DOM操作返回的NodeList集合，以及函数内部的arguments对象。Array.from都可以将他们转为真正的数组。

// NodeList对象
let ps = document.querySelectorAll('p'); // 返回一个类数组对象
Array.from(ps).filter(p => {
  return p.textContent.length > 100;
});

// arguments对象
function foo() {
  var args = Array.from(arguments);
  // ...
}

当参数为一个真正的数组，Array.from会返回一个一模一样的新数组。

ps:扩展运算符...也可以将某些数据结构转为数组

// arguments对象
function foo() {
  const args = [...arguments];
}
// NodeList对象
[...document.querySelectorAll('div')]

所谓类似数组的对象，本质特征只有一点，即必须有length属性。因此，任何有length属性的对象，都可以通过Array.from方法转为数组，而此时扩展运算符就无法转换。

对于没有部署该方法的浏览器，可以用Array.prototype.slice方法代替

const toArray = (() =>
  Array.from ? Array.from : obj => [].slice.call(obj)
)();

Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);
Array.from([1, 2, 3], (x) => x * x)// [1, 4, 9]

如果map函数里面用到了this关键字，还可以传入Array.from的第三个参数，用来绑定this。

Array.from()的另一个应用是，将字符串转为数组，然后返回字符串的长度。因为它能正确处理各种 Unicode 字符，可以避免 JavaScript 将大于\uFFFF的 Unicode 字符，算作两个字符的 bug。