ES6扩展：数组展开运算符、区分剩余参数和展开运算符、应用

ES6扩展：数组展开运算符、区分剩余参数和展开运算符、应用

一、数组展开运算符的基本用法

console.log(Math.min(...[3, 1, 2]));    // 1
相当于
console.log(Math.min(3, 1, 2));

二、区分剩余参数和展开运算符
1、根本区别

展开运算符
[3,1,2]->3,1,2

剩余参数
3,1,2->[3,1,2]

2、区分剩余参数和展开运算符

剩余参数
const add = (...args) => {
console.log(args);

展开运算符
console.log(...args);
console.log(...[1, 2, 3]);
};
add(1, 2, 3);

console.log([...[1, 2, 3], 4]);  // [1, 2, 3, 4]
// 相当于[1, 2, 3]->1,2,3

三、数组展开运算符的应用
1、复制数组

const a = [1, 2];
const c = [...a];    //进行复制
//相当于const c = [1, 2];
a[0] = 3;
console.log(a);   [3. 2]
console.log(c);   [1, 2]   c的值并没有改变

2、合并数组

const a = [1, 2];
const b = [3];
const c = [4, 5];
console.log([...a, ...b, ...c]);  //[1, 2, 3, 4, 5]
// console.log([...b, ...a, ...c]);  //[3, 1, 2, 4, 5]
console.log([1, ...b, 2, ...a, ...c, 3]); 
//[1, 3, 2, 1, 2, 4, 5, 3]

3、字符串转为数组
字符串可以按照数组的形式展开

console.log(...'alex'); 
//a l e x
console.log([...'alex']);
//['a', 'l', 'e', 'x']

也可以
console.log('alex'.split(''));

4、常见的类数组转化为数组

1）arguments

function func() {
// console.log(arguments.push);   // undefined
console.log([...arguments]);
}
func(1, 2);    //[1, 2]

2）NodeList

console.log([...document.querySelectorAll('p')]);