ES6新特性(部分语法)

芙如东海

已于 2022-08-11 10:45:48 修改

阅读量188

点赞数

分类专栏：前端学习文章标签： es6 前端 javascript

于 2022-08-06 16:46:49 首次发布

本文链接：https://blog.csdn.net/qq_52166656/article/details/126197340

版权

前端学习专栏收录该内容

19 篇文章 0 订阅

订阅专栏

ES6新特性

文章目录

ES6新特性

1.0let关键字

let 关键字用来声明变量，使用 let 声明的变量有几个特点：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V1nvwiPp-1659775163872)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220802130207031.png)]$

1) 不允许重复声明

在这里插入图片描述

2) 块儿级作用域

在这里插入图片描述

3) 不存在变量提升

var 存在变量提升，而let不存在变量提升的特性

在这里插入图片描述

4) 不影响作用域链

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RUzsqUCX-1659775163878)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220802130906546.png)]$

1.1let小案例

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ex03XmOK-1659775163880)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220802132522134.png)]$

将声明的var 换成let即可

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kfHVl5Dn-1659775163881)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220802132707512.png)]$

1.2const关键字

const 关键字用来声明常量，const 声明有以下特点
1) 声明必须赋初始值
2) 标识符一般为大写
3) 不允许重复声明
4) 值不允许修改
5) 块儿级作用域
注意: 对象属性修改和数组元素变化不会出发 const 错误
用应用场景：声明对象类型使用 const ，非对象类型声明选择 let

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZoX1YBFv-1659775163881)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220802132949664.png)]$

1.3解构赋值

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3Hq2QUiC-1659775163882)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220802133251856.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U29RJMnT-1659775163882)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220802133306927.png)]$

1.4模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识，特点：
1) 字符串中可以出现换行符
2) 可以使用 ${xxx} 形式输出变量

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZC9G8TlO-1659775163883)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220802133603093.png)]$

1.5简化对象写法

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QpNDnViO-1659775163883)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220802133739591.png)]$

1.6箭头函数

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ey6xZSE5-1659775163883)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220802134603586.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x0SF0prg-1659775163884)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220802134614934.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RYzEw5tm-1659775163884)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220802134624139.png)]$

1.7箭头函数的案例

1.7.1案例一

点击div背景颜色变为粉色

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>let</title>
	<style>
		div{
			width: 200px;
			height: 200px;
			background-color: aquamarine;
		}
	</style>
</head>
<body>
	<div id="ad"></div>
	 <script>
	let ad=document.getElementById('ad');
	ad.addEventListener("click",function(){
		setTimeout(function(){
			this.style.background='pink'
		},2000)
	})
	
	 </script>
</body>
</html>

此时的this是指向windows的，windows没有style属性。

纠正方法：在外层保存this此时的this是指向元素

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>let</title>
	<style>
		div{
			width: 200px;
			height: 200px;
			background-color: aquamarine;
		}
	</style>
</head>
<body>
	<div id="ad"></div>
	 <script>
	let ad=document.getElementById('ad');
	ad.addEventListener("click",function(){
		let _this=this;
		setTimeout(function(){
			_this.style.background='pink'
		},2000)
	})
	
	 </script>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A3ozq7AA-1659775163885)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220806144202512.png)]$

方便可以使用箭头函数来解决

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>let</title>
	<style>
		div{
			width: 200px;
			height: 200px;
			background-color: aquamarine;
		}
	</style>
</head>
<body>
	<div id="ad"></div>
	 <script>
	let ad=document.getElementById('ad');
	ad.addEventListener("click",function(){
		setTimeout(()=>{
			this.style.background='pink'
		},2000)
	})
	
	 </script>
</body>
</html>

在箭头函数的this的指向是指向声明外侧的的this

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6opHifEp-1659775163886)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220806144426518.png)]$

1.7.2案例二

筛选出数组的偶数，打印到控制台

原始写法

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>let</title>
</head>
<body>
	<div id="ad"></div>
	 <script>
		let arr=[1,6,7,32,645,2];
		const result=arr.filter(function(item){
			if(item%2==0){
				return true;
			}else{
				return false;
			}
		})
		console.log(result);
	
	 </script>
</body>
</html>

箭头函数的写法

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>let</title>
</head>
<body>
	<div id="ad"></div>
	 <script>
		let arr=[1,6,7,32,645,2];
		const result=arr.filter(item=>item%2==0)
		console.log(result);
	
	 </script>
</body>
</html>

在这里插入图片描述

1.8函数的参数的默认值

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>let</title>
</head>
<body>
	<div id="ad"></div>
	 <script>
		function add(a,b,c){
			return a+b+c;
		}
		console.log(add(1,2))
	 </script>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rs0U7MYR-1659775163888)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220806145325726.png)]$

与解构赋值结合

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AMKoBUYP-1659775163888)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220806145729153.png)]$

1.9rest参数

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>let</title>
</head>
<body>
	<div id="ad"></div>
	 <script>
		function show(...args){
			console.log(args)
		}
		show(1,2,3,4,5,6,'小白','小王','小张')
	 </script>
</body>
</html>

在这里插入图片描述

2.0扩展运算符

在这里插入图片描述

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WYNt3q8C-1659775163890)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220806150902943.png)]$

2.1symbol

ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。
Symbol 特点
1) Symbol 的值是唯一的，用来解决命名冲突的问题
2) Symbol 值不能与其他数据进行运算
3) Symbol 定义的对象属性不能使用 for…in 循环遍历，但是可以使用
Reflect.ownKeys 来获取对象的所有键名

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tt2Upail-1659775163890)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220806151152332.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ibgqoogg-1659775163891)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220806151521066.png)]$

2.2迭代器

遍历器（Iterator）就是一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。

1) ES6 创造了一种新的遍历命令 for…of 循环，Iterator 接口主要供 for…of 消费
2) 原生具备 iterator 接口的数据(可用 for of 遍历)
a) Array
b) Arguments
c) Set
d) Map
e) String
f) TypedArray
g) NodeList
3) 工作原理
a) 创建一个指针对象，指向当前数据结构的起始位置
b) 第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员
c) 接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员
d) 每调用 next 方法返回一个包含 value 和 done 属性的对象
注: 需要自定义遍历数据的时候，要想到迭代器。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TDffVhGK-1659775163891)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220806151848585.png)]$

2.3模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。

模块化的优势有以下几点：

防止命名冲突
代码复用
高维护性

模块功能主要由两个命令构成：export 和 import。

export 命令用于规定模块的对外接口
import 命令用于输入其他模块提供的功能

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-833usl2a-1659775163891)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220806163215019.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gfD7dS0D-1659775163892)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220806163511198.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-spthyyfZ-1659775163893)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220806163605378.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JBFn0V0l-1659775163893)(C:\Users\13417\AppData\Roaming\Typora\typora-user-images\image-20220806163631915.png)]$