ES6-ES11新特性（这一篇就够了）

✨文章有误请指正，如果觉得对你有用，请点赞收藏关注一波，谢谢支持

---

前言

ECMAScript 是一种由 Ecma 国际（前身为欧洲计算机制造商协会）在标准 ECMA-262 中定义的脚本语言规范。这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMA-262 标准的实现和扩展

---

历史

ECMAScript 是由网景的布兰登·艾克开发的一种脚本语言的标准化规范；最初命名为Mocha，后来改名为 LiveScript，最后重命名为 JavaScript。1995年12月，升阳与网景联合发表了JavaScript。1996年11月，网景公司将 JavaScript 提交给欧洲计算机制造商协会进行标准化。ECMA-262 的第一个版本于 1997 年 6 月被 Ecma 组织采纳。ECMAScript 是由ECMA-262 标准化的脚本语言的名称。

---

版本

版本	发表日期	与前版本的差异
ES.8	1997年6月	首版
ES.9	1998年6月	格式修正，以使得其形式与ISO/IEC16262国际标准一致
ES.10	1999年12月	强大的正则表达式，更好的词法作用域链处理，新的控制指令，异常处理，错误定义更加明确，数据输出的格式化及其它改变
ES.无	放弃	由于关于语言的复杂性出现分歧，第4版本被放弃，其中的部分成为了第5版本及Harmony的基础；由ActionScript实现
ES.100	2009年12月	新增“严格模式（strict mode）”，一个子集用作提供更彻底的错误检查,以避免结构出错。澄清了许多第3版本的模糊规范，并适应了与规范不一致的真实世界实现的行为。增加了部分新功能，如getters及setters，支持JSON以及在对象属性上更完整的反射
ES.1.2	2011年6月	ECMAScript标5.1版形式上完全一致于国际标准ISO/IEC 16262:2011。
ES6	2015年6月	ECMAScript 2015（ES2015），第 6 版，最早被称作是 ECMAScript 6（ES6），添加了类和模块的语法，其他特性包括迭代器，Python风格的生成器和生成器表达式，箭头函数，二进制数据，静态类型数组，集合（maps，sets 和 weak maps），promise，reflection 和 proxies。作为最早的 ECMAScript Harmony 版本，也被叫做ES6 Harmony。
ES7	2016年6月	ECMAScript 2016（ES2016），第 7 版，多个新的概念和语言特性
ES8	2017年6月	ECMAScript 2017（ES2017），第 8 版，多个新的概念和语言特性
ES9	2018年6月	ECMAScript 2018 （ES2018），第 9 版，包含了异步循环，生成器，新的正则表达式特性和 rest/spread 语法。
ES10	2019年6月	ECMAScript 2019 （ES2019），第 10 版
ES11	2020年6月	ECMAScript 2020 （ES2020），第 11 版

---

ECMAScript6~ECMAScript11

第1章、ECMAScript相关介绍

1. 什么是 ECMA
   ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。1994 年后该组织改名为Ecma 国际。
2. 什么是ECMAScript
   ECMAScript 是由 Ecma 国际通过ECMA-262 标准化的脚本程序设计语言。
3. 什么是 ECMA-262
   Ecma 国际制定了许多标准，而ECMA-262 只是其中的一个，所有标准列表查看：http://www.ecma-international.org/publications/standards/Standard.htm
   ECMA-262 历史版本查看网址：
   http://www.ecma-international.org/publications/standards/Standard.htm
http://www.ecma-international.org/publications/standards/Ecma-262-arch.htm

• ES5 是 ECMAScript 第5版，2009年发布。
• ES6 是 ECMAScript 第6版，2015年发布，也叫 ES2015。
• 从 ES6 开始，每年发布一个版本，版本号比年份最后一位大 1。

4. 谁在维护 ECMA-262
   TC39（Technical Committee 39）是推进ECMAScript 发展的委员会。其会员都是公司（其中主要是浏览器厂商，有苹果、谷歌、微软、因特尔等）。TC39 定期召开会议，会议由会员公司的代表与特邀专家出席。
5. 为什么要学习 ES6
   ES6 的版本变动内容最多，具有里程碑意义
   ES6 加入许多新的语法特性，编程实现更简单、高效
   ES6 是前端发展趋势，就业必备技能
