九、扩展运算符

• 扩展运算符 ... 能将数组转换为逗号分隔的参数序列

（一）... 运算符

• rest 参数是放在函数声明时 形参 的位置
• ... 扩展运算符是放在调用函数时 实参 的位置

// 声明一个数组
const comic = ["恶役", "恋爱", "大女主"];
// 使用 ... 转换为 '恶役', '恋爱', '大女主'
// 声明一个函数
function cartoon() {
  console.log(arguments);
}
cartoon(comic);
// Arguments [Array(3), callee: ƒ, Symbol(Symbol.iterator): ƒ]

cartoon(...comic);
// 相当于cartoon('恶役', '恋爱', '大女主');
// Arguments(3) ['恶役', '恋爱', '大女主', callee: ƒ, Symbol(Symbol.iterator): ƒ]

（二）应用

1.数组的合并

const xiaopin = ["沈腾", "贾玲"];
const sketch = ["王皓", "史策"];

// const xiju = xiaopin.concat(sketch);
const xiju = [...xiaopin, ...sketch];
console.log(xiju);
// ['沈腾', '贾玲', '王皓', '史策']

2.数组的克隆

• 此处拷贝是浅拷贝，数组内部的引用数据类型只拷贝内容不拷贝地址
• 浅拷贝：拷贝变量所存的值，如果是引用变量，那拷贝的就是它里面的地址

const sanzhihua = ["E", "G", "M"];
const sanyecao = [...sanzhihua];
console.log(sanyecao);
// ['E', 'G', 'M']

3.将伪数组转为真正的数组

• 此处拷贝是浅拷贝，数组内部的引用数据类型只拷贝内容不拷贝地址
• 浅拷贝：拷贝变量所存的值，如果是引用变量，那拷贝的就是它里面的地址

const divs = document.querySelectorAll("div");
console.log(divs);
// NodeList(3) [div, div, div] 是一个对象

const divArr = [...divs];
console.log(divArr);
// [div, div, div] 是一个数组