ES6--扩展运算符，解构赋值，模板字符串和箭头函数，迭代器的小例子

最新推荐文章于 2023-08-30 15:40:50 发布

Echo_wwl

最新推荐文章于 2023-08-30 15:40:50 发布

阅读量159

点赞数

文章标签： es6

本文链接：https://blog.csdn.net/weixin_43538709/article/details/117432063

版权

扩展运算符

	// ... 扩展运算符能够将[数组]转换成逗号分隔的[参数序列]
			const name=['myy','wwl'];
			function names(){
				console.log(arguments);
			}
			names(name);
			names(...name);
			
			//数组的合并
			const name1=['mmy','wwl'];
			const name2=['cz','bb'];
			//方法一
			const connect_them=name1.concat(name2);
			console.log(connect_them);
			//方法二：利用扩展运算符
			const connect_them1=[...name1,...name2];
			console.log(connect_them1);
			
			//数组的克隆
			const wwl=['W','W','L'];
			const WWL=[...wwl];
			console.log(WWL);
			
			//将伪数组转成真正的数组
			const divs=document.querySelectorAll('div');
			const divArr=[...divs];
			console.log(divArr);

对应输出结果：
在这里插入图片描述

解构赋值

//数组结构
			const F4=["小沈阳","赵四","刘能","宋小宝"];
			let [shen,zhao,liu,song]=F4;//注意！！！！][]中括号
			console.log(shen);
			console.log(zhao);
			console.log(liu);
			console.log(song);
			//对象结构
			const benshan={
				name:'赵本山',
				age:'不详',
				xiaopin:function(){
					console.log("我可以演小品");
				}
				
			};
			let {name,age,xiaopin}=benshan;//注意！！！！{}大括号
			console.log(name);
			console.log(age);
			console.log(xiaopin);
			xiaopin();

对应输出结果：
在这里插入图片描述

模板字符串

//ES6中引入新的字符串声明``反引号
			let str1='myy';
			let str2="myy";
			let str3=`myy`;
			
			//``可以出现换行符
			// let str='<ul><li>myy</li> 
			// <li>wwl</li></ul>';	//报错
			let str=`<ul><li>myy</li> 
			<li>wwl</li></ul>`;	//正确
			//变量拼接
			let lovest='wwl';
			let out=`${lovest}是我最喜欢的人`;
			console.log(out);	//wwl是我最喜欢的人

箭头函数

	let fun= (a,b)=>{
				return a+b;
			}
			console.log(fun(1,2));	//3
			//this是静态的，始终只想函数声明时所在作用于下的this 的值
			function getName(){
				console.log(this.name);
			}
			let getName2=()=>{
				console.log(this.name);
			}
			
			const person={
				name:'wwl'
			}
			window.name='myy';
			//直接调用
			getName();	//myy
			getName2();	//myy
			console.log('-----------------');
			//call方法调用
			getName.call(person);	//wwl
			getName2.call(person);	//myy
			//不能作为构造函数实例化
			// let person =(name,age)=>{
			// 	this.name=name;
			// 	this.age=age;
			// }
			// let me=new person('mao',22);
			// console.log(me);//报错
			var x=11;
			var abj={
				x:22,
				say: () => {
					console.log(this.x)
				}
			}
			abj.say();	//11

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#item{
				width: 100px;
				height: 100px;
				background-color: #00FFFF;
			}
			#item1{
				width: 100px;
				height: 100px;
				background-color: #000;
				margin-top: 10px;
			}
				
		</style>
	</head>
	<body>
	
		<div id="item"></div>
		<div id="item1"></div>
		
		<script>
			//case1：点击方块一秒后变色
			let item=document.getElementById('item');
			item.addEventListener("click",function(){
				_this=this;
				setTimeout(function(){
					//this指向window，需要在外层指定
					//this.style.background='pink';
					_this.style.background='pink';
				},1000)
			})
			let item1=document.getElementById('item1');
			item1.addEventListener("click",function(){
				
				setTimeout(()=>{
					//箭头函数中的this是指向上一层作用域
					this.style.background='pink';
				},1000)
			})
			
			
			
			//case2
			const arr=[1,2,3,4,5,6,7];
			const result=arr.filter(function(item){
				if(item%2==0)
					return true;
				else
					return false;
			})
			console.log(result);	//[2, 4, 6]
			console.log('------------------------');
			const result1=arr.filter(item => item%2==0);
			console.log(result1);	//[2, 4, 6]
		</script>
	</body>
</html>

迭代器

			const bc=['mmy','wwl'];
			for(let v of bc)
				console.log(v);	//myy wwl
			console.log(bc);	//["mmy", "wwl"]
			
			let iter=bc[Symbol.iterator]();
			console.log(iter.next());	//{value: "mmy", done: false}
			console.log(iter.next());	//{value: "wwl", done: false}
			console.log("-----------------");
			//自定义遍历
			const banjio={
				name:"终极一班",
				stus:[
					'xiaoming',
					'xiaohua',
					'xiaotian',
				],
				[Symbol.iterator](){
						let index=0;
						let _this=this;
						return {
							next:function(){
			 					if(index<_this.stus.length){
									const result={value:_this.stus[index],done:false};
									index++;
									return result;
								}
								else{
									return{value:undefined,done:true};
								}
								
							}
						}
				}
			}
			for(let v of banjio){
				console.log(v);// xiaoming xiaohua xiaotian
			}