6. ES6 兼容性
   地址：http://kangax.github.io/compat-table/es6/

第2章、ECMASript 6 新特性

1. let 关键字

• let 关键字用来声明变量，let 声明和var声名变量对比：
  1. 不允许重复声明同名的变量
  2. 有块级作用域
  3. 不存在变量提升
  4. 不影响作用域链
• 应用
  1. 解决 作用域解决点击 but[i]\this.的问题

2. const 关键字

• const 关键字用来声明变量，const 声明和var声名变量对比：
  1. 声明必须赋初始值
  2. 标识符一般为大写（潜规则）
  3. 值不允许修改
  4. E不允许重复声明
  5. 块级作用域

3. 变量的解构赋值

• ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为 解构赋值
• 数组的解构赋值：
  javascript
  const arr = [‘red’, ‘green’, ‘blue’];
  let [r, g, b] = arr;
• 对象的解构赋值：

let obj = {
name: 'xiansheng',
age: 23,
obj1: function () {
console.log('hello');
},
}
let {name, age, obj1} = obj;
console.log(name,age,obj1())

应用场景：频繁使用对象方法、数组元素，就可以使用解构赋值形式。

4. 模板字符串

• 模板字符串（template string）是增强版的字符串，${``}：
• 用法：

let name = 'jack';
console.log(`我的名字叫${name}`);
```应用场景：当遇到字符串与变量拼接的情况使用模板字符串。```

5. 简化对象写法

• ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

let name= 'xiansheng';
let age = 35;
let obj1= function () {
 console.log('obj1');
}
//简写
const obj = {
 name,
 age,
obj1
}

应用场景：对象简写形式简化了代码，所以以后用简写就对了。

6. 箭头函数

• 简写一：

fun(a,b){console.log(a+b)}  =》  （a,b）=>{console.log(a,b)} 

• 简写二：

fun(a){return a}  =》  当只有一个参数且只有一个返回值的时候可以这样; a=>a;

• 特点
  1. this永远指向window
  2. 不能使用call，apply改变this的指向
  3. 没有arguments
  4. 不能用构造函数去实例对象

7. 函数参数默认值设定

• ES6 允许给函数参数设置默认值，当调用函数时不给实参，则使用参数默认值。
• 具有默认值的形参，一般要靠后。

(x, y, z=3) =>{console.log(x + y + z) };
console.log(add(1, 2)); // 6
* 可与解构赋值结合：
```javascript
function connect({ host = '127.0.0.1', uesername, password, port }) {
 console.log(host); // 127.0.0.1
 console.log(uesername); //root
 console.log(password); //root
 console.log(port); //3306
}
connect({
 // host: 'docs.mphy.top',
 uesername: 'root',
 password: 'root',
 port: 3306
})

8. rest 参数

• ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments，作用与 arguments 类似。将接收的参数序列转换为一个数组对象。
• 用在函数形参中，语法格式：Fun(a, b, …args)，写在参数列表最后面。

let Fun= (a, b, ...arr) => {
 console.log(a);//1
 console.log(b);//2
 console.log(arr);//[3,4,5]
};
Fun(1,2,3,4,5);
* 案例
```javascript
let add = (...arr) => {
 let sum = arr.reduce((pre, cur) => {
     return pre + cur
 });
 return sum;
}
console.log(add(1, 2, 3, 4, 5)); // 15

应用场景：rest 参数非常适合不定个数参数函数的场景

9. spread 扩展运算符

• 扩展运算符（spread）也是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包。可用在调用函数时，传递的实参，将一个数组转换为参数序列。
• 展开数组：

function fn(a, b, c) {
 console.log(arguments);  //Arguments(3) [1, 2, 3, Function, Function]
 console.log(a + b + c); //6
}
let arr = [1，2，3]; 
fn(...arr)
* 数组合并：
```javascript
let A = [1, 2, 3];
let B = [4, 5, 6];
let C = [...A, ...B];
console.log(C); // [1, 2, 3, 4, 5, 6]
* 浅克隆数组：
```javascript
let arr1 = ['a', 'b', 'c'];
let arr2 = [...arr1]; 
console.log(arr2); // ['a', 'b', 'c']
* 将伪数组转换为真实数组
```javascript
let div= document.querySelectorAll('div');
let divArr = [...div];
console.log(divArr);
* 对象合并
```javascript
// 合并对象
let obj1 = {
 a: 123
};
let obj2 = {
 b: 456
};
let obj = { ...obj1, ...obj2};
console.log(obj); //{ a: 123, b: 456}

