ES6扩展运算符

1.介绍:

... 扩展运算符能将数组转换为逗号分隔的参数序列; 扩展运算符(spread)也是三个点(...)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的 参数序列,对数组进行解包;

2.基本使用:

javascript 复制代码
<!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>

应用:

javascript 复制代码
<!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> 
相关推荐
滕本尊2 分钟前
从业务到框架:Elpis 企业级应用的 NPM 包抽离实践
前端·全栈
木春4 分钟前
React入门:构建你的第一个应用
前端·react.js
gzzeason9 分钟前
ES6+内置进制转换方法
前端·ecmascript·es6
华洛16 分钟前
落地AI产品的最后一步:微调(面向非LLM算法工程师)
前端·aigc·产品经理
成小白20 分钟前
前端实现两个页面之间的通讯
前端·javascript
啷咯哩咯啷30 分钟前
element-plus el-tree-v2大数据量勾选节点卡顿问题
前端·javascript·vue.js
阳光阴郁大boy1 小时前
一个基于纯前端技术实现的五子棋游戏,无需后端服务,直接在浏览器中运行。
前端·游戏
石小石Orz1 小时前
效率提升一倍!谈谈我的高效开发工具链
前端·后端·trae
EndingCoder1 小时前
测试 Next.js 应用:工具与策略
开发语言·前端·javascript·log4j·测试·全栈·next.js
xw52 小时前
免费的个人网站托管-PinMe篇
服务器·前端