一扩展运算符
1.含义
（1）扩展运算符在数组将一个数组转化为由逗号隔开的参数序列,它就相当于rest的逆运算
console.log(1,2,...[3,4,5]}
//1,2,3,4,5
console.log(...document.querySelectorAll('div')
//[div,div,div]
（2）该运算符主要用于函数调用。
function push(array, ...items) {
array.push(...items);
}
function add(x, y) {
return x + y;
}
const numbers = [4, 38];
add(...numbers) // 42
在上面的代码中，该运算符将一个数组直接变成了参数序列，并完成了·arr.push(...items)和add(..numbers)函数的调用。
例如上面的add他通过运算符直接将numbers的两个参数变成了函数add的参数并参加运算，如果number的元素个数比函数add形参个数多的话，那add也只会从前往后取值参加运算。
(3)扩展运算符与正常的函数参数可以结合使用，非常灵活。
function f(v, w, x, y, z) { }
const args = [0, 1];
f(-1, ...args, 2, ...[3]);
上面代码中，利用运算符...args传入了两个参数，...[3]传入一个参数 ,分别代表0,1和3
（4）扩展运算符后面还可以方表达式。
const arr = [
...(x > 0 ? ['a'] : []),
'b',
];
（5）如果扩展运算符后面是一个空数组，则不产生任何效果。
[...[], 1]
// [1]
2.替代函数apply方法
由于扩展运算符可以展开数组，所以不需要apply方法，将数组转化为函数了。
// ES5 的写法
function f(x, y, z) {
// ...
}
var args = [0, 1, 2];
f.apply(null, args);
// ES6的写法
function f(x, y, z) {
// ...
}
let args = [0, 1, 2];
f(...args);
3.应用
（1）复制数组
const a1 = [1, 2];
const a2 = a1;
a2[0] = 2;
a1 // [2, 2]
上面代码中，a2不是a1的克隆，而是指向同一个房间的地址而已，修改a2也会导致a1变化。
ES5通过变通方法来复制数组
const a1 = [1, 2];
const a2 = a1.concat();
a2[0] = 2;
a1 // [1, 2]
扩展运算符提供了简便写法
const a1 = [1, 2];
// 写法一
const a2 = [...a1];
// 写法二
const [...a2] = a1;
上面两种写法a2都是a1的克隆
（2）合并数组
扩展运算符提供了数组合并的新写法
const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];
// ES5 的合并数组
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6 的合并数组
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
这两种办法都是浅拷贝，使用时需要注意。
（3）与解构赋值结合
扩展运算符可以解构赋值结合起来，生成数组。
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];
// 报错
（4）字符串
扩展字符串换可以将字符串转为真正的数组
[...'hello']
// [ "h", "e", "l", "l", "o" ]
二.Array.from（）
Array.from方法用于将两类对象转为真正的数组，类似数组的对象和可比遍历对象
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
在实际应用中，大家常见的对象影视DOM操作后返回的NodeList集合，以及函数的arguments对象。Array.from都可以将他们转为真正的数组。
// NodeList对象
let ps = document.querySelectorAll('p');
Array.from(ps)
});
// arguments对象
function foo() {
var args = Array.from(arguments);
// ...
}
如果参数是一个真正的数组，Array.from会返回一个一样的新数组。
Array.from([1, 2, 3])
// [1, 2, 3]
值得提醒的是，扩展运算符（...）也可以将某些数据结构转为数组。
// arguments对象
function foo() {
const args = [...arguments];
}
// NodeList对象
[...document.querySelectorAll('div')]
三.Array.from()
Array.of方法用于将一组值，转换为数组
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
上面代码中，Array方法没有参数、一个参数、三个参数时，返回结果都不一样。只有当参数个数不少于 2 个时，`Array()才会返回由参数组成的新数组。参数个数只有一个时，实际上是指定数组的长度。
Array.of基本上可以用来替代Array()或new Array()，并且不存在由于参数不同而导致的重载。它的行为非常统一。
Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]
Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组
网友评论