10. Symbol

10.1 Symbol 基本介绍与使用

• ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。
• JavaScript 的七种基本数据类型：

1. 基本数值类型：string、number、boolean、undefined、null、symbol
2. 引用数值类型：Object（包括了Array、Function）

• Symbol 的特点：
  1. Symbol 的值是唯一的，用来解决命名冲突的问题
  2. Symbol 值不能与其他数据进行运算
  3. Symbol 定义的对象属性不能使用 for…in 循环遍历，但是可以使用 Reflect.ownKeys 来获取对象的所有键名
• Symbol 的创建：

1. 创建一个 Symbol：

let s1 = Symbol();
console.log(s1, typeof s1); 	// Symbol() symbol

2. 添加具有标识的 Symbol：

let s2 = Symbol('1');
let s2_1 = Symbol('1');
console.log(s2 === s2_1); 	// false Symbol 都是独一无二的

3. 使用 Symbol.for() 方法创建，名字相同的 Symbol 具有相同的实体。

let s3 = Symbol.for('apple');
let s3_1 = Symbol.for('apple');
console.log(s3 === s3_1); // true

4. 输出 Symbol 变量的描述，使用 description 属性

let s4 = Symbol('测试');
console.log(s4.description); // 测试

10.2 对象添加 Symbol 类型的属性

• ES6 引入 rest 参
• 案例：安全的向对象中添加属性和方法。
• 分析：如果直接向对象中添加属性或方法，则原来对象中可能已经存在了同名属性或方法，会覆盖掉原来的。所以使用 Symbol 生成唯一的属性或方法名，可以更加安全的添加。

// 这是一个 game 对象，假设我们不知道里面有什么属性和方法
const game = {
uname: '俄罗斯方块',
up: function () { },
down: function () { }
}

// 通过 Symbol 生成唯一的属性名，然后给 game 添加方法
let [up, down] = [Symbol('up'), Symbol('down')];
game[up] = function () {
console.log('up');
}
game[down] = function () {
console.log('down');
}

// 调用刚刚创建的方法
game[up]();
game[down]();

10.3 Symbol 内置值

• 除了定义自己使用的 Symbol 值以外，ES6 还提供了11 个内置的 Symbol 值，指向语言内部使用的方法。可以称这些方法为魔术方法，因为它们会在特定的场景下自动执行。

方法	描述
Symbol.hasInstance	当其他对象使用 instanceof 运算符，判断是否为该对象的实例时，会调用这个方法
Symbol.isConcatSpreadabl	对象的 Symbol.isConcatSpreadable 属性等于的是一个布尔值，表示该对象用于Array.prototype.concat() 时，是否可以展开
Symbol.species	创建衍生对象时，会使用该属性
Symbol.match	当执行 str.match(myObject) 时，如果该属性存在，会调用它，返回该方法的返回值。
Symbol.replace	当该对象被 str.replace(myObject) 方法调用时，会返回该方法的返回值。
Symbol.search	当该对象被 str.search(myObject) 方法调用时，会返回该方法的返回值。
Symbol.split	当该对象被 str.split(myObject) 方法调用时，会返回该方法的返回值。
Symbol.iterator	对象进行 for…of 循环时，会调用 Symbol.iterator 方法，返回该对象的默认遍历器
Symbol.toPrimitive	该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值。
Symbol. toStringTag	在该对象上面调用 toString() 方法时，返回该方法的返回值
Symbol. unscopables	该对象指定了使用 with 关键字时，哪些属性会被 with 环境排除。

11. Iterator迭代器

11.1 定义

• 说明：（按我们自己的意愿去遍历对象里面的数据）遍历器（Iterator）就是一种机制。它是一种接口，为各种不同的数据结构提 供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。
• ES6 创造了一种新的遍历命令 for…of 循环，Iterator 接口主要供 for…of 消费。
• 原生具备 iterator 接口的数据(可用for of 遍历)
  Array
  Arguments
  Set
  Map
  String
  TypedArray
  NodeList
• 案例：使用 next() 方法遍历原生自带 iterator 接口的数据：

