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

最新推荐文章于 2024-03-14 08:28:55 发布

一百个Chocolate

最新推荐文章于 2024-03-14 08:28:55 发布

阅读量620

点赞数 2

分类专栏： ECMAScript 6 学习文章标签： js javascript vue css jquery

原则上允许部分内容转载，转载请注明原文章地址！

本文链接：https://blog.csdn.net/weixin_42429718/article/details/104599347

版权

ECMAScript 6 学习专栏收录该内容

21 篇文章 13 订阅

订阅专栏

写在开头

本文将带你深入理解…拓展运算符介绍怎样通过拓展运算符来合并数组并写一个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 = '<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>