基础知识 | es6的知识点

快乐的高兴的学习代码中

已于 2022-05-25 17:40:55 修改

阅读量256

点赞数

分类专栏：详细知识文章标签： es6

于 2021-09-17 11:23:38 首次发布

本文链接：https://blog.csdn.net/A123ppleQueen/article/details/120345554

版权

let

可以一次声明多个变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
        //一次声明多个变量
	     let a;
		 let b,c,d;
		 let e=100;
		 let f=521,g="iloveyou",h=[];
		 console.log(a,b,c,d,e,f,g);
		</script>
	</body>
</html>

变量不能重复声明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
	     let a='mylove';
		 let a='cool';
		 console.log(a);
		</script>
	</body>
</html>

有块级作用域，只要代码块里有效，出了代码块就无效了，块级作用域还有if else while for等

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
	    //var是全局 let是块级
		{
			let girls="漂亮";
			var student="学习";
		}
		console.log(student);
		console.log(girls);
		</script>
	</body>
</html>

不存在变量提升

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
	   console.log(song);
	   let song='唱歌';
		</script>
	</body>
</html>

不影响作用域链

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		{
			//song的值可以输出来
			let song='唱歌';
			function fn(){
				console.log(song);
			}
			fn();
		}
		</script>
	</body>
</html>

思考下这个例子

下面两种方法的区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.item{
			border:1px solid green;
			width:80px;
			height:60px;
			display: inline-block;
		}
		</style>
	</head>
	<body>
		<div class="container">
			<h2 class="page-header">点击切换颜色</h2>
		    <div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
		</div>
		<script>
		//获取div元素对象
		let items=document.getElementsByClassName("item");
		//遍历并绑定事件
		for(var i=0;i<items.length;i++){
			items[i].onclick=function(){
				this.style.background='pink';
			}
		}
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.item{
			border:1px solid green;
			width:80px;
			height:60px;
			display: inline-block;
		}
		</style>
	</head>
	<body>
		<div class="container">
			<h2 class="page-header">点击切换颜色</h2>
		    <div class="item"></div>
			<div class="item"></div>
			<div class="item"></div>
		</div>
		<script>
		//获取div元素对象
		let items=document.getElementsByClassName("item");
		//遍历并绑定事件
		for(let i=0;i<items.length;i++){
			items[i].onclick=function(){
				items[i].style.background='pink';
			}
		}
		</script>
	</body>
</html>

const

值不能修改的量叫做常量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		//声明常量
		const a=4;
		console.log(a); //4
		const b=8;
		b=9;
		console.log(b);//Assignment to constant variable
		</script>
	</body>
</html>

常量一定要赋初始值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		const a
		console.log(a);
		</script>
	</body>
</html>

一般常量使用大写，小写也不会报错，推荐常量后面跟大写字母

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		const EAT="丝瓜炒蛋"
		console.log(EAT);
		</script>
	</body>
</html>

常量是块级作用域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		{
			const AT="暴富";
		}
		console.log(AT);
		</script>
	</body>
</html>

对于数组和对象的元素修改，不算做对常量的修改，不会报错

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		const TEAM=["小学","初中","大学"];
		TEAM.push('高中');
		console.log(TEAM);
		</script>
	</body>
</html>

变量的解构赋值

es6允许按照一定模式从数组和对象中提取值，对变量进行赋值，这就被称为解构赋值

数组解构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		const F4=["欧阳","沈","顾","傲天"];
		let [ouyang,shen,gu,aotiao]=F4;
		console.log(ouyang,shen,gu,aotiao);
		</script>
	</body>
</html>

对象解构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		const zhao={
			name:"赵本山",
			age:"63",
			xiaopin:function(){
				console.log("我可以演小品");
			}
		};
		
		let {name,age,xiaopin}=zhao;
		console.log(name);
		console.log(age);
		console.log(xiaopin);
		xiaopin();
		</script>
	</body>
