1.介绍:
... 扩展运算符能将数组转换为逗号分隔的参数序列; 扩展运算符(spread)也是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的 参数序列,对数组进行解包;
2.基本使用:
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>扩展运算符</title>
</head> <body> <script> // ... 扩展运算符能将数组转换为逗号分隔的参数序列//声明一个数组 ... const tfboys = ['易烊千玺', '王源', '王俊凯']; // => '易烊千玺','王源','王俊凯' // 声明一个函数 function chunwan() { console.log(arguments); } chunwan(...tfboys); // chunwan('易烊千玺','王源','王俊凯') </script>
</body> </html>
应用:
<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>扩展运算符应用</title>
</head> <body> <div id="d1"></div> <div id="d2"></div> <script> //1. 数组的合并 情圣 误杀 唐探 const kuaizi = ['王太利', '肖央']; const fenghuang = ['曾毅', '玲花']; // 传统的合并方式 // const zuixuanxiaopingguo = kuaizi.concat(fenghuang); const zuixuanxiaopingguo = [...kuaizi, ...fenghuang]; console.log(zuixuanxiaopingguo); //2. 数组的克隆 const arr = ['E', 'G', 'M']; const newArr = [...arr]; // ['E','G','M'] console.log(newArr); //3. 将伪数组转为真正的数组 const divs = document.querySelectorAll('div'); const divArr = [...divs]; console.log(divArr); // arguments </script>
</body> </html>