Es6-数组展开运算符

83 阅读1分钟

一 数组的展开运算符

1.认识展开运算符

[3,1,2]
Math.min
console.log(Math.min(3,1,2));
console.log(Math.min([3, 1, 2]));
[3,1,2]->3,1,2

2.数组展开运算符的基本用法

console.log(Math.min(...['3','10','2']));
console.log(Math.min(...[false,true,'2']));
console.log(Number(undefined));
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(...args);
    let a=[...[args]];
    console.log(args===a[0]);
}
add(1,2,3)
console.log([...[1,2,3],4]);
[1,2,3]->1,2,3

三 数组展开运算符的应用

1.复制数组

const a=[1,2];
const b=a;
a[0]=3
console.log(b);//b不是一个新数组,而是和a是同一个引用
const a=[1,2];
// const c=[1,2];//相当于
const c=[...a]
console.log(a);
console.log(c);

2.合并数组

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

3.字符串转为数组

字符串可以按照数组的形式展开

 console.log(..."alex");
 console.log('a','l','e','x');
 console.log([..."alex"]);
 console.log('alex'.split(""));
 reverse

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

arguments

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

NodeList

console.log(document.querySelectorAll("p"));
console.log([...document.querySelectorAll("p")]);
console.log([...document.querySelectorAll("p")].push);