ES6学习笔记

ES6学习笔记

1 let 关键字

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

1. 不允许重复声明
2. 块儿级作用域
3. 不存在变量提升
4. 不影响作用域链
   应用场景：以后声明变量使用 let就对了

2 const关键字

const 关键字用来声明常量， const声明有以下特点：

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

3 变量的解构赋值

​ 解构赋值是一种表达式，允许您使用数组或对象，将可迭代对象的值或属性分配给变量。解构赋值能让我们用更简短的语法进行多个变量的赋值，大大的减少了代码量。解构表达式有两种：array和object。

​ 对象解构赋值的键名对应很重要，不然会找不到。因为对象是无序的，必须通过键名来识别

​ 注意：频繁使用对象方法、数组元素，就可以使用解构赋值形式

const {data:res} = await this.$http.get('menus')
// 右边的await得到的 data 赋值给 res

4 模板字符串

​ 模板字符串（template string）是增强版的字符串用反引号（`）标识，特点：

​ 1) 字符串中可以出现换行符

​ 2) 可以使用 ${xxx} 形式输出变量 // 注意：当遇到字符串与变量拼接的情况使用模板字符串

let a = 12
let str1 = `asdf${a}`
console.log(str1)

let title = '标题'
let content = '内容'
let str = `<div>
<h1>${title}</h1>
<p>${content}</p>
`
console.log(str)
<div>
<h1>标题</h1>
<p>内容</p>

​ 字符串多了两个新方法

• startsWith
• endsWith

var url = 'http://qq.com'
console.log(url.startsWith('http'))
console.log(url.endsWith('com'))
// 都是 true

5 箭头函数

ES6 允许使用 「 箭头 」 （=>）定义函数 。

let fn = (arg1, arg2, arg3) => { 
	return arg1 + arg2 + arg3;
}

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

摘要：箭头函数有几个使用注意点。

​ （1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象，箭头函数继承而来的this指向永远不变。

​ （2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

​ （3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。

​ （4）不可以使用yield命令，因此箭头函数不能用作Generator函数。

​ （5） 没有原型prototype

​ 箭头函数没有自己的this，它会捕获自己在定义时（注意，是定义时，不是调用时）所处的外层执行环境的this，并继承这个this值。所以，箭头函数中this的指向在它被定义的时候就已经确定了，之后永远不会改变。

.call()/.apply()/.bind()方法可以用来动态修改函数执行时this的指向，但由于箭头函数的this定义时就已经确定且永远不会改变。所以使用这些方法永远也改变不了箭头函数this的指向

注意：箭头函数不会更改this指向，用来指定回调函数会非常合适

6 rest参数

​ ES6引入 rest参数，用于获取 函数的实参，用来代替 arguments

​ rest参数声明： (. . . 标识符)

	区别：arguments得到的是对象，rest得到的是数组，就可以用到数组的方法，例如: filter、some、every、map

/** 
	* 作用与 arguments 类似 
*/ 
function add(...args){
	console.log(args); 
} 
add(1,2,3,4,5); 

/** 
	* rest 参数必须是最后一个形参 
*/ 
function minus(a,b,...args){ 
	console.log(a,b,args); 
}
minus(100,1,2,3,4,5,19);

注意：rest参数非常适合不定个数参数函数的场景

7 spread扩展运算符

​ 扩展运算符（spread）也是三个点 （…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包。

​ 应用： 数组的合并、数组的克隆、将伪数组转为真正的数组

/** 
	* 展开数组 
*/ 
let tfboys = ['德玛西亚之力','德玛西亚之翼','德玛西亚皇子']; 
function fn(){ 
	console.log(arguments); 
} 
fn(...tfboys)  // 这里用在了函数的实参了，前面的rest参数是在形参

/** 
	* 展开对象 
*/ 
let skillOne = { q: '致命打击', }; 
let skillTwo = { w: '勇气' }; 
let skillThree = { e: '审判' }; 
let skillFour = { r: '德玛西亚正义' }; 
let gailun = {...skillOne, ...skillTwo,...skillThree,...skillFour};

// 将伪数组转为真正的数组

const divs = document.querySelectorAll('div')  // 是一个伪数组
const divArr = [...divs] // 转化为真正的数组

8 Symbol

​ ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。注: 遇到唯一性的场景时要想到 Symbol

补充：七种数据类型： USONB —> undefined、symbol、string、object、null、number、boolean

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

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

//添加标识的 Symbol 
let s2 = Symbol('尚硅谷'); 
let s2_2 = Symbol('尚硅谷'); 
console.log(s2 === s2_2); 

//使用 Symbol for 定义 
let s3 = Symbol.for('尚硅谷'); 
let s3_2 = Symbol.for('尚硅谷'); 
console.log(s3 === s3_2);

「Symbol内置值」

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

Symbol.hasInstance	当其他对象使用instanceof运算符，判断是否为该对象的实例时，会调用这个方法
Symbol.isConcatSpreadable	对象的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环境排除。

9 迭代器

​ 遍历器（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 属性的对象

应用示例：

// 声明一个对象
const banji = {
	name: "终极一班",
	stus: [
		'xiaoming',
		'xiaoning',
		'xiaotian',
		'knight'
	],
	[Symbol.iterator]() {
		// 索引变量
		let index = 0;
		// 保存this
		let _this = this;
		return {
			next: function() {
				if (index < _this.stus.length) {
					const result = {
					value: _this.stus[index],
					done: false
				};
				// 下标自增
				index++;
				// 返回结果
				return result;
				} else {
				return {
					value: undefined,
					done: true};
				}
			}
		};
	}}
// 遍历这个对象
for (let v of banji) {
console.log(v);
}

10 生成器

生成器函数是 ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同

function * gen(){ 
	yield '一只没有耳朵'; 
	yield '一只没有尾巴'; 
	return '真奇怪';
} 
let iterator = gen(); 
console.log(iterator.next()); 
console.log(iterator.next()); 
console.log(iterator.next());

代码说明：
1) * 的位置没有限制
2) 生成器函数返回的结果是迭代器对象，调用迭代器对象的next方法可以得到 yield语句后的值
3)yield 相当于函数的暂停标记，也可以认为是函数的分隔符，每调用一次next方法，执行一段代码
4) next方法可以传递实参，作为 yield语句的返回值

• generator 生成器函数
  • 普通函数，一路到底
  • generator函数，中间可以停，到哪停呢，用 yield 配合，交出执行权
  • yield 有 放弃、退让、退位的意思
  • 需要调用next()方法启动执行，需要遇到 yield 停, 踹一脚走一步
  • generator函数前面加一个 * 两边可以有空格，或靠近函数或function
  • 背后实际生成多个小函数，实现走走停停

function show() {
    console.log('a')
    console.log('b')
}
show() // 普通函数

function *show2() {
    console.log('1')
    yield
    console.log('2')
}
let genObj = show2()
genObj.next() // 1
genObj.next() // 2
genObj.next() // 最后了，没有结果

generator-yield是啥

• yield

  • 既可传参，又可以返回
  • 第一个next()传参无效，只用来启动

• 如果函数前漏掉 *

  • 就是普通函数
  • 如果有yield会报错， ReferenceError: yield is not defined
  • yield 只能在Generator函数内部使用

function * show() {
    console.log('1')
    var a = yield
    console.log('2')
    console.log(a)
}
// yield 传参
var gen = show()
gen.next() // 1
gen.next() // 2 和 undefined 因为没有传参，yield没有返回值
var gen = show()
gen.next(10) // 1 第一次执行到yield，但没有执行赋值
gen.next(20) // 2 和 20

function* show2() {
    console.log('1')
    yield 10
    console.log('2')
}
// yield 返回
var gen = show2()
var res1 = gen.next()
console.log(res1) // { value: 10, done: false }
var res2 = gen.next()
console.log(res2)
// { value: undefined, done: true } 最后的value需要return返回

11 Promise

​ Promise是 ES6引入的异步编程的 新解决方案 。语法上 Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。
​ 1) Promise构造函数 : Promise (excutor) {}
​ 2) Promise.prototype.then方法
​ 3) Promise.prototype.catch方法

• Promise 适合一次读一组
• generator 适合逻辑性的

12 Set

​ ES6 提供了新的数据结构 Set（集合) 。它类似于数组，但成员的值都是唯一的 ，集合实现了 iterator接口，所以可以使用『扩展运算符』和『 for…of…』进行遍历，集合的属性和方法：
​ 1) size 返回集合的元素个数
​ 2) add 增加一个新元素，返回当前集合
​ 3) delete 删除元素，返回 boolean 值
​ 4) has 检测集合中是否包含某个元素，返回 boolean值
​ 5) clear 清空集合，返回 undefined

13 Map

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

• map 映射 一个对一个

let m = new Map()  // 声明 Map
m.set('name','xxx')
m.delete('name')
m.get('name')


let arr = [12, 5, 8]
let result = arr.map(function (item) {
    return item*2
})
let result2 = arr.map(item=>item*2) // 简写
console.log(result)
console.log(result2)

let score = [18, 86, 88, 24]
let result3 = score.map(item => item >= 60 ? '及格' : '不及格')
console.log(result3)

// 结果
[ 24, 10, 16 ]
[ 24, 10, 16 ]
[ '不及格', '及格', '及格', '不及格' ]

• reduce 汇总 一堆出来一个
  • 用于比如，算个总数，算个平均

var arr = [1, 3, 5, 7]
var result = arr.reduce(function (tmp, item, index) {
    //tmp 上次结果，item当前数，index次数1开始
    console.log(tmp, item, index)
    return tmp + item
})
console.log(result)

var arr = [1, 3, 5, 7]
var result = arr.reduce(function (tmp, item, index) {
    if (index != arr.length - 1) { // 不是最后一次
        return tmp + item
    } else {
        return (tmp + item)/arr.length
    }
})
console.log(result)  // 平均值

• filter 过滤器 保留为true的

var arr = [12, 4, 8, 9]
var result = arr.filter(item => (item % 3 === 0) ? true : false)
console.log(result)
var result = arr.filter(item => item % 3 === 0)
console.log(result)

var arr = [
    { title: '苹果', price: 10 },
    { title: '西瓜', price: 20 },
]
var result = arr.filter(json => json.price >= 20)
console.log(result)

• forEach 循环迭代

var arr = [12, 4, 8, 9]
var result = arr.forEach(item => console.log(item))
var result = arr.forEach((item, index)=>console.log(item, index))

14 class 类

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

​ 知识点：
​ 1) class声明类
​ 2) constructor定义构造函数初始化
​ 3) extends继承父类
​ 4) super调用父级构造方法
​ 5) static定义静态方法和属性
​ 6) 父类方法可以重写

class中的getter和setter的设置

class Phone{
  get price(){   // 
    console.log("价格属性读取");
    return 'this is get return'
  }
  set price(newVal){   // set 必须要有一个值传入
    console.log("价格属性被修改")
  }
}

let s = new Phone();
// console.log(s.price);  // this is get return 
s.price = 'free'

• 原来写法
  • 类和构造函数一样
  • 属性和方法分开写的

// 老版本
function User(name, pass) {
    this.name = name
    this.pass = pass
}
User.prototype.showName = function () {
    console.log(this.name)
}
User.prototype.showPass = function () {
    console.log(this.pass)
}

var u1 = new User('able', '1233')
u1.showName()
u1.showPass()
// 老版本继承
function VipUser(name, pass, level) {
    User.call(this, name, pass)
    this.level = level
}
VipUser.prototype = new User()
VipUser.prototype.constructor = VipUser
VipUser.prototype.showLevel = function () {
    console.log(this.level)
}

var v1 = new VipUser('blue', '1234', 3)
v1.showName()
v1.showLevel()

• 新版面向对象
  • 有了 class 关键字、构造器
  • class 里面直接加方法
  • 继承，super 超类==父类

class User {
    constructor(name, pass) {
        this.name = name
        this.pass = pass
    }
    showName() {
        console.log(this.name)
    }
    showPass() {
        console.log(this.pass)
    }
}

var u1 = new User('able2', '111')
u1.showName()
u1.showPass()

// 新版本继承
class VipUser extends User {
    constructor(name, pass, level) {
        super(name, pass)
        this.level = level
    }
    showLevel(){
        console.log(this.level)
    }
    showName(){
        console.log('子类对父类同名方法的重写')  // 子类对父类同名方法的重写
    }
}

v1 = new VipUser('blue', '123', 3)
v1.showLevel()

15 数值扩展

「二进制和八进制」

​ ES6 提供了二进制和八进制数值的新的写法，分别用前缀 0b和 0o表示。

「Number.isFinite() 与 Number.isNaN()」

​ Number.isFinite() 用来检查一个数值是否为有限的
​ Number.isNaN() 用来检查一个值是否为 NaN

「Number.parseInt() 与 Number.parseFloat()」

​ ES6 将全局方法 parseInt和 parseFloat，移植到 Number对象上面，使用不变。

「Math.trunc」

​ 用于去除一个数的小数部分，返回整数部分。

「Number.isInteger」

​ Number.isInteger() 用来判断一个数值是否为整数

16 对象扩展

​ ES6新增了一些 Object对象的方法
​ 1) Object.is 比较两个值是否严格相等，与『 ===』行为基本一致（+0 与 NaN）
​ 2) Object.assign 对象的合并，将源对象的所有可枚举属性，复制到目标对象
​ 3) proto、 setPrototypeOf、 setPrototypeOf可以直接设置对象的原型

17 模块化

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

「模块化的好处」

​ 模块化的优势有以下几点：
​ 1) 防止命名冲突
​ 2) 代码复用
​ 3) 高维护性

「模块化语法」

​ 模块功能主要由两个命令构成：export和 import。
​ export命令用于规定模块的对外接口
​ import命令用于输入其他模块提供的功能

「ES6暴露数据语法汇总」

向外暴露方法：

// 分别暴露（导出）
export let school = "尚硅谷";
export function teach(){
	console.log("我们可以教你开发技术！");
}

// 统一暴露（导出）
let school = "尚硅谷";
function findJob(){
	console.log("我们可以帮你找到好工作！");
}
export {school,findJob}

// 默认暴露（导出）
export default{
	school : "尚硅谷",
	change : function(){
	console.log("我们可以帮你改变人生！");
	}
}

引入方法：

// 通用方式
// 引入m.js模块内容
import * as m from "./js/m.js";
console.log(m);
console.log(m.school);
m.teach();

// 引入n.js模块内容
import * as n from "./js/n.js";
console.log(n);
console.log(n.school);
n.findJob();

// 引入o.js模块内容
import * as o from "./js/o.js";
console.log(o);
// 注意这里调用方法的时候需要加上default
console.log(o.default.school);
o.default.change();

// 解构赋值形式
import {school,teach} from "./js/m.js";
// 重名的可以使用别名
import {school as xuexiao,findJob} from "./js/n.js";
// 导入默认导出的模块，必须使用别名
import {default as one} from "./js/o.js";

// 直接可以使用
console.log(school);
teach();
console.log(xuexiao);
console.log(one);
console.log(one.school);
one.change();

// 简便形式，只支持默认导出
import oh from "./js/o.js";
console.log(oh);
console.log(oh.school);
oh.change();

模块化的另一种方法：

模块化的另一种方法：  src 引入
<script src="./js/app.js" type="module"></script>

Babel对ES6模块化代码转换

Babel概述：

Babel 是一个 JavaScript 编译器；
Babel 能够将新的ES规范语法转换成ES5的语法；
因为不是所有的浏览器都支持最新的ES规范，所以，一般项目中都需要使用Babel进行转换；

第一步：安装工具babel-cli（命令行工具） babel-preset-env（ES转换工具） browserify（打包工具，
项目中使用的是webpack）；

// 使用babel转换
npx babel js（js目录） -d dist/js（转化后的js目录） --presets=babel-preset-env

// 打包
npx browserify dist/js/app.js -o dist/bundle.js

// 在使用时引入bundle.js
<script src="./js/bundle.js" type="module"></script>

18 ES7 新特性

「Array.prototype.includes」

​ Includes 方法用来检测数组中是否包含某个元素，返回布尔类型值

「指数操作符」

​ 在ES7中引入指数运算符「 **」，用来实现幂运算，功能与 Math.pow结果相同

19 ES8 新特性

「async和 await」

async函数

​ async函数的返回值为 promise对象，

	 promise对象的结果由 async函数执行的返回值决定

await表达式

​ await必须写在 async函数中

​ await右侧的表达式一般为 promise对象

​ await返回的是 promise成功的值

​ await的 promise失败了 , 就会抛出异常 , 需要通过 try…catch捕获处理

「Object.values和 Object.entries」

1. Object.values()方法返回一个给定对象的所有可枚举属性值的数组
2. Object.entries()方法返回一个给定对象自身可遍历属性 [key,value] 的数组

「Object.getOwnPropertyDescriptors」

​ 该方法返回指定对象所有自身属性的描述对象

20 JSON

• JSON 格式

  • JavaScript Object Notation 的缩写，是一种用于数据交换的文本格式
  • JSON 是 JS对象 的严格子集
  • JSON 的标准写法
  • 只能用双引号
  • 所有的key都必须用双引号包起来

• JSON 对象

  • JSON 对象是 JavaScript 的原生对象，用来处理 JSON 格式数据，有两个静态方法
  • JSON.parse(string) ：接受一个 JSON 字符串并将其转换成一个 JavaScript 对象。
  • JSON.stringify(obj) ：接受一个 JavaScript 对象并将其转换为一个 JSON 字符串。

var json = {a: 12, b: 5}
var str = 'hi,' + JSON.stringify(json)
var url = 'http://www.xx.com/' + encodeURIComponent(JSON.stringify(json))
console.log(str)
console.log(url)

var str = '{"a": 12, "b": 4, "c": "abc"}'
var json = JSON.parse(str)
console.log(json)
hi,{"a":12,"b":5}
http://www.xx.com/%7B%22a%22%3A12%2C%22b%22%3A5%7D
{ a: 12, b: 4, c: 'abc' }

• 对象（object）

  • 是 JavaScript 语言的核心概念，也是最重要的数据类型
  • 对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合
  • 对象的所有键名都是字符串, 所以加不加引号都可以
  • 如果键名是数值，会被自动转为字符串
  • 对象的每一个键名又称为“属性”（property），它的“键值”可以是任何数据类型
  • 如果一个属性的值为函数，通常把这个属性称为“方法”，它可以像函数那样调用
  • in 运算符用于检查对象是否包含某个属性（注意，检查的是键名，不是键值
  • for…in循环用来遍历一个对象的全部属性

• 对象 简写

  • key-value 一样时可以简写
  • 里面函数可以简写, 去掉

var a = 12, b = 5
console.log({a:a, b:b})
console.log({a, b})
console.log({a, b, c:"c"})
console.log({ a, b, show(){ console.log('a') }})
{ a: 12, b: 5 }
{ a: 12, b: 5 }
{ a: 12, b: 5, c: 'c' }
{ a: 12, b: 5, show: [Function: show] }

21 ES9 新特性

「正则表达式命名捕获组」

​ ES9允许命名捕获组使用符号 『 ?』 ,这样获取捕获结果可读性更强

let str = '<a href="http://www.atguigu.com">尚硅谷</a>'; 

const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/; 

const result = reg.exec(str); 

console.log(result.groups.url); 

console.log(result.groups.text);

「正则表达式反向断言」

//声明字符串 
let str = 'JS5211314你知道么555啦啦啦'; 

//正向断言 const reg = /\d+(?=啦)/; 
const result = reg.exec(str); 

//反向断言 const reg = /(?<=么)\d+/; 
const result = reg.exec(str); 
onsole.log(result);

「正则表达式 dotAll模式」

​ 正则表达式中点 . 匹配除回车外的任何单字符，标记 『 s』 改变这种行为，允许行终止符出现

let str = ` 
<ul> 
	<li> 
		<a>肖生克的救赎</a> 
		<p>上映日期: 1994-09-10</p> 
	</li> 
	<li> 
		<a>阿甘正传</a> 
		<p>上映日期: 1994-07-06</p> 
	</li> 