</html>

模板字符串

es6引用了新的符号反引号``,作用跟双引号单引号差不多

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		let str=`我是一个字符串`;
		console.log(str,typeof str);
		</script>
	</body>
</html>

可以直接换行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		let str=`<ul>
		<li>学习</li>
		<li>暴富</li>
		<li>有钱</li>
		</ul>`;
		console.log(str);
		</script>
	</body>
</html>

可以变量拼接 `${}`

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		let cute="我可爱";
		let cool=`${cute}有钱`
		console.log(cool);
		</script>
	</body>
</html>

对象的简化写法

es6允许在大括号里，直接写入变量和函数，作为对象的属性和方法，函数里的方法可以省略掉：function

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		let name="财神";
		let change=function(){
			console.log("我会成为有钱人");
		}
		//就是这里简化了
		const school={
			name,
			change,
			//直接在新增的内容进行了省略
			cute(){
				console.log("我省略了冒号function");
			}
		}
		console.log(school);
		</script>
	</body>
</html>

箭头函数

es6允许使用箭头=>定义函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		//普通函数
		let fn=function(){
			
		}
		//箭头函数
		let fn1=(a,b)=>{
			return a+b;
		}
		//调用函数
		let result=fn1(1,2);
		console.log(result);
		</script>
	</body>
</html>

箭头函数this-----this是静态的，this始终指向函数声明时所在作用域下的this的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
		function getName(){
			console.log(this.name);
		}
		let getName1=()=>{
			console.log(this.name);
		}
		//设置window对象的name属性
		window.name="暴富";
		const school={
			name:"有钱"
		}
		//直接调用
		//getName(); //暴富
		//getName1();//暴富
		
		//call方法调用
		getName.call(school);//有钱
		getName1.call(school);//暴富
		</script>
	</body>
</html>

不能作为构造实例化对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
	     let person=(name,age)=>{
			 this.name=name;
			 this.age=age;
		 }
		 let me=new person("财神","无穷岁");
		 console.log(me);
		</script>
	</body>
</html>

箭头函数里不能使用arguments变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
	     let fn=()=>{
			 console.log(arguments);
		 }
		 fn(1,2,3);
		</script>
	</body>
</html>

箭头函数的简写

1.省略小括号，当形参有且只有一个的时候

2.省略花括号，当代码体只有一条语句的时候,此时return也必须省略，而且语句的执行结果就是函数的返回值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
	     //省略小括号,当形参有且只有一个的时候
		 let add=n=>{
			 return n+n;
		 }
		 console.log(add(9));//18
		 
		 //省略花括号，当代码体只有一条语句的时候,此时return也必须省略，而且语句的执行结果就是函数的返回值
		 let pow=n=> n*n;
		 console.log(pow(9));//81
		</script>
	</body>
</html>

箭头函数的适用范围

它适合与this无关的回调，定时器，数组的方法回调

不适合与this有关的回调，比如事件回调，对象的方法，不适合不等于不能哈

箭头函数的的例子1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div{
			width:200px;
			height:200px;
			background-color: #00BFFF;
		}
		</style>
	</head>
	<body>
		<div id="ad"></div>
		<script>
	    //点击div 2s后颜色变为粉色
		//获取元素
	    let ad=document.getElementById('ad');
		//绑定事件
		ad.addEventListener("click",function(){
			//保存this的值,//这里this的指向变了，我也不是很懂
			let _this=this;
			//定时器
			setTimeout(function(){
				//修改背景颜色this
				console.log(this);
				_this.style.background="pink";
			},2000)
		});
		</script>
	</body>
</html>

箭头函数的例子2

最低0.47元/天解锁文章

快乐的高兴的学习代码中

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
基础知识 | es6的知识点

let可以一次声明多个变量<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> //一次声明多个变量 let a; let b,c,d; let e=100; let f=521,g="ilov
复制链接

扫一扫