ES6 rest参数和扩展运算符

一、rest参数

ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments

1. ES5 获取实参的方式

function date() {
    console.log(arguments);
}
date('白芷', '阿娇', '思慧');

2. ES6 获取实参的方式

• rest参数用三个点(...)表示

//rest 参数
function date(...args) {
    console.log(args);// filter some every map 
}
date('阿娇', '柏芝', '思慧');

• rest 参数必须要放到参数最后

function fn(a, b, ...args) {
    console.log(a);
    console.log(b);
    console.log(args);
}
fn(1, 2, 3, 4, 5, 6);

二、扩展运算符

• 扩展运算符好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。
• 扩展运算符在给数组、对象拼接很常用，原有的属性保存，新增的属性添加进去。

1. 数组的合并

//数组1
const kuaizi = ['王太利', '肖央'];
//数组2
const fenghuang = ['曾毅', '玲花'];

//ES5concat方法-数组拼接
const zuixuanxiaopingguo = kuaizi.concat(fenghuang);
//ES6扩展运算符-数组拼接
const zuixuanxiaopingguo = [...kuaizi, ...fenghuang];

//打印拼接后的新数组
console.log(zuixuanxiaopingguo);

2. 数组的克隆

这样拷贝如果原数组里的元素有引用类型的，那这样也只是把里面元素进行浅拷贝。

//数组1
const sanzhihua = ['E', 'G', 'M'];

//定义数组2，通过扩展运算符克隆数组1
const sanyecao = [...sanzhihua];//  ['E','G','M']
//打印数组2
console.log(sanyecao);

• 浅拷贝：就是浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。
• 深拷贝：是直接整个新对象出来并且把原来对象的数据放进去。改变拷贝数组也会改变原数组

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

<div></div>
<div></div>
<div></div>

<script>
    //获取所有div元素
    const divs = document.querySelectorAll('div');
    //使用扩展运算符转化伪数组
    const divArr = [...divs];
    //打印转化后的数组
    console.log(divArr);
</script>

• 转化前：divs是对象类型

• 转化后：divs是数组类型