ES6 深入理解 ...拓展运算符 合并数组及demo选项卡实例

写在开头

本文将带你深入理解…拓展运算符 介绍怎样通过拓展运算符来合并数组并写一个demo选项卡实例

后续的文章都会与前端有关,欢迎各位同路途的人一起交流学习,3月份又是努力的开头,加油!

推荐阅读:来自 菜鸟 的 前端实习面经 大厂 春招实习生

ES 6专栏 -> 传送门

如果想更多了解ES6,请参考之前写过的一些文章:

ES6 一文弄懂 var let const 三剑客区别 吊打面试题

ES6 面试题:你能说出浏览器上到此支持多少个中文字吗?

ES6 面试题:你可以写出一百个 div 吗?一万个呢?

ES6 深入理解 includes

ES6 深入理解 startsWith和endsWith

ES6 深入理解 ${ } 模版

ES6 深入理解 数组中 find 方法

合并数组

在ES6 之前呢,我们合并数组或许会采用for 循环,去掉括号,还有使用 join函数,又或者使用concat()函数等等,但在ES6中,我们可以用…拓展运算符来简化我们的操作,如下:

let str = '
'
; document.write(str.repeat(5)); console.log([...document.querySelectorAll('div')]);

我们发现,确实合并成了一个数组,用到了querySelectorAll函数
ES6 深入理解 ...拓展运算符 合并数组及demo选项卡实例_第1张图片

简易选项卡

界面如下,通过点击不同的按钮,我们会显示不同的页面,比如点击按钮1 显示aaa
点击按钮 2 显示 bbb 点击按钮3 显示ccc 而且要默认第一个卡片打开,请你来设计。
ES6 深入理解 ...拓展运算符 合并数组及demo选项卡实例_第2张图片
代码如下:

<!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变量
在数组中可以起到合并数组的作用

学如逆水行舟,不进则退

你可能感兴趣的:(ECMAScript,6,学习)