let obj={
  name:"先生",
  arr:[1,1,5,4,4,5,88,88,89],
  [Symbol.iterator]:function (){
     let _this=this
      let index=0
      return{
          next:function (){
              if(index<_this.arr.length){
                  let data={value:_this.arr[index],done:false}
                  index++
                  return data
              }else{
                  return{value: undefined,done: true}
              }
          }
      }
  }
}
for (const objElement of obj) {
  console.log(objElement)
}

11.2 工作原理

• 创建一个指针对象，指向当前数据结构的起始位置
• 第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员
• 接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员
• 每调用 next 方法返回一个包含 value 和 done 属性的对象

12. Generator 生成器函数

12.1 生成器函数的声明和调用

• 生成器函数是 ES6 提供的一种 异步编程解决方案，语法行为与传统函数完全不同
• 使用 function * gen() 和 yield 可以声明一个生成器函数。生成器函数返回的结果是迭代器对象，调用迭代器对象的 next 方法可以得到 yield 语句后的值。
• *的位置没有限制
• 每一个 yield 相当于函数的暂停标记，也可以认为是一个分隔符，每调用一次 next()，生成器函数就往下执行一段。
• next 方法可以传递实参，作为 yield 语句的返回值

案例：
第一种玩法：

function * Fun() {
  console.log("一只老虎")
 let result1=yield "我是第一个！";
  console.log(result1)
  console.log("两只老虎")
  let result2=yield "我是第二个！";
  console.log(result2)
  console.log("真可爱")
  let result3=yield "我是第三个！";
  console.log(result3)
}	
let fun=Fun()
fun.next()
fun.next("我是第一个的回调")
fun.next("我是第二个的回调")
fun.next("我是第三个的回调")

第二种玩法：

function one() {
   setTimeout(()=>{
       console.log("第一单")
       let data="第一单"
       results.next(data)
   },1000)
}
function two() {
   setTimeout(()=>{
       console.log("第二单")
       let data="第二单"
       results.next(data)
   },2000)
}
function three() {
   setTimeout(()=>{
       console.log("第三单")
       let data="第三单"
       results.next(data)
   },3000)
}
function * sum() {
   one()
  let onea=yield ""
   console.log(onea)
   let twoa=yield two()
   console.log(twoa)
   let threea=yield three()
   console.log(threea)
   }
let results=sum()
results.next()
//第一单
//第一单
//第二单
//第二单
//第三单
//第三单

13. Promise

• 请跳到我博客搜：Promise入门到 里面有详细的说明；

14. Set

14.1 Set 的定义和使用

• ES6 提供了新的数据结构 Set（集合）。它类似于数组，但 成员的值都是唯一的，集合实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of』进行遍历。
• 定义一个 Set 集合：

let st1 = new Set();
let st2 = new Set([可迭代对象]);

• 集合new Set()的属性和方法：
  1. set.size：返回集合个数
  2. set.add(item)：往集合中添加一个新元素 item，返回当前集合
  3. set.delete(item)：删除集合中的元素，返回 boolean 值
  4. set.has(item)：检测集合中是否包含某个元素，返回 boolean 值
  5. set.clear()：清空集合
  6. 集合转为数组：[…st]
  7. 合并两个集合：[…st1, …st2]

14.2 案例：

• 案例1

