目录
一、ES6新特性(重点)
1.let声明变量
2.const声明变量
3.变量解构赋值
4.模板字符串
5.对象简化写法
6.箭头函数
7.函数参数的默认值设置
8.rest参数
9.拓展运算符
10.Symbol
11.迭代器
12.生成器
13.promise
14.Set(集合)
15.Map
16.class类
17.数值拓展
18.对象方法拓展
19.模块
二、ES7新特性
1.includes()
2.指数操作符
三、ES8新特性
1.async 与 await
四、ES9新特性
1.对象展开
五、ES10新特性
1.Object.fromEntries()
2.trimStart()与trimEnd()
3.flat与flatMap
4.Symbol.prototype.description
六、ES11新特性
1.私有属性
2. Promise.allSettled()
3.字符串拓展matchAll()
4.可选链操作符
5.动态import
6.BigInt
7.globalThis
一、ES6新特性(重点)
1.let声明变量
- 变量不能重复声明
- 块儿级作用域
- 不影响作用域链
- 不存在变量提升
代码演示
2.const声明变量
注意事项
- 一定要赋初始值
- 一般常量使用大写(潜规则)
- 常量的值不能修改
- 块儿级作用域
- 对于数组和对象的元素修改, 不算做对常量的修改, 不会报错
3.变量解构赋值
解构赋值是对赋值运算符的扩展。它是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。在代码书写上简洁且易读,语义更加清晰明了;也方便了复杂对象中数据字段获取。
(1)数组的解构:
(2)对象的解构:
注意:变量名与对象里元素的名要一样的,且不论顺序如何也会一一对应。
4.模板字符串
模板字面量 是允许嵌入表达式的字符串字面量。你可以使用多行字符串
和字符串插值
功能。
(1). 声明
(2).注意事项:
a.内容里可以出现换行符,如:
不会报错。" "与 ’ ’ 这样写的话会。
b.可进行变量拼接:
5.对象简化写法
可以简化成(注意对象里的变化):
6.箭头函数
- 箭头函数表达式的语法比函数表达式更简洁
- 没有自己的this,arguments,super或new.target
- 更适用于那些本来需要匿名函数的地方
- 不能用作构造函数
(1).声明
原本:
简写:
可以理解成去掉了function这个单词,参数后面多了个箭头表示。
注意事项:
1.this是静态的,this始终指向函数声明时所在作用域下的this值:
使用 call() 方法,您可以编写能够在不同对象上使用的方法。
看出getName1的this指向已经变了,不再是全局的name,而是对象里的name,而箭头函数getName2没变,因为它始终指向函数声明时所在作用域下的this值。
2.不能作为构造实例化对象:
3.不能使用arguments变量:(伪数组)
4.箭头函数简写:
(1)当形参仅仅只有一个时可以省略括号:
相当于:
(2)当代码体只有一条语句时,可以省略花括号,且return这个单词也要省略,而且语句的执行结果就是函数的返回值:
案例1:
点击盒子两秒后变色:
我们这里可以看到要保存this,然后在定时器里才能用this,否则它会指向全局。
而使用箭头函数就不用这样,因为箭头函数this始终指向函数声明时所在作用域下的this值,如下:
案例2
从数组中返回偶数的元素
适用场景
箭头函数适合与 this 无关的回调. 定时器, 数组的方法回调
箭头函数不适合与 this 有关的回调. 事件回调, 对象的方法
更多this指向的问题
7.函数参数的默认值设置
(1).允许给函数参数赋初始值(潜规则是有初始值的参数要放最后一个):
(2).与解构赋值结合
8.rest参数
新增的 rest参数 用来获取函数的实参,代替arguments
ES5方式(得到伪数组)也是对象,不能对它使用数组方法:
ES6方式(得到数组)可以对其使用数组方法:
注意:如果有多个参数,rest参数必须放到最后
9.拓展运算符
“…” 扩展运算符能将 “数组” 转换为逗号分隔的参数序列,如:
应用:
合并两个数组:
ES5写法
ES6写法
数组克隆(注意是浅拷贝):
伪数组转成真数组:
Array.from()可以把伪数组转为真正的数组:
10.Symbol
ES6 引入了一种新的原始数据类型 Symbol ,表示独一无二的值,最大的用法是用来定义对象的唯一属性名。且Symbol值不能与其他数据进行运算。且Symbol定义的对象属性不能使用fr…in 循环遍历,但是可以使用Reflect.ownKeys来获取对象的所有键名。
创建:(会返回一个symbol对象)
写入字符串,相当于描述注释这东西:
也可以这样,返回函数对象:
你看不到它独一无二,其实暗地里它已经由自己的某些方法让自己独一无二了。都会生成唯一的symbol值。
Symbol内置属性
11.迭代器
迭代器(Iterator)是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口(其实就是对象里的一个属性),就可以完成遍历操作。
1.ES6创造了一种新的遍历命令fo…of 循环,Iterator接口主要供 for…of消费。
2.原生具备 iterator 接口的数据可用 for of 遍历。比如数组等都有。
for in 循环保存的是键名。for of 保存的是键值。
案例
12.生成器
其实就是一个特殊的函数。
在 javascript 中,如果想要使用生成器,则需要:
1.定义特殊的生成器函数(有个*号)。
2.调用该函数创建一个生成器对象。
3.在循环中使用该生成器对象,或直接调用其 next 方法。
yield 关键字用来暂停和恢复一个生成器函数,就是代码分隔符。
生成器的参数
案例(解决回调地狱问题)
案例(有顺序的异步操作)
13.promise
Promise 是ES6引入的在 js 中进行异步编程的新解决方案。
14.Set(集合)
ES6提供了新的数据结构Set(集合) 。它类似于数组,但成员的值都是唯一的,集合实现了iterator 接口,所以可以使用【扩展运算符】和【for…of…】进行遍历,集合的属性和方法:
- size 返回集合的元素个数。
- add 增加一个新元素,返回当前集合。
- delete 删除元素,返回boolean 值。
- has 检测集合中是否包含某个元素,返回boolean值。
- clear 清空数组。
声明
方法:
应用:
定义一个数组:
(1)数组去重
(2)交集:
filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
并集
差集
15.Map
ES6提供了Map数据结构。它类似于对象,也是键值对的集合。但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。Map也实现了iterator 接口,所以可以使用[扩展运算符」和[for…of…]进行遍历。Map的属性和方法:
size 返回Map的元素个数。
set 增加一个新元素,返回当前Map。
get 返回键名对象的键值。
has 检测Map中是否包含某个元素,返回boolean值。
clear 清空集合,返回undefined。
例如(声明)
16.class类
ES6提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。基本上,ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
知识点:
- class 声明类。
- constructor 定义构造函数初始化。
- extends 继承父类。
- super 调用父级构造方法。
- static定义静态方法和属性。
- 父类方法可以重写。
ES5构造实例化对象写法:
ES6 class类定义:
静态属性:(类的静态成员)
ES5写法:
ES6
若有 static 定义的属性和方法只属于类,不属于实例对象:
构造函数继承:
类继承:
class的set和get
17.数值拓展
Number . EPSILON 是JavaScript 表示的最小精度
EPSILON 属性的值接近于2. 2204460492503130808472633361816E-16
- 二进制和八进制
- Number. isFinite检测-一个数值是否为有限数。
- Number .isNaN 检测一个数值是否为 NaN。
- Number.parseInt Number.parseFloat字 符串转整数。
- Number. isInteger判断一个 数是否为整数。
- Math. trunc 将数字的小数部分抹掉。
- Math.sign判断一个数到底为正数负数还是零。
18.对象方法拓展
1.Object.is()判断两个数值是否相等:
2.Object.assign对象合并
放入两个对象就行。出现重名属性后面那个会把前面的给覆盖
3.Object.setPrototypeOf 设置原型对象属性
并不推荐这样做,在声明构造函数的时候就应该设置好原型对象)
19.模块
什么是模块?
当一个js文件可以独立完成一个功能的时候,这个js文件就是一个模块。
当一个多个.js文件共同完成一个功能的时候,这个些js文件就是一个模块。
模块就是module (模块的意思)。
三种导出方式
- 分别暴露
2.统一暴露
3.默认暴露
导入方式
- 通用的导入方式
2.解构赋值形式
3.简单形式 针对默认暴露
使用模块化的两种方式
二、ES7新特性
1.includes()
includes方法检测数组是否包含某个元素,返回布尔类型值。
2.指数操作符
指数运算符 ** 可以快速实现次方运算,与Math.pow方法结果一样:
三、ES8新特性
1.async 与 await
2. 对象方法拓展
Object.keys()获取对象所有的键:
Object.values()获取对象所有的值:
Object.entries()获取对象所有的键与值:
配合Map()使用更佳:
对象属性描述对象:
Object.getOwnPropertyDescriptors();
四、ES9新特性
1.对象展开
Rest参数与spread 扩展运算符在ES6 中已经引入,不过ES6 中只针对于数组,在ES9中为对象提供了像数组一样的rest参数和扩展运算符。
如下:
应用:
合并几个对象里的属性:
五、ES10新特性
1.Object.fromEntries()
Object.fromEntries() 方法接收一个键值对的列表参数,并返回一个带有这些键值对的新对象。
传入二维数组形式:
2.trimStart()与trimEnd()
trimStart与trimEnd方法。
trimStart() 方法从字符串的开头删除空格。trimLeft() 是此方法的别名。
trimEnd()方法从字符串末尾删除空格。trimRight()是此方法的别名。
3.flat与flatMap
flat(n) 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。n表示深度,可将多维数组转成低维。
flatMap() 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与map连着深度变量1的 flat 几乎相同,但 flatMap通常在合并成一种方法的效率稍微高一些。
4.Symbol.prototype.description
六、ES11新特性
1.私有属性
在类里的私有属性前加个#号。就是说在这个类外部查找不到私有属性,只能在这个类的内部,来找到这个私有属性。
2. Promise.allSettled()
Promise.allSettled()方法返回一个在所有给定的promise都已经fulfilled或rejected后的promise,并带有一个对象数组,每个对象表示对应的promise结果。而它的返回结果始终会是成功。
当您有多个彼此不依赖的异步任务成功完成时,或者您总是想知道每个promise的结果时,通常使用它。
3.字符串拓展matchAll()
matchAll() 方法返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。
4.可选链操作符
可选链操作符( ?. )允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。
5.动态import
动态import加载.html:
app.js:
hello.js:
6.BigInt
BigInt 是一种内置对象,它提供了一种方法来表示大于 253 - 1 的整数。这原本是 Javascript中可以用 Number 表示的最大数字。BigInt 可以表示任意大的整数。
可以用在一个整数字面量后面加 n 的方式定义一个 BigInt ,如:10n,或者调用函数BigInt()。
主要运用于大数值的运算。
7.globalThis
全局属性 globalThis 包含全局的 this 值,类似于全局对象(global object。意思就是不管如何,它始终指向全局对象。