目录
ES6 引入新的声明字符串的方式——模板字符串[``] '' ""
ES8对象方法的扩展——Object.values和Object.entries
ES10 字符串方法扩展trimStart与trimStart
ES10 symbol.prototype.description
ES11 String.prototype.matchAll()
ES11 动态import 即 按需加载，可实现import的懒加载效果
引言
这篇笔记是在b站上，看尚硅谷的课程，主讲老师是李强老师，主讲的是《尚硅谷Web前端ES6教程，涵盖ES6-ES11》，以下是我的ES6学习笔记，如有不对之处，请多指正，大家相互学习，共同进步......
let声明变量的规则
1.let声明的变量不能重复声明 但是var就没有这个问题
2.let 是块级作用域 全局 函数 eval 但是var则是全局变量
这里的块级作用域是指 if else while for 等{}中的作用域
3.let 定义的变量,不存在变量提升 但是var可以，如果是var定义的话则会显示undefined
4.不影响作用域链
const声明变量的规则
1.const 是声明和定义常量的，声明时一定要赋初始值
2.一般常量使用大写(潜规则)，常量的值是不能修改的
3.const定义的常量也是块级作用域
4.对于数组和对象的元素修改，不算做对常量的修改
5一般在定义数组 或是 对象时都定义为const形式，防止误改、数据污染
变量的解构赋值
ES6 允许按照一定模式从数组和对象中提取值对变量进行赋值。 这被称为 解构赋值
ES6 引入新的声明字符串的方式——模板字符串[``] '' ""
1.``再模板字符串中可以直接出现换行
2.变量拼接
let lovest = 'JIAJIA';
let out = `${lovest}是我最喜欢的小美女`;ES6 箭头函数
1.this是静态的，this始终指向 函数声明 时所在作用域下的this的值（大多数情况this都是指window）
2.箭头函数 不能作为构造器，实例化对象
3.箭头函数 不能使用arguments 变量
4.箭头函数的简写
1)省略小括号，当形参有且只有一个的时候
2)省略花括号，当代码体只有一条语句的时候，此时 return 也要省略 即语句的执行结果就是函数的返回值
箭头函数 适合 与this无关的回调。 例如：定时器、数组方法回调
箭头函数 不适合 与this有关的回调。 例如：实践回调，对象的方法
ES6 rest参数
rest参数，用于获取函数的实参，用来代替arguments （rest参数必须放在参数最后）
rest 与 arguments不同之处在于 返回的结果不同 前者返回的是 “数组”；后者返回的是“对象”
ES6 扩展运算符 ...
[...] 扩展运算符能将 [数组] 转化为<逗号>分割的 [参数序列];(扩展运算符和rest参数很像，但是rest的<...>是在函数的<形参>中，扩展运算符是在调用函数的<实参>里)
扩展运算符的应用:
1.数组合并
2.数组克隆 (若拷贝目标中有<对象>,则是浅拷贝)
3.将为数组转为真正的数组
ES6 Symbol
Symbol 是ES6引入的一种新的原始数据类型；表示独一无二的值。它是JavaScript语言的第七种数据类型，是一种类似于字符串的数据类型
Symbol 特点：
1)Symbol 的值是唯一的，用来解决命名冲突的问题
2)Symbol 值不能与其他数据进行运算(比较 和 字符串的拼接 都不可以)
3)Symbol 定义的对象属性不能使用 for...in 循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名
Symbol 的两种创建方式
let s = Symbol();
let b = Symbol.for('xxx');第一种创建方式的得到的结果 永远不相同 即： Symbol('佳佳') !== Symbol('佳佳');
第二种创建方式的得到的结果 相同 即： Symbol.for('佳佳') === Symbol.for('佳佳')
ES6 Symbol内置属性： 扩展对象功能
JavaScript的七种数据类型：
USONB <you are so niubility >
U undefined
S String Symbol
O object
N null number
B boolean
ES6 迭代器
迭代器(Iterator)是一种接口<指的是 对象 中的一个属性Symbol.iterator>，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作。
1)ES6 创造了一种新的遍历命令 for...of循环。Iterator接口主要供for...of消费
2)原生具备iterator接口的数据(可用for...of遍历)
Array、Arguments、Set、Map、String、TypedArray、NodeList
ES6 生成器
生成器函数(一种特殊的函数) 是ES6提供的一种 <异步编程解决方案>，语法行为与传统函数完全不同
<!-- 异步编程 --> 文件操作 网络操作(ajax,爬虫request) 数据库操作
yield 可作为代码的分隔符
yield 函数代码的分隔符 有next()函数调用 一下yield用分为5块
生成器的创建及调用：
function * gener() {
yield '两只老虎,两只老虎'; //一块
yield '一直没有耳朵';//二块
yield '一直没有尾巴';//三块
yield '真奇怪,真奇怪...';//四块
//五块
}
let iterator = gener();
console.log(iterator.next());
生成器 中的调用 生成器函数时，next方法中可传入参数，next中传入的 [参数] 可作为上一个yield的返回结果.
Promise
Primise 是ES6引入的异步编程的新解决方案。语法上Promise是一个构造函数，用来封装 异步操作 并可以获取 成功或失败的 结果
1)Promise 构造函数：Promise(excutor){}
2)Promise.prototype.then 方法
3)Promise.prototype.catch 方法
<script>
//实例化 Promise对象
const p = new Promise(function(resolve,reject) {
// 如果成功则调用 resolve方法
// let data = '数据库中的用户数据读取成功...'
// resolve(data);
// 如果失败则调用 reject方法
let data = '数据库中的用户数据读取异常...'
reject(data);
},1000);
//调用 Promise 对象的 then方法; 默认情况下then的两个回调函数中第一个参数为value的接受的是成功 另一个参数为reason的处理的是失败的
p.then(function(value){
console.log(value);
},function(reason){
console.error(reason);
})
</script>Promise-then方法
在调用then方法时， then方法的返回结果是Promise 对象，这个 结果对象状态 是由回调函数的执行结果决定的。即：
1)如果回调函数中返回的结果是 <非>Promise 类型的属性，状态为成功，返回值为对象的成功值
2)如果回调函数中返回的结果是 Promise 对象， 则状态要看返回的Promise对象是什么resolve还是reject，如果为resolve则成功，否则失败
3)抛出错误 throw new Error('出错啦'); 不管抛出的是什么类型的错误，状态都为失败，返回值为对象的失败值
Promise-catch方法
Promise-then方法可链式调用，Promise-catch方法是Promise-then的一种简练形式，它只处理状态为失败的时候。
Set
ES6提供了新的数据结构Set(集合)。它类似于数组，但是成员的值都是唯一的，集合实现了iterator接口，所以可以使用 [扩展运算符] 和 [for...of..] 进行遍历。
集合的属性和方法：
1)size(属性) 返回集合元素个数
2)add 增加一个新元素，返回当前集合
3)delete 删除元素，返回boolean值
4)has 检测集合中是否包含某个元素，返回boolean值
5)clear 清空集合
Map
ES6提供了Map数据结构，他类似于对象，也是键值对的集合。但是'键'的范围不限于字符串，各种类型的值(包括对象)都可以当作键。Map 也实现了iterator接口，所以可以使用 [扩展运算符] 和 [for...of]进行遍历。Map的属性和方法。
1)size 返回Map的元素个数
2)set 增加一个新元素，返回当前Map
3)get 返回键名对应的键值
4)has 检测Map中是否包含某个元素，返回boolean值
5)clear 清空集合，返回undefined
class类
ES6提供了更接近传统语言的写法，引入了Class(类)这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6的class可以看作只是一个语法糖，他的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面型对象编程的语法而已。
知识点：
1)class声明类
2)constructor 定义构造函数
3)extends 继承父类
4)super 调用父级构造函数
5)static 定义静态方法和属性 这里的静态对象是属于 [类] 但不属于 [实例对象]
6)父类方法可以重写 ***可完全重写，但是子类不能且不允许通过super()调用父类方法
class中的getter和setter的设置:
get 属性名(){return 属性值} 动态绑定属性值
set 属性名(要更改的参数值){} 动态设置属性值
数值扩展
1.Number.EPSILON 是 JavaScript表示的最小精度
EPSILON接近的数值很小，通常用在 浮点数是否相等 的判断中
如果两个浮点数相减的结果小于EPSYLON，则认为他们相等
2.二进制0b、八进制0o、十六进制0x
3.Number.isFinite() 检测一个数值是否为有限数
4.Number.isNaN() 检测一个数值是否为 NaN
5.Number.parseInt()、Number.parseFlaor()将一个字符串转化为整数、浮点数
6.Number.isInteger() 判断一个数是否为整数
7.Math.trunc() 将小数部分抹去
8.Math.sign() 判断一个数到底为正数(返回1)、负数(返回-1)还是零(返回0)
对象方法扩展
1.Object.is(xxx,xxx) 判断两个值是否完全相等
2.Object.assign(xxx,xxx) 对象的合并
3.Object.setPrototypeOf(xxx,xxx) 设置原型对象 (一般不提倡使用，效率低)
3.Object.getPrototypeOf(xxx) 获取原型对象值 (一般不提倡使用，效率低)
模块化
模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。
模块化的优势：
1)防止命名冲突
2)代码复用
3)高维护性
ES6模块化语法
模块功能主要由两个命令构成：export和import
export命令用于规定模块的对外接口
import命令用于输入其他模块提供的功能
export暴露方式有三种：
分别暴露：export+代码
统一暴露：export{变量名，函数名,...}
默认暴露：export default{xxxx,xxx,....}
import引入方式：
1.通用方式：import * as 模块名 from '模块路径'
2.解构赋值形式：import {变量名，函数名} from '模块路径'(分别暴露和统一暴露) import {default as 模块名} from '模块路径'
3.简便形式(针对 默认暴露)：import 模块名 from '模块路径'
浏览器使用ES6模块化方式二
新建一个app.js,在app.js中去引入模块，然后再.html中写:<script scr='xxx/xxx/app.js' type='module'></script>
babel对ES6模块化代码的转换及打包
1.安装工具 babel-cli babel-preset-env browserify(webpack)
2.npx babel xxx/xxx -d dist/js(如果安装工具时是局部安装就用这条命令，全局安装直接babel xxx/xxx -d dist/js)
3.打包 npx browserify dist/js/app.js -o dist/bundle.js(如果安装工具时是局部安装就用这条命令，全局安装直接browserify dist/js/app.js -o dist/bundle.js)
ES6模块化与npm包的结合使用（步骤）
1.下载模块(nmp i 模块名)
2.import 变量名 from 包名/模块名
ES7-ES11的新特性
ES7 新特性
Array.prototype.includes 方法用来检测数组中是否包含某个元素，返回布尔类型值。
指数操作符 在ES7中引入指数操作符 【**】，用来实现幂运算功能与Math.pow结果相同。
ES8新特性
1.async和await
async函数
1.async函数的返回值为promise对象
2.promise对象的结果由async函数执行的返回值决定
async返回的结果：
1.只要返回的结果不是一个Promise 类型的对象，那么，async的结果都是一个成功的promise对象
2.如果抛出错误，则返回的结果是一个失败的Promise
3.如果返回的结果是一个Promise对象，那么结果取决于这个Promise对象的值
2.await表达式
1.await必须写在async函数中 (但是async中可以没有await)
2.await右侧的表达式一般为promise对象
3.await返回的是promise成功的值
4.await的promise失败了，就会抛出异常，需要通过try...catch捕获处理
ES8对象方法的扩展——Object.values和Object.entries
1.Object.values()方法返回一个给定对象的所有可枚举属性值的数组 (就是返回字典中的键值)
2.Object.entries()方法返回一个给定对象自身可遍历属性[key,value] 的数组 （就相当于是获取字典中的一整个条目,方便创建Map对象）
3.Object.getOwnPropertyDescriptors()该方法返回指定对象所有自身属性的描述对象。（方便深克隆对象）
ES9新特性
ES9 扩展运算符和rest参数
Rest 参数与 spread 扩展运算符在 ES6 中已经引入
不过ES6中只是针对于数组
在ES9 中为对象提供了像数组一样的rest 参数和扩展运算符
ES9 正则扩展——命名捕获分组
<script>
//声明一个字符串
let str = '<a href="http://www.baidu.com">百度</a>'
// 提取url 与 标签文本
// const reg = /<a href="(.*)">(.*)<\/a>/
//执行 原始
// const result = reg.exec(str);
// console.log(result);
// console.log(result[1]);
// console.log(result[2]);
//命名 分组groups
const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/
const result = reg.exec(str);
console.log(result)
console.log(result.groups.url)
console.log(result.groups.text)
</script>ES9 正则扩展——反向断言
<script>
let str = 'JS5211314你晓呆吗5555呜呜呜';
//正向断言 取5555
// reg = /\d+(?=呜)/
// const result = reg.exec(str);
// console.log(result);
// 反向断言
reg = /(?<=吗)\d+/;
let result = reg.exec(str);
console.log(result);
</script>
ES9 正则扩展——dotAll模式
<script>
//dot 有 . 的意思 而.在正则里表示 元字符（除换行符以外的任意单个字符）
let str = `
<ul>
<li>
<a>肖生克的救赎</a>
<p>上映时间:1994-09-10</p>
</li>
<li>
<a>阿甘正传</a>
<p>上映时间:1994-20-10</p>
</li>
</ul>`;
// 声明正则
// const reg = /<li>\s+<a>(.*?)<\/a>\s+<p>(.*?)<\/p>/
// const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/s //这样表示可匹配所有 字符包括换行符
const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs //这样表示可匹配所有 字符包括换行符 g表示全局匹配，利用循环得到结果
let result;
let data = [];
while(result = reg.exec(str)){
data.push({title:result[1],time:result[2]})
}
console.log(data);
</script>ES10新特性
ES10 对象扩展方法Object.fromEntries
Object.fromEntries 和 Object.entries是逆运算，Object.entrise是将对象转换为数组，而Object.fromEntries则是将数组转化为对象。
ES10 字符串方法扩展trimStart与trimStart
trimStart是去除字符串左侧空格，trimEnd是去除字符串右侧空格。
ES10 数组方法扩展flat与flatMap
flat可译为：平 ；能将 多位数组 转化为 低位数组；如果传参，那么参数位数字，这个数字为转化的深度
flatMap是一个符合操作，可以将Map方法生成的多维数组 转化为 一维数组
<script>
// const arr1 = [1,2,3,4,5,[6,8,5]];
// console.log(arr1.flat());
const arr2 = [1,2,3,4,5,[6,8,5,[8,9,10,11]]];
console.log(arr2.flat(2));
const arr1 = [1,2,3,4,5]
// const arr3 = arr1.map(item => item*10) // [10, 20, 30, 40, 50]
const arr3 = arr1.flatMap(item => [item*10])
console.log(arr3);
</script>ES10 symbol.prototype.description
Symbol对象的description属性可以获得Symbol对象的值；即：
let s = Symbol（“肖佳佳”）
console.log(s.description) //的值是 肖佳佳ES11 的私有属性 前要加 # 来区分，私有属性只能在类里面使用，不能用 实例化的对象 直接调用
ES11 Promise.allSettled() 接收的是一个 Promise对象数组 ； 返回的结果永远是Promise对象状态永远是resolve，该结果是数组中的Promise值的返回结果状态+值
ES11 Promise.all() 接收的是一个 Promise对象数组 ； 返回的结果永远是Promise对象状态和数组中的Promise对象的状态有关，只有数组中的Promise对象的状态都为成功时，它的返回结果状态才是成功，否则就是失败。
ES11 字符串方法扩展 String.prototype.matchAll() 该方法是用来得到 正则批量的匹配的结果
ES11新特性
ES11 String.prototype.matchAll()
<script>
let str = `
<ul>
<li>
<a>肖生克的救赎</a>
<p>上映时间:1994-09-10</p>
</li>
<li>
<a>阿甘正传</a>
<p>上映时间:1994-20-10</p>
</li>
</ul>`;
const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/sg
let result = str.matchAll(reg);
const arr = [...result]
console.log(arr)
</script>
ES11 可选链操作符 ?.
?. 是用来判断对象的层级属性是否存在
<script>
function main(config) {
// 不用可选操作符？.
// const dbHost = config && config.db && config.db.host
const dbHost = config?.db?.host //这两条语句 等价
console.log(dbHost);
}
main({
db:{
host:'127.0.0.1:8000',
username:'jiajia'
},
dba:{
username:'xiaojiajia',
password:'123456'
}
})
</script>ES11 动态import 即 按需加载，可实现import的懒加载效果
ES11的动态import就是不在开头引入，是在需要引入时调用import方法，这个方法返回的是一个Promise对象，可通过这个Promise对象调用模块方法。import(传入的是模块路径).then(module=>{module.hello()});
ES11 BigInt类型
1.在整型数字后面加个n，或是直接用BigInt(整数)，将整数转换为大整形。BigInt类型主要是用作 大整数运算。
633
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