let s=new Set(['大事儿','小事儿','小小事儿','大二事'])
s.add("小小儿")
console.log(s) //Set(5) {"大事儿", "小事儿", "小小事儿", "大二事", "小小儿"size: 5}
s.delete("小小儿")
console.log(s) //Set(4) {"大事儿", "小事儿", "小小事儿", "大二事"size: 4}
console.log(s.has("大事儿")) //true
s.clear() //Set(0) {size: 0}
console.log(s)
* 	案例2~~~```结和 mew Set（） 完成:并集、交集、数组去重、差集```
```javascript
定义两个数组
   let arr=[1,2,5,4,8,8,4,5]
   let arr1=[1,5,2,88,88,99,4,5,5]
   // 并集、
let sum=new Set([...arr,...arr1])
console.log(sum,"1") //Set(7) {1, 2, 5, 4, 8size: 7, ...}1	
// 交集、
let intersection=[...new Set(arr)].filter(item=>{
   return new Set(arr1).has(item)
})
console.log(intersection,"2") //Array(4) [1, 2, 5, 4] 2	
// 数组去重、
let TheRepeat=new Set([...arr,...arr1])
console.log(TheRepeat,"3") //Set(7) {1, 2, 5, 4, 8size: 7, ...}3	
// 差集
let differenceSet=[...new Set(arr)].filter(item=>{
   return !(new Set(arr1).has(item))
})
console.log(differenceSet,"4") //Array(1) [8] 4

15. Map

• ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是 “键” 的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of』进行遍历。
• Map 的属性和方法：（k 为键，v为值）
  • size：返回 Map 的元素（键值对）个数
  • set(k, v)：增加一个键值对，返回当前 Map
  • get(k)：返回键值对的键值
  • has()：检测 Map 中是否包含某个元素
  • clear()：清空集合，返回 undefined
• Map的使用：

//声名map
let map=new Map();
console.log(map)
// 添加元素
map.set({name:"郭先生"},"郭先生!")
// 获取
console.log(map.get('name'))
// size个数
console.log(map.size)
// 删除
console.log(map.delete('name'))
// 查询
console.log(map.has('name'))
// 清空
map.clear()

16. class 类

• ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过Class关键字，可以定义类。基本上，ES6 的 Class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 Class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
  16.1 原生创建方法 对比 Es6 Class

##原始的创建方法
function Fun1(name,age) {
   this.name=name
   this.age=age
}
Fun1.prototype.fun1=function (){
   console.log("可以打电话了！")
}
let newFun1=new Fun1("郭先生",18)

console.log(newFun1)

##Class方法
class Fun2{
   fun2(){
       console.log("可以打电话了！")
   }
   constructor(name,age) {
       this.name=name
       this.age=age
   }
}
let newFun2=new Fun2("郭先生",18)

console.log(newFun2)

16.2 extends 类继承和方法的重写

• ES6 中直接使用 extends 语法糖（更简洁高级的实现方式）来实现继承，同时可以重写父类的方法，直接在子类中重新写一次要重写的方法即可覆盖父类方法。

class cal1{
   constructor(a,b) {
       this.a=a
       this.b=b
   }
   la(){
       console.log(5)
   }
}
class cal2 extends cal1{
   constructor(a,b,c,d) {
   类的继承
       super(a,b);
       this.c=c
       this.d=d
   }
   类的重写
   la(){
       console.log(5)
   }
}
let a=new cal2(1,1,1,1)
a.la()
console.log(a)

16.3 getter 和 setter

• 实际上，getter 和 setter 是 ES5（ES2009）提出的特性，这里不做详细说明，只是配合 class 使用举个例子。
  当属性拥有 get/set 特性时，属性就是访问器属性。代表着在访问属性或者写入属性值时，对返回值做附加的操作。而这个操作就是 getter/setter 函数。
• 使用场景： getter 是一种语法，这种 get 将对象属性绑定到 查询该属性时将被调用的函数。适用于某个需要动态计算的成员属性值的获取。setter 则是在修改某一属性时所给出的相关提示。

class setget{
  get person(){
      console.log("我不干净了！")
  }
  set person(value){
      console.log("我一点也不干净了！")
      console.log(value)
  }
}
let person=new setget()
console.log(person)
person.person="name"

17. 数值扩展

• ES6 引入 rest 参

let number=55.5
console.log(Number.isInteger(number)) //判断是不是整数
console.log(Number.isFinite(number)) //判断是不是有限数
console.log(Number.isNaN(number)) //判断是不是NaN
console.log(Number.parseInt(number)) //整数化
console.log(Number.parseFloat(number)) //浮点化
console.log(Math.trunc(number)) //去掉小数点
console.log(Math.sign(number)) //判断一个数到底为正数 负数 还是零

18. 对象方法扩展

• ES6 新增了一些 Object 对象的方法。
• Object.is 比较两个值是否严格相等，与『===』行为 基本一致
• Object.assign 对象的合并，将源对象的所有可枚举属性，复制到目标对象
• proto、setPrototypeOf、setPrototypeOf 可以直接设置对象的原型
• Object.is
  • 都是 undefined
  • 都是 null
  • 都是 true 或 false
  • 都是相同长度的字符串且相同字符按相同顺序排列
  • 都是相同对象（意味着每个对象有同一个引用）
  • 都是数字且
    • 都是 +0
    • 都是 -0
    • 都是 NaN
    • 或都是非零而且非 NaN 且为同一个值

console.log(Object.is(5,5)); //true
let a={
   name:"guoxiansheng",
   age:18
}
let b={
   name:"guoxiansheng1",
   ag2e:189
}
console.log(Object.assign(a,b)) //Object {name: "guoxiansheng1", age: 18, ag2e: 189}

18.1 Object.setPrototypeOf 和 Object.getPrototypeof

• Object.setPrototypeOf 用于设置对象的原型对象，Object.getPrototypeof 用于获取对象的原型对象，相当于 proto。

const school = {
  name: '尚硅谷'
}
const cities = {
  xiaoqu: ['北京','上海','深圳']
}
Object.setPrototypeOf(school, cities);
console.log(Object.getPrototypeOf(school)); //Object {xiaoqu: Array(3)}
console.log(school); //Object {name: "尚硅谷"}

19. ES6 模块化

• 模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。
  19.1 模块化的好处
• 模块化的优势有以下几点：
  • 防止命名冲突
  • 代码复用
  • 高维护性
    19.2 模块化规范产品
• ES6 之前的模块化规范有：
  • CommonJS => NodeJS、Browserify
  • AMD => requireJS
  • CMD => seaJS
    19.3 ES6 模块化语法
• 模块功能主要由两个命令构成：export 和 import。
  • export 命令用于规定模块的对外接口
  • import 命令用于引入其他模块提供的功能
    19.4 模块暴露语法
• 暴露方法：
  1. 默认暴露export default
  2. 统一暴露export{}
  3. 分别暴露统一暴露export
     19.5 模块导入数据语法
• 引入方法：
  1. 通用引入 import * as name from “”
  2. 解构赋值形式 import {name as(别名)} from “”
  3. import {default as name} from “./”
  4. 简便的形式 争对默认暴露 import name from “” 只对默认暴露有用
  5. 使用 借用js文件 然后html引入
     
     19.6 使用 babel 对模块化代码转换
• 有的浏览器不支持 ES6 语法，这时候就需要使用 babel 来将其转换成 ES5 等价语法。
  1. 安装工具
     npm i babel-cli babel-preset-env browserify(webpack) -D
     Copy to clipboardErrorCopied
  2. 编译
     npx babel src/js -d dist/js --presets=babel-preset-env
     Copy to clipboardErrorCopied
  3. 打包
     npx browserify dist/js/app.js -o dist/bundle.js
     19.5 模块化引入 npm 安装的包
     引入包命令：npm install jquery
     再通过：import 导入即可。
     如导人jquery：import $ from 'jquery';

第3章、ECMASript 7 新特性

1. Array.prototype.includes
   includes 方法用来检测数组中是否包含某个元素，返回布尔类型值。
   用法：arr.includes("nane") indexOF()
2. 指数运算符
   在 ES7 中引入指数运算符 **，用来实现幂运算，功能与 Math.pow(a, b) 结果相同。
   用法：Math.pow(2,10)->>console.log(2 ** 10)

第4章、ECMASript 8 新特性

1. async 和 await
   用法：两者搭配使用会产生化学反应 因为之前以及写过文章了这里就不写了 可以去我的博客收Promise入门（此篇足以）
2. Object.values 、Object.keys()和 Object.entries

• Object.keys()获取对象所有的键
• Object.values() 获取对象所有的值

let obj = {
  a: 1,
  b: {1:2},
  c: [1,2,3]
}
console.log(Object.values(obj))
// [1, {1: 2}, [1,2,3]]
console.log(Object.keys(obj))
// ['a', 'b', 'c']
* Object.entries() 方法返回一个给定对象自身可遍历属性 [key,value] 的数组（以键值对的形式存在）
```Javascript
const obj = {a: 1, b: 2, c: 3};
console.log(Object.entries(obj))
// [ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ] ]

• 返回的是一个数组，这样就可以使用 for…of 遍历了。

const obj = { a: 1, b: 2, c: 3 };
for (let [k, v] of Object.entries(obj)) {
  console.log(k, v)
}

第5章、ECMASript 9 新特性

1. 正则扩展-命名捕获分组
2. 正则扩展-反向断言
3. 正则扩展：dotAll 模式

总结:

第6章、ECMASript 10 新特性

1. Object.fromEntries

• Object.fromEntries() 方法把可迭代对象的键值对列表转换为一个对象。

Object.formEntries([],[])
new Map().set("name","guo")
Object.formEntries(new Map())
把数组转换为键值对象
es8做对比把对象转化为数组-->

2. trimStart() 和 trimEnd()

trimStart() 去除字符串开头连续的空格（trimLeft 是此方法的别名）
trimEnd() 去除字符串末尾连续的空格（trimRight 是此方法的别名）

3. Array.prototype.flat 和 Array.prototype.flatMap
   多维转1维

let arr=[[1,5,[4,[8]]]]
console.log(arr)  ///Array(1) [Array(3)]
console.log(arr.flat(3)) ///Array(4) [1, 5, 4, 8]
let arr1=[1,5,4,8,4]
console.log(arr1.flatMap(item=>[item*10])) ///Array(5) [10, 50, 40, 80, 40]

4. Symbol.prototype.description

• 使用 Symbol() 创建的 Symbol 字面量，可以直接使用 description 获取该字面量的描述。

let sym = Symbol('hello')
console.log(sym.description)
// hello

第7章、ECMASript 11 新特性

1. es11私有属性 Class的私有属性 加#

class cls{
    name
    #age
    #height
    constructor(name,age,height) {
        this.name=name
        this.#age=age
        this.#height=height
    }
    fun(){
        console.log(this.#age)
        console.log(this.#height)
    }
}
let clss=new cls("gxs",21,1.75)
console.log(clss.height)
console.log(clss)
console.log(clss.name)
clss.fun()

2. 新属性
   • allSettled（[promise,promise1]）（无论成功与否都返回成功！）
   • promise all（只有都成功才返回成功的值）更 多可以去我博客搜Promise入门
3. es11 可选链操作符 参数?.(?.表示判断前面的有没有值)

let user = {
  obj1: {
  }
}
console.log( user?.obj1?.name); undefined 不报错

4. 短路效应

• 短路效应：正如前面所说的，如果 ?. 左边部分不存在，就会立即停止运算（“短路效应”）。所以，如果后面有任何函数调用或者副作用，它们均不会执行。
  这有和 && 的作用类似，但上述改用 && 会显得代码冗余度高：
console.log(user && user.address && user.address.street)

5. 其它变体：?.()，?.[]

• 可选链 ?. 不是一个运算符，而是一个特殊的语法结构。它还 可以与函数和方括号一起使用。
  例如，将 ?.() 用于调用一个可能不存在的函数（即使不存在也不报错）。

function foo() {
  console.log('hello')
}
foo?.()
// hello
* ?.[] 允许从一个可能不存在的对象上安全地读取属性。（即使不存在也不报错）。
```javascipt
let obj = {
  key: 123
}
console.log(obj?.['key'])
// 123

6. 动态 import 导入

const btn = document.getElementById('btn');

btn.onclick = function(){
  import('./hello.js').then(module => {
    module.hello();
}

7. BigInt

• BigInt 是一种特殊的数字类型，它提供了对任意长度整数的支持。
• 创建 bigint 的方式有两种：在一个整数字面量后面加 n 或者调用 BigInt 函数，该函数从字符串、数字等中生成 bigint。

let n1 = 123n
let n2 = 456n
let n3 = BigInt(789)
console.log(typeof n1) // bigint
console.log(n1+n2) // 579n
console.log(n2+n3) // 1245n

比较运算符：

• 例如 < 和 >，使用它们来对 bigint 和 nu`mber 类型的数字进行比较没有问题

alert( 2n > 1n ); // true
alert( 2n > 1 ); // true

• 但是请注意，由于 number 和 bigint 属于不同类型，它们可能在进行 == 比较时相等，但在进行 ===（严格相等）比较时不相等：

alert( 1 == 1n ); // true
alert( 1 === 1n ); // false

8. globalThis

• 全局属性 globalThis 包含全局的 this 值，类似于全局对象（在任何地方调用都指向Wndow global object）。

点击
let but=document.getElementById('but');
but.οnclick=function (){
    console.log(this);
    console.log(globalThis)
}

总结

以上是个人学习Es6~Es11的相关知识点，一点一滴的记录了下来，有问题请评论区指正，共同进步，这才是我写文章的原因之，如果这篇文章对您有帮助请点个赞