</ul>`; 

//声明正则 

const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs; 

//执行匹配 
const result = reg.exec(str); 
let result; 
let data = []; 
while(result = reg.exec(str)){ 
	data.push({title: result[1], time: result[2]}); 
} 
//输出结果 
console.log(data);

22 ES10新特性

「Object.fromEntries」

​ 概述：
​ 将二维数组或者map转换成对象；
​ 之前学的Object.entries是将对象转换成二维数组；

「trimStart 和 trimEnd」

​ 概述： 去掉字符串前后的空白字符；

「Array.prototype.flat 与 flatMap」

​ 概述：将多维数组转换成低维数组；

「Symbol.prototype.description」

​ 概述：获取Symbol的描述字符串；

23 ES11 新特性

「String.prototype.matchAll」

​ 概述：用来得到正则批量匹配的结果；

「类的私有属性」

​ 概述：私有属性外部不可直接访问 设置方法： # 属性名

「Promise.allSettled」

​ 概述：获取多个promise执行的结果集；

「可选链操作符」

​ 概述：如果存在则往下走，省略对对象是否传入的层层判断；

<html>
	<head>
		<meta charset="utf-8">
		<title>可选链操作符</title>
	</head>
	<body>
		<script>
		// 可选链操作符
		// ?.
		function main(config){
		// 传统写法
		// const dbHost = config && config.db && config.db.host;
		// 可选链操作符写法
		const dbHost = config?.db?.host;
		console.log(dbHost);
		}
		main({
			db:{
			host:"192.168.1.100",
			username:"root"
			},
			cache:{
			host:"192.168.1.200",
			username:"admin"
			}
		});
	</script>
	</body>
</html>

「动态 import 导入」

​ 概述：动态导入模块，什么时候使用时候导入；

// import * as m1 from "./hello.js"; // 传统静态导入
//获取元素
const btn = document.getElementById('btn');
btn.onclick = function(){
	import('./hello.js').then(module => {
		module.hello();
	});
}

//动态import加载html
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>动态 import </title>
</head>
<body>
	<button id="btn">点击</button>
	<script src="app.js" type="module"></script>
</body>
</html>

「BigInt」

​ 概述：更大的整数

「globalThis 对象」

​ 概述：始终指向全局对象window；