Es6学习回顾（非完整版）
本文章主要是基于尚硅谷（https://www.bilibili.com/video/BV1uK411H7on?p=14）讲的知识点中不熟悉的部分进行快速回顾
参考文章：https://es6.ruanyifeng.com/#docs/let
对象的结构赋值
数组：
let arr = [1,2,3,2];
let [yl,hh,tang,h] = arr;
console.log(yl); //1
对象：
let obj = {a:1, b:2};
let {a,b} = obj; //必须与obj的key相同
let {a1,b1} = obj; //失效
console.log(a); //1,简化代码，避免写obj.a
结合函数默认值一起用：
function fun({user,pass}) {
console.log(user); //输出yl, 省略形参写obj，然后obj.user
console.log(pass);
}
fun({
user:'yl',
pass:'123'
})
rest参数 …args
存储函数的参数
Es5用法：arguments；存储类型为object
Es6用法：…args; 存储类型为array
function fn(a,b,...args) {
console.log(args); //[3, 4, 5], 注意args为函数内部方法，外部访问不到
};
fn(1,2,3,4,5);
- ES9中对象也可用rest参数和…
扩展运算符 …
- 数组合并
let a = [1,2], b = [3,4];
let c = [...a, ...b]; //[1,2,3,4]，同concat
- 数组拷贝
非引用类型可以实现深拷贝，若嵌套引用类型的话 还是浅拷贝。
a[0] = 2;
console.log(c); //[1,2,3,4]
- 转换伪数组
let divs = document.querSelectorAll('div'); //拿到所有div标签，此时divs为对象（伪数组）
let divArr = [...divs];
console.log(typeof divArr); //Array, 此时就可以用数组方法操作了
新增数据类型 Symbol
两种创建方法
let s = Symbol("yl");
let s1 = Symbol("yl");
s === s1; //false
let s2 = Symbol.for("yl");
let s3 = Symbol.for("yl");
s2 === s3; //true
//不可和数组 运算，对比，拼接
let s4 = s +100; //报错
BigInt (ES11)
大整数，场景：更大的数值运算
let n = 521n; //数字后加 n 即可
console.log(n,typeof n); //521n "bigint"
//转换
let n1 = 521;
console.log(BigInt(n)); //521n，注意不可转浮点型数字 如5.2
//大数值运算
let max = Number.MAX_SAFE_INTEGER; //最大安全整数
console.log(max); //9007199254740991
console.log(max+2); //之后的运算会出错
//BigInt类型不可与普通类型运算
console.log(BigInt(max) + BigInt(2)); //正确
迭代器Iterator
具备此接口，可以遍历 (使用for…of…)
具备此接口的数据：Array, Arguments, Set, Map, String, TypeArray, NodeLIst。作为对象的一个属性
let arr = ['yl', 'tang', 'haha'];
for(v of arr){
console.log(v); //yl tang haha v为value
}
for(v in arr){
console.log(v); //0 1 2 v为key
}
不携带此属性的数据类型 如对象，也可以自定义[Symbol.iterator]添加属性来使用for…of遍历
生成器
一种函数，实现异步，为纯回调函数，相同的有 node, fs, ajax, mongodb
function * gen(){
console.log("hi generator");
yield 111;
}
let iterator = gen(); //生成器函数的调用比较特殊
console.log(iterator); //该函数实际上是一个迭代器
iterator.next(); //hi generator 需通过next方法执行函数
// {value: 111, done: false}
// 配合yield分割 生成器函数，类似打断点，然后next()
// next可传实参，作为前一个yield的返回结果
应用
实现异步编程，解决回调地狱；场景：文件操作，读取数据库
1s后输出111，再过2s输出222，再过3s输出333
//以前需嵌套定时器完成
function one(){
setTimeout(()=>{
console.log(111);
iterator.next(); //关键，不然会停在这里
},1000)
}
function two(){
setTimeout(()=>{
console.log(222);
iterator.next();
},2000)
}
function three(){
setTimeout(()=>{
console.log(333);
iterator.next();
},3000)
}
function * gen(){
yield one(); //分割生成器函数，next()继续
yield two();
yield three();
}
//调用生成器函数
let iterator = gen();
iterator.next();
Promise
一种构造函数，实现异步
//实例化Promise对象
let p = new Promise(function(resolve,reject) { //两个参数，请求成功和失败
setTimeout(function() { //定时器模拟请求
let data = '数据库中的数据';
resolve(data); //通过调用resolve来改变Promise的状态
//let err = '数据读取失败';
//reject(err);
},1000)
})
//调用Promise对象的then方法，传两个函数，根据Promise的状态来选择回调哪一个
// then方法的返回结果也是Promise对象，若return非Promise类型，则为resolve成功状态
// 可以链式调用 p.then(value=>{}).then(value=>{}, reason=>{}), 解决回调地狱
p.then(value => {
//console.log(value); //数据库中的数据
//return new Promise((resolve,reject)=>{reject('error')}) //是Promise，且失败状态
throw new Error("出错啦！！"); //可用于抛出错误
}, reason => {
console.error(reason); //失败也可用p.catch代替then，只需要传请求失败的函数
})
配合then方法的链式调用，场景：读取多个文件，then()中return一个Promise对象
- Promise封装读取文件（使用nodeJS）
readFile
- Promise封装Ajax请求（使用nodeJS）
以前这样用：
//1.创建对象
const xhr = new XMLHttpRequest();
//2.初始化
xhr.open("GET","url"); //URL为接口地址
//3.发送
xhr.send(); //发送GET请求
//4.绑定事件，处理响应结果
xhr.onreadystatechange = function() {
if(xhr.readyState === 4){
//判断响应状态码 200-299
if(xhr.status >=200 && xhr.status <300){
//表示成功
conosle.log(xhr.response);
}else console.error(xhr.status)
}
}
Promise封装后：
const p = new Promise((resolve,reject) => {
//1.创建对象
const xhr = new XMLHttpRequest();
//2.初始化
xhr.open("GET","url"); //URL为接口地址
//3.发送
xhr.send(); //发送GET请求
//4.绑定事件，处理响应结果
xhr.onreadystatechange = function() {
if(xhr.readyState === 4){
//判断响应状态码 200-299
if(xhr.status >=200 && xhr.status <300){
//表示成功
resolve(xhr.response); //通过调用resolve来改变Promise的状态为请求成功
}else reject(xhr.status); //请求失败
}
}
})
p.then((value) => {
console.log(value); //成功回调
},(reason) => {
console.error(reason); //请求失败
})
Set
可用API：add, delete, clear, size, has, for…of…
求交集
let arr = [1,2,3,4,5,5,4,6,3,2,1];
let arr2 = [4,5,6,5];
let res = [...new Set(arr)].filter(v => { //数组去重
//数组的filter方法，遍历每一个value，若满足函数条件则返回true，保留
new Set(arr2).has(v); //为true，则保留
})
console.log(res); //4 5 6
//小技巧：Set对象转数组，[...new Set()]
Map
升级版对象，差别就是key可以是对象
可用API：set(添加元素), delete, clear, size, get(查找key/val), for…of…
Class类
构造函数的语法糖，为了让程序更像面向对象
以前的写法：
function Person(name, age) {
this.name = name;
this.age = age;
}
//添加方法。注意：创建的实例只可访问其原型上的属性和方法，直接挂在类上不可访问
Person.call1 = function() {console.log(111)}; //call1可称为静态属性，其实例上没有
Person.prototype.call = function() { //添加方法正确姿势
console.log("hi!");
}
//实例化对象/ 创建实例
let per = new Person('yixuan',18);
console.log(per); //Person {name: "yixuan", age: 18}
Class的写法：
class Person1{ //关键字class + 类名
//静态属性，其实例上不可访问
static call1() {
console.log(111);
}
//构造方法 特殊的方法，名字不可修改，new时自动执行
constructor(name, age) {
this.name = name;
this.age = age;
}
call() { //方法必须这么写
console.log("hi!");
}
}
let per1 = new Person1('yixuan',18);
console.log(per1); //Person1 {name: "yixuan", age: 18}
继承
以前构造函数的继承：
function College(name, age, gender) { //创建子类
Person.call(this,name,age); //直接添加父类属性
this.gender = gender;
}
//设置子类构造函数的原型
College.prototype = new Person; //这样可以访问call1了
College.prototype.constructor = College; //可以不写
let per2 = new College("tang",18,"女");
console.log(per2); //College {name: "tang", age: 18, gender: "女"}
Class类的继承：
class College1 extends Person {
constructor(name, age, gender){
super(name, age); //同 Person.call(this,name,age)
this.gender = gender;
}
//其他独有方法，也可以重写
}
let per3 = new College("tang",18,"女");
console.log(per3); //College {name: "tang", age: 18, gender: "女"}
Class的get和set
class Person2{ //可以不加构造方法
get hello() {
console.log("hello属性被读取了");
return "hahha"
}
set hello(newVal) {
console.log("hello属性被修改了");
}
}
//实例化对象
let p = new Person2();
//console.log(p.hello); //hello属性被读取了 hahha被赋给了这个实例的属性
//只要访问这个方法，就会执行这个函数里面的代码
p.hello = 'hi';
使用场景 get：对象的属性是动态的； set：添加判断等操作
数值扩展
Number.EPSILON, Number.isFinite, Number.isNaN, Number.parseInt, Number.parseFloat,
Number.isInteger, Math.trunc, Math.sign
对象扩展
Object.is(NaN, NaN); //true 判断两个值是否完全相对
Object.assign( obj1, obj2) 对象的合并，重复属性obj2会覆盖obj1
Object.setProtoTypeOf 设置原型对象，不建议
模块化
script标签内加 type=“module”
export三种方法，import三种方法（1.通用import * as m1 from ‘url’；2.解构赋值import {default as m2} from ‘url’；3.简便形式import m3 from ‘url’）
babel转换器（46课）
将ES6等转成ES5语法，解决浏览器兼容，再打包引入
工具：babel-cli、babel-prest-env(代码转换)、 browserify(打包工具/webpack)
代码转换：npx babel scr/js -d dist/js
打包：npx browserify dist/js/app.js -o dist/bundle.js 输出位置
另外，引入jquery可以导入npm包，最好还是使用webpack
ES7
- arr.includes(value); //true/ false; 取代indexOf(返回下标，不存在则返回-1)
- 2 ** 10 //幂运算，二的十次方，同Math.pow(2,10)
ES8
- async和await
- 对象的方法：Object.keys(), .values(), entries()对象转二维数组, getOwnPropertyDescriptors()
ES9
正则扩展：命名捕获分组（如分组url和字符串），反向断言（正向断言：根据后面的内容判断条件），dotAll模式（如提取html标签中的内容，解决换行）
ES10
- 对象扩展：Object.fromEntries() 创建二维数组（第一个是key, 第二个是value）
- 字符串扩展：(在ES5中有 trim 清除字符串两边的空白字符) trimStart清除左侧空白，trimEnd清除右侧空白。
- 数组扩展：flat 将 多维 转 低维数组，可传深度参数；flatMap
ES11
- 私有属性：在class类中写，属性前面加 #，私有属性在class类外部无法访问，只能通过类的方法访问
- Promise.allSettled永远是成功状态，存储每个Promise对象异步任务的值和状态。
类比Promise.all，接收Promise对象，如果都成功才成功，有一个失败则失败。
const p1 = new Promise((resolve,reject) => {
setTimeout(() => {
resolve('商品数据 -1');
},1000)
});
const p2 = new Promise((resolve,reject) => {
setTimeout(() => {
resolve('商品数据 -2'); //成功
//reject('出错啦！')
},1000)
});
const res = Promise.all([p1,p2]);
console.log(res);
- 字符串扩展：matchAll 高效提取页面内容
- ?.可选链操作符， 场景：提取深层嵌套对象中的某个值，即使不存在也不会报错
- 动态import：实现按需加载（懒加载）import函数——import(‘url’) .then()
- globalThis：this始终指向window全局对象