高级JS-ES6的新增语法

用户9903177222612

2022-08-25 146 阅读4分钟

一·let关键字

ES6中新增的用于声明变量的关键字
let声明的变量只在所处于的块级有效

图片.png

注意：使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特性

<script type="text/javascript">
		/*
			let关键字就是用来声明变量的

			使用let关键字声明的变量具有块级作用域

			在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的

			防止循环变量变成全局变量

			使用let关键字声明的变量没有变量提升

			使用let关键字声明的变量具有暂时性死区特性

		*/
		
		/* --------let关键字就是用来声明变量的-------- */
		// let a = 10;
		// console.log(a);
		
		/* --------使用let关键字声明的变量具有块级作用域-------- */
		// if (true) {
		// 	let b = 20;
		// 	console.log(b)
		// 	if (true) {
		// 		let c = 30;
		// 	}
		// 	console.log(c);
		// }
		// console.log(b)
		
		/* -------在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的--------- */

		// if (true) {
		// 	let num = 100;
		// 	var abc = 200;
		// }
		// console.log(abc);
		// console.log(num)


		/* -------防止循环变量变成全局变量--------- */
		// for (let i = 0; i < 2; i++) {}
		// console.log(i);
		

		/*-----使用let关键字声明的变量没有变量提升------*/
		// console.log(a);
		// let a = 100;
		

		/* -------使用let关键字声明的变量具有暂时性死区特性------- */
		var num = 10
		if (true) {
			console.log(num);
			let num = 20;
		}



	</script>

不存在变量提升

图片.png

暂时性死区

图片.png

经典面试题

图片.png

图片.png

const

作用：声明常量，常量就是值（内存地址）不能变化的量
具有块级作用域

图片.png

声明常量时必须赋值

图片.png

常量赋值后，值不能修改

图片.png

图片.png

let，const，var的区别

使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象
使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升
使用const声明的是常量，在后面出现的代码中不能再修改该常量的值

图片.png

解构赋值

ES6中允许从数组中提取值，按照对应位置，对变量赋值，对象也可以实现解构

数组解构

图片.png

如果解构不成功，变量的值为undefined

图片.png

图片.png

对象解构：按照一定模式，从数组中或对象中提取值，将提取出来的值赋值给另外的变量

图片.png

图片.png

箭头函数

ES6中新增的定义函数的方式

图片.png

函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号

图片.png

图片.png

如果形参只有一个，可以省略小括号

图片.png

图片.png

箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this

图片.png

图片.png

剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组

图片.png

三个...代表接受所有实参

图片.png

剩余参数和解构配合使用

图片.png

图片.png

Array的扩展方法

构造函数方法：Array.from()
将类数组或可遍历对象转换为真正的数组

图片.png

图片.png

方法还可以接受第二个参数，作用域类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组

图片.png

图片.png

Set数据结构

ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值
Set本身是一个构造函数，用来生成Set数据结构

图片.png

Set函数可以接受一个数组作为参数，用来初始化

图片.png

图片.png

扩展运算符（展开语法）

扩展运算符可以将数组或者对象转为用逗号分隔的参数序列

图片.png

图片.png

扩展运算符可以应用于合并数组

图片.png

图片.png

将类数组或可遍历对象转换为真正的数组

图片.png

图片.png

图片.png

图片.png

方法还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组

图片.png

图片.png

实例方法：find（）

用于找出第一个符合条件的数组成员，如果没有找到返回undedined

图片.png

图片.png

Array的扩展方法

用于找出第一个符合条件的数组成员的位置，如果没有找到返回-1

图片.png

图片.png

实例方法：includes()

表示某个数组是否包含给定的值，返回布尔值

图片.png

图片.png

String的扩展方法

模板字符串

ES6新增的创建字符串的方式，使用反引号定义

图片.png

图片.png

模板字符串中可以解析变量

图片.png

图片.png

模板字符串中可以换行

图片.png

图片.png

在模板字符串中可以调用函数

图片.png

图片.png

实例方法:startsWith()和endsWith（）

startsWith()：表示参数字符串是否在原字符串的头部，返回布尔值
endsWith（）：表示参数字符串是否在原字符串的尾部，返回布尔值

图片.png

图片.png

实例方法：repeat（）

repeat方法表示将原字符串重复n次，返回一个新字符串

图片.png

图片.png

Set数据结构

ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值
Set本身是一个构造函数，用来生成Set数据结构

图片.png

Set函数可以接受一个数组作为参数，用来初始化

图片.png

图片.png

实例方法

图片.png

图片.png

图片.png

遍历

Set结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值

图片.png

图片.png