写在开头
本文将带你深入理解…拓展运算符 介绍怎样通过拓展运算符来合并数组并写一个demo选项卡实例
后续的文章都会与前端有关，欢迎各位同路途的人一起交流学习，3月份又是努力的开头，加油！
如果想更多了解ES6，请参考之前写过的一些文章：
ES6 一文弄懂 var let const 三剑客区别 吊打面试题
合并数组
在ES6 之前呢，我们合并数组或许会采用for 循环，去掉括号，还有使用 join函数，又或者使用concat()函数等等，但在ES6中，我们可以用…拓展运算符来简化我们的操作，如下：
let str = '<div></div>';
document.write(str.repeat(5));
console.log([...document.querySelectorAll('div')]);
我们发现，确实合并成了一个数组，用到了querySelectorAll函数
简易选项卡
界面如下，通过点击不同的按钮，我们会显示不同的页面，比如点击按钮1 显示aaa
点击按钮 2 显示 bbb 点击按钮3 显示ccc 而且要默认第一个卡片打开，请你来设计。
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 100px;
background: #CCCCCC;
display: none;
}
div:first-of-type{
display: block;
}
</style>>
</head>
<body>
<input value="1" type="button">
<input value="2" type="button">
<input value="3" type="button">
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
<script type="text/javascript">
[...document.querySelectorAll('input')].find((x,y)=>{
x['onclick']=()=>{
[...document.querySelectorAll('div')].find(d=>{
d.style.display='none';
});
[...document.querySelectorAll('div')][y].style.display='block';
}
})
</script>
</body>
</html>
总结
扩展运算符 函数中的参数用 …x
代表 实参为数组 进来的 x变量
在数组中可以起到合并数组的作用
学如逆水行舟，不进则退
