当前位置：码云笔记 > 前端 > 最全ES6-ES12新特性总结，再也不怕面试官问了
咸鱼妹咸鱼妹 前端

最全ES6-ES12新特性总结，再也不怕面试官问了

AI 概述
ES61. 新的声明方式：let1.1 不属于顶层对象 window1.2 不允许重复声明1.3 不存在变量提升1.4 暂时性死区1.5 块级作用域2. 新的声明方式：constlet VS const3. ==解构赋值（常用）==4. 数组的各种遍历方式ES5 中的数组遍历方式ES6 中数组遍历方法5. 数组的扩展6. 函数的参数6.1 参数的默认值6.2 与解构...
目录
文章目录隐藏
  1. ES6
  2. 24. Generator
  3. ES7
  4. ES8
  5. ES9
  6. ES10
  7. ES11
  8. ES12
  9. 结语

最全 ES6-ES12 新特性总结

接下来为大家分享最新整理的最全 ES6-ES12 新特性总结，再也不怕面试官问了。内容有点多，建议先马后看。

ES6

1. 新的声明方式：let

变量

  • 不属于顶层对象 window
  • 不允许重复声明
  • 不存在变量提升
  • 暂时性死区
  • 块级作用域

1.1 不属于顶层对象 window

//声明的是变量，具有作用域
var a = 5
console.log(windeow.a) //可以输出
//没有 var，是一个对象
b = 6
console.log(windeow.b) //可以输出

let的出现是为了弥补var将变量挂在window上的缺陷

static 文件夹下的文件是原封不动地上传到浏览器

而 src 文件夹下的文件会经过 webpack 打包，会规避一些问题

1.2 不允许重复声明

var可以多次重复声明（最后一次声明会覆盖前面的声明），而let不能（会报错）

可以避免重复命名

1.3 不存在变量提升

console.log(a)
var a = 5

//相当于
var a
console.log(a)
a = 5

而 let 不存在变量提升

1.4 暂时性死区

var a = 5
if(true){
    a = 6
    let a
}
//会报错，a 没有进行声明，在 if{}里是一个暂时性死区

1.5 块级作用域

for(var i=0;i<3;i++){
    console.log(i)  //输出 0 1 2
}
console.log(i)  //只会输出 3，因为 var 不存在块级作用域，i=3 时不满足条件则结束循环，跳出循环之后被外部的 console.log 输出
//将 var 改成 let，则外部的 console 报错

块级作用域使得代码更加安全

  • 允许在块级作用域内声明函数
  • 函数声明类似于var，即会提升到全局作用域或函数作用域的头部
  • 同时，函数声明还会提升到所在的块级作用域的头部

参考：这篇文章

2. 新的声明方式：const

常量，不能被重新赋值

const a
a = 5 //报错，应 const a = 5

对于引用类型，const不能改变其引用地址，但是可以改变堆内存中的值

const obj = {
    name:'yl',
    age:11
}
//这里添加一行 Object.freeze(obj),后面的就无法改变（但只能冻结第一层，如果多层嵌套需要 obj.name）
obj.sex = 'G'  //obj 中会添加这一值（堆内存可以改变，栈不能改变）
  • 不属于顶层对象 window
  • 不允许重复声明
  • 不存在变量提升
  • 暂时性死区
  • 块级作用域
var let const
函数级作用域 块级作用域 块级作用域
变量提升 不存在变量提升 不存在变量提升
值可更改 值可更改 值不可更改

let VS const

默认情况下优先使用 const，如果需要被改变再考虑 let

let 变量 const 常量。

3. ==解构赋值（常用）==

  • 按照一定模式，从数组和对象中提取值，对变量进行赋值
  • 数组解构
  • 对象解构
  • 字符串解构
  • 应用

默认参数的使用（当没有传这个值的时候，默认赋该值）

等号左右两边的结构一样即可

const [a,b,c,d = 5] = [1,2,[3,4]] //输出[1,2,[3,4],5]
const [a,b,c,d = 5] = [1,2,[3,4],6] //输出[1,2,[3,4],6]
//即如果右边有值则为右边的值，否则输出左边赋的默认值；如果右边没有值，左边也没有默认值，则 underfined
  • 数组通过索引进行配对（按顺序解构）
  • 对象通过键名进行配对（变量必须和属性同名）
  • 解构也适用于嵌套结构的对象（要使用一样的结构）
let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined //不同名，取不到

嵌套赋值：

let obj = {};
let arr = [];

({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });

obj // {prop:123}
arr // [true]
  • 字符串的解构和数组相似
function foo([a,b,c]) {
    console.log(a,b,c)
}
let arr = [1,2,3]
foo(arr)

对于 json：

let json = '{"a":"hello","b":"world"}'
let {a,b} = JSON.parse(json)  //将 json 格式输出成对象，再进行解构赋值

使用了别名之后，真正被赋值的是后者：

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
foo // error: foo is not defined

注意：

// 错误的写法
let x;
{x} = {x: 1};
// 正确的写法
let x;
({x} = {x: 1});  //将解构赋值语句放在一个原括号里
  • 数值和布尔值的解构赋值：
    会先转换为对象

    解构赋值的规则：

    只要等号右边的值不是对象或数组，就先转换为对象

    undefined 和 null 无法转为对象，故无法进行解构赋值

  • 函数的参数也可以使用解构赋值
    用途：

    1. 交换变量的值 
      let x = 1;
let y = 2;

[x, y] = [y, x];
    2. 从函数返回多个值 
      // 返回一个数组
function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一个对象
function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();
    3. 函数参数的定义 
      // 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});
    4. 提取 JSON 数据
    5. 函数参数的默认值
    6. 遍历 Map 结构
    7. 输入模块的指定方法 
      const { SourceMapConsumer, SourceNode } = require("source-map");

4. 数组的各种遍历方式

ES5 中的数组遍历方式

  • for循环
  • forEach()：没有返回值，只是针对每个元素调用 func
  • map():返回新的 Array，每个元素为调用 func 的结果
  • filter():返回符合 func 条件的元素数组
  • some():返回布尔，判断是否有元素符合 func 条件
  • every():返回布尔，判断每个元素是否符合 func 条件
  • reduce():接收一个函数作为累加器
  • for in ???
arr = [1,2,3]

//for 
for(let i = 0; i<arr.length;i++) {
    //....
}

//forEach(不支持 break continue)
arr.forEach(function(elem,index,array){
    //.....
})

//map
let result = arr.map(function(value){
    value += 1
    return value
})
console.log(arr,result)  //map 循环之后会生成新的数组，不会去更改之前的 arr

//filter（过滤）
let result = arr.filter(function(value){
    return value == 2
})
console.log(arr,result)  //会生成一个新的数组，这个新的数组只会保存满足条件的值

//some
let result = arr.some(function(value){
    return value == 4
})
console.log(arr,result)  //返回的是一个布尔值，因为 arr 中没有 4，所以返回 false（只要找到一个满足条件的值就会返回 true）

//every
let result = arr.every(function(value){
    return value == 2
})
console.log(arr,result)  //所有元素都满足条件时才会返回 true

//reduce
//0 初始值 prev 上一个处理的元素 cur 当前处理的元素 index 当前处理元素的索引 array 原数组
let sum = arr.reduce(function(prev,cur,index,array){
    return prev + cur
},0) //得到的就是求和的结果
//reduce 可以实现求 max min 去重等
//去重
let res = arr.reduce(function(prev,cur){
    prev.indexOf(cur) == -1 && prev.push(cur)
    return prev
},[])

//for in xx
//这种方法遍历数组会将 arr 上的所有东西遍历出来（包括原型上的方法）
for(let index in arr){
    //....
}

ES6 中数组遍历方法

  • find():返回第一个通过测试的元素
  • findIndex():返回的值为该通过第一个元素的索引
  • for of
  • values()
  • keys()
  • entries()
arr = [1,2,3,2,4]

//find
let res = arr.find(function(value){
    return value == 2
})
console.log(arr,res) //res 返回的 2 为 arr 的第一个 2

//findIndex
let res = arr.findIndex(function(value){
    return value == 2
})
console.log(arr,res) //res 返回的是为 arr 的第一个 2 的索引

//for of
for(let item of arr){
    console.log(item)
}
//for(let item of arr.values()){} 和上面的效果一样
//arr.values() 为内容
//arr.keys() 为索引
//arr.entries() 为两者都输出
for(let [index,item] of arr.entries()){
    console.log(index,item)
}

相关文章推荐：JavaScript 中有哪些循环遍历方法，你知道吗？

5. 数组的扩展

  • 类数组/伪数组有长度，但不能使用数组的方法
  • Array.from()
  • Array.of()
  • copyWithin()
  • fill()
  • includes()

es5 中，可以通过slice方法将伪数组转换成数组

let arr = Array.prototype.slice.call(divs3)
arr.push(123) //此时已经转换成了真正的数组，使用数组方法不会报错

es6 中：

//Array.from() 将其转换为数组
Array.from(arrayLike)

//Array.of()
let arr = Array.of(1,2)
let arr = Array.of(3)
//let arr = new Array(3) 这个返回的是 3 个空白，并不是数组[3]。这种方法会随着传入的参数个数不同而得到不同的数组

//copyWithin()替换元素
let arr = [1,2,3,4,5]
console.log(arr.copyWithin(1,3))  //从第一个位置开始读取，再读取下标为 3 的数组，（因为没有第三个参数，所有默认到结尾），于是就用 4,5 来替换 2,3

//fill()填充
//1.
let arr = new Array(3).fill(7) //数组长度为 3，用 7 进行填充，于是得到[7,7,7]
//2.
let arr = [1,2,3,4,5]
arr.fill('yl',1,3) //从下标为 1 开始替换，直到下标为 3（不包括） 得到[1,'yl','yl',4,5]
arr.fill(0)  //全部被替换成 0

//includes()是否包含

NAN == NAN 不相等。

6. 函数的参数

  • 参数的默认值
  • 与解构赋值结合
  • length 属性
  • 作用域
  • 函数的 name 属性

6.1 参数的默认值

//es5
function foo(x,y){
    y = y || 'world'  //判断参数是否存在，但存在问题
    console.log(x,y)
}
foo('hello',0) //如果不传 y 值，则打印'world'；而 0 由于是 false，所以打印出来的是 world

//es6
function foo(x, y = 'world'){
    console.log(x,y)
}
foo('hello',0)  //此时打印出来的是 hello，0

//函数内部的参数已经默认声明过了，使用 const 或 let 再次声明会报错
//函数内部的参数不能重名 eg.foo(x,x,y)报错
function foo(x = 5){
    //这里不能再声明 x
}
foo()

//参数的默认值放最后面
function foo(x,z,y=5){}

6.2 与解构赋值结合

function foo({x,y = 5}){
    console.log(x,y)
}
foo({})  //打印出 underfined 5（x 没有赋值），这里符合解构赋值
//foo() 报错，结构要一样才可以

与默认值一同使用：

function ajax(url,{
    body = '',
    method = 'GET',
    headers = {}
} = {}){  //如果不传入第二个参数，则默认值为空值
    console.log(method)
}
ajax('https://mybj123.com',{
    method: 'POST'
})  //POST

6.3 length 属性

返回没有指定默认值的个数

6.4 作用域

let x = 1
function foo(x,y=x){   //()中形成了一个作用域，故 y 取到的值为这个作用域里面的 x 值
    console.log(y)  //2
}
foo(2)

let x = 1
function foo(y=x){ 
    let x = 2
    console.log(y)  //1
}
foo()  
//没有传入参数，此时 y 会沿着作用域链**往外**找，找到全局变量中有一个 x 的值，然后赋值得到
//如果没有声明全局变量，则返回的是 underfined

6.5 函数的 name 属性

(new Function).name //输出 anonymous

7. 拓展运算符 与 rest 参数

  • ...
  • 扩展运算符：把数组或者类数组展开成用逗号隔开的值
  • rest 参数：把逗号隔开的值组合成一个数组

互逆操作

如果…放在等号左边或是形参上，则 rest 参数

如果…放在等号右边或是实参上，则扩展运算符

function foo(a,b,c){
    console.log(a,b,c)
}
let arr = [1,2,3]
foo(...arr)
// 如果使用 foo(arr)需要使用解构赋值，而使用拓展运算符则会将 arr 变成 1,2,3

// 合并数组
let arr1 = [1,2,3]
let arr2 = [4,5,6]

// es5
Array.prototype.push.apply(arr2,arr2)  //在原型上进行 push apply

// es6
arr1.push(...arr2)  //...可以打散 arr2，再通过 push 加上去

// 打散字符串
let str = 'hello'
var arr = [...str]  //得到["h","e","l","l","o"]

作用域：

//es5
function foo(x,y,z) {
    let sum = 0
    Array.prototype.forEach.call(arguments,function(item){  //arguments 返回的是伪数组
        sum += item
    })
    return sum
}
console.log(foo(1,2))  //3
console.log(foo(1,2,3))  //6

//使用 es6 中 Array.from 转换数组
//Array.from(arguments).forEach(function(item){})

//使用 reset 参数(对于不确定参数) 参数要放在最后
function foo(...args) {
    console.log(args)
    let sum = 0
    args.forEach(function(item){
        sum += item
    })
    return sum
}

//reset 提取剩余的参数
function foo(x,...args) {
    console.log(x)  //1
    console.log(args)  //[2,3,4,5]
}
foo(1,2,3,4,5)
//同样适用于解构赋值中
let [x,...y] = [1,2,3]
console.log(x)  //1
console.log(y)  //[2,3]

8. 箭头函数

  • this 指向定义时所在的对象，而不是调用时所在的对象箭头函数里没有 this，会往外一层去找 this
  • 不可以当作构造函数
  • 不可以使用 arguments 对象
// 箭头函数的写法:箭头左边是参数，右边是方法体

let sum = (x,y) => {
    return x + y
}

// 可以简写成 let sum = (x,y) => x + y （方法体只有一行代码)
//es5 中构造函数
function People(name,age){
    console.log(this)
    this.name = name
    this.age = age
}
let p1 = new People('yl',11)

let foo = (..args) => {
    //console.log(arguments) 浏览器会报错
    //可以使用 reset 参数进行输出
    console.log(args)
}
foo(1,2,3)

9. 对象的扩展

  • 属性简洁表示法
  • 属性名表达式
  • Object.is() 即===Object.is() 即===
  • 拓展运算符 与 Object.assign()
  • in
  • 对象的遍历方式

9.1 属性简洁表示法 属性名表达式

let name = 'yl'
let age = 11
let s = 'school'
let obj = {
    name,
    age,
    [s]:'gdut'  // 如果想要使用变量，则加上[]
    study(){  // es6 为对象提供了一种简写的方式，如果使用箭头函数会报错，this 指代的是 window
        console.log(this.name + 'studying')
    }
}

9.2 Object.is()

obj1 == obj2 //false

obj 存储的是一个引用地址，每一个 obj 都会进行一次new Object()，在堆内存中进行存储，所以哪怕两个对象内容一模一样，在堆内存中的位置也是不一样的，故返回 false。

同样 Object.is(obj1 == obj2) //false

let obj1 = obj2

Object.is(obj1 == obj2) //true

9.3 拓展运算符 与 Object.assign()

let x = {
    a: 3 
    b: 4
}
let y = {..x}
console.log(y)  //{a:3,b:4}

//Object.assign()
let x = {
    a: 3,  //后面的值会覆盖前面的，所以 a:3
    b: 4
}
let y = {
    c:5,
    a:6 
}
Object.assign(y,x)
console.log(y)  //{a:3,b:4,c:5}

9.4 in

判断对象中是否存在

如果是数组：

console.log(3 in arr) //下标为 3 是否存在

9.5 对象的遍历方式

//1
for (let key in obj){
    console.log(key,obj[key])
}

//2
Object.keys(obj).forEach(key => {
    console.log(key,obj[key])
})

//3
Object.getOwnPropertyNames(obj).forEach(key =>{
    console.log(key,obj[key])
})

//4
Reflect.ownKeys(obj).forEach(key => {
    console.log(key,obj[key])
})

10. 深拷贝与浅拷贝

相关文章推荐：理解 js 的深拷贝和浅拷贝原理和实现的方法

10.1 浅拷贝

let Foo = {
    a: 3,
    b: 4
}
let newFoo = Foo
newFoo.a = 5

//使用 object.assign()
let Foo = {
    a: 3,
    b: 4
}
// let newFoo = Foo
Object.assign(newFoo, Foo)
newFoo.a = 5

改变内容，都会改变（因为改变的是引用地址）

10.2 深拷贝

  • JSON 方式JSON.parse() 将 JSON 字符串转换成 JavaScript 对象JSON.stringify() 将 JavaScript 对象转换成 JSON 字符串 
    let Foo = {
    a: {
      c:1
    },
    b: 4
}
let str = JSON.stringify(Foo)
let newFoo = JSON.parse(str)
newFoo.a.c = 5
  • 递归 
    let checkType = data => {
    return Object.prototype.toString.call(data).slice(8, -1)
}

let deepClone = target => {
    let targetType = checkType(target)
    let result
    // 初始化操作
    if (targetType === 'Object') {
        result = {}
    } else if (targetType === 'Array') {
        result = []
    } else {
        // 都不是的话证明是基本数据类型，基本数据
        // 类型只会有一个值，所以直接返回这个值就可以了
        return target
    }
    // target 不是基本类型，进入遍历
    for (let i in target) {
        let value = target[i]
        let valueType = checkType(value)
        if (valueType === 'Object' || valueType === 'Array') {
            result[i] = deepClone(value) // 递归
        } else {
            // 是基本类型直接赋值
            result[i] = value
        }
    }
    return result
}

11. 面向过程与面向对象

面向过程：强调实现需求的步骤

面向对象：对象的属性、方法

面向过程与面向对象

JavaScript 是一种基于对象的语言

类是对象的模板，定义了同一组对象共有的属性和方法。

12. ES5 中的类与继承

组合式继承:

function Animal(name) {
    this.name = name;
}
Animal.prototype.showName = function () {
    console.log('名字为' + this.name);
}

//子类
function Dog(name,color) {
    Animal.call(this,name);  //继承父类的属性，**但不继承父类的方法**
    this.color = color;
}
Dog.prototype = new Animal();  //组合继承，既能继承属性又能继承方法
Dog.prototype.constuctor = Dog;
lett d = new Dog('wangcai','white');
console.log(d1);

13. ES6 中的类与继承

13.1 class 是语法糖

class People {
    constructor(name,age) {
        this.name = name;
        this.age = age;
    }
    showName(){
        console.log(this.name);
    }
}
let p1 = new People('yl',11);
console.log(p1);

10.2 继承 extends

class Coder extends People {
    constructor(name,age,company){
        super(name,age);
        this.company = company;
    }
    showCompany(){
        console.log(this.company);
    }
}

10.3 Setters&Getters

class Animal {
    constructor(type, age) {
        this.type = type;
        this._age = age;
    }
    get age() {  //只读
        return this._age;
    }
    set age(val) {  //可写
        this._age = val;
    }
}

使用这种方式可以在里面写语句

eg.

set age(val) { if (val > 0 && val < 10) { #age = val } }

13.4 静态方法

使用static来标记:

class Animal {
    constructor(type) {
        this.type = type
    }
    walk() {
        console.log( `I am walking` )
    }
    static eat() {
        console.log( `I am eating` )
    }
}
  1. 类中的构造器不是必须写的，要写实例进行一些初始化的操作，如添加指定属性时才写
  2. 如果 A 类继承了 B 类，且 A 类中写了构造器，那么 A 类构造器中的 super 是必须要调用的
  3. 类中所定义的方法，都是放在了类的原型对象上，供实例去使用

1、

//传统方法
function Point(x, y) {
  this.x = x;
  this.y = y;
}
Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};
var p = new Point(1, 2);

//class 方法
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {    //方法必须使用该语法，方法名（）{}
    return '(' + this.x + ', ' + this.y + ')';
  }
}

2. Object.assign()一次向类添加多个方法

class Point {
  constructor(){
    // ...
  }
}

Object.assign(Point.prototype, {
  toString(){},
  toValue(){}
});

3. 类必须使用new调用

es5 里，实例的属性是函数原型的属性

在 es6 中，static 声明静态属性，属性属于类不属于实例

function Phone(){
}
Phone.name = '手机';   //name 属性属于函数对象的，不属于实例对象，称为静态属性
Phone.prototype.size = '5.5inch';  //原型
let nokia = new Phone();   //实例化
console.log(nokia.name);   //报错
console.log(nokia.size);   //输出 5.5inch

//构造方法
constructor(brand, price){
    this.brand = brand;
    this.price = price;
}
//父类的成员属性
call(){
    console.log("我可以打电话!!");
}
}
class SmartPhone extends Phone {   //用 extends 来继承
//构造方法
constructor(brand, price, color, size){
    super(brand, price);// Phone.call(this, brand, price)  关键字 super
    this.color = color;
    this.size = size;
}
photo(){
    console.log("拍照");
}
playGame(){
    console.log("玩游戏");
}
//call(){
//    console.log('我可以进行视频通话');   //子类对父类方法的重写
}
}
const xiaomi = new SmartPhone('小米',799,'黑色','4.7inch');

5. 取值 get 存值 set

14. 新的原始数据类型 Symbol

let s = new Symbol() 错误，不能使用 new

Symbol 不是对象，不能添加属性（是一种类似于字符串的数据类型）

14.1 独一无二

这个可以保证相同 key 值的也保存下来（比如重名学生）:

let s1 = Symbol();
console.log(s1);  //Symbol()
let s2 = Symbol();
console.log(s1 === s2);  //false

14.2 自动调用 toString()函数

const obj = {
    name: 'yl',
    toString(){
        return this.name
    }
}
let s = Symbol(obj);
console.log(s);  //Symbol(yl)

14.3 Symbol.for()

在全局中注册的

不会每次调用都返回一个新的 Symbol 类型的值，而是先检查给定的key是否已经存在，不存在才新建。

let s1 = Symbol.for('foo');
let s2 = Symbol.for('foo');
console.log(s1 === s2);//true

14.4 Symbol.keyFor()

返回一个已经登记的Symbol类型值的key：

const s1 = Symbol('foo')
console.log(Symbol.keyFor(s1)) // undefined

const s2 = Symbol.for('foo')
console.log(Symbol.keyFor(s2)) // foo

14.5 属性遍历

const sym = Symbol('imooc')
class User {
    constructor(name) {
        this.name = name
        this[sym] = 'imooc.com'
    }
    getName() {
        return this.name + this[sym]
    }
}
const user = new User('xiecheng')
console.log(user.getName())

for (let key in user) {   //不能遍历 symbol 类型的值
    console.log(key)
}

for (let key of Object.keys(user)) {  //不能遍历 symbol 类型的值
    console.log(key)
}

for (let key of Object.getOwnPropertySymbols(user)) {  //只能遍历 symbol 类型的值
    console.log(key)
}

for (let key of Reflect.ownKeys(user)) {  //全都能遍历
    console.log(key)
}

可以很好地保护symbol值

14.6 消除魔术字符串

function getArea(shape) {
    let area = 0
    switch (shape) {
        case 'Triangle'://魔术字符串
            area = 1
            break
        case 'Circle':
            area = 2
            break
    }
    return area
}
console.log(getArea('Triangle'))

const shapeType = {
    triangle: Symbol(),//使用 symbol 赋一个独一无二的值
    circle: Symbol()
}

function getArea(shape) {
    let area = 0
    switch (shape) {
        case shapeType.triangle:
            area = 1
            break
        case shapeType.circle:
            area = 2
            break
    }
    return area
}
console.log(getArea(shapeType.triangle))

15. 新的数据结构 Set

数据结构 Set 类似于数组，但是成员的值都是唯一的，没有重复的值

15.1 基本语法

生成 Set 实例：

let s = new Set()

let s = new Set([1, 2, 3, 4])

添加数据：

s.add('hello')
s.add('goodbye')

或者：
s.add('hello').add('goodbye')  //写在一起

添加重复的数据是无效的

删除数据：

s.delete('hello')  // 删除指定数据
s.clear()  // 删除全部数据

统计数据：

// 判断是否包含数据项，返回 true 或 false
s.has('hello') // true
// 计算数据项总数
s.size // 2

数组去重：

let arr = [1, 2, 3, 4, 2, 3]
let s = new Set(arr)

合并去重：

let arr1 = [1, 2, 3, 4]
let arr2 = [2, 3, 4, 5, 6]
let s = new Set([...arr1, ...arr2])
console.log(s)
console.log([...s])
console.log(Array.from(s))

交集：

let s1 = new Set(arr1)
let s2 = new Set(arr2)
let result = new Set(arr1.filter(item => s2.has(item)))
console.log(Array.from(result))

差集：

let arr3 = new Set(arr1.filter(item => !s2.has(item)))
let arr4 = new Set(arr2.filter(item => !s1.has(item)))
console.log(arr3)
console.log(arr4)
console.log([...arr3, ...arr4])

15.2 遍历方式

console.log(s.keys()) // SetIterator {"hello", "goodbye"}
console.log(s.values()) // SetIterator {"hello", "goodbye"}
console.log(s.entries()) // SetIterator {"hello" => "hello", "goodbye" => "goodbye"}
s.forEach(item => {
    console.log(item) // hello // goodbye
})

for (let item of s) {
    console.log(item)
}
for (let item of s.keys()) {
    console.log(item)
}

for (let item of s.values()) {
    console.log(item)
}

for (let item of s.entries()) {
    console.log(item[0], item[1])  //key 值和 value 值都是一样的
}

15.3 WeakSet

区别：

  • 成员只能是对象，而不能是其他类型的值。
  • 没有 size 属性，不能遍历。
  • 弱引用

所谓垃圾回收机制：

如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在

const ws = new WeakSet()
ws.add(1)
// TypeError: Invalid value used in weak set
ws.add(Symbol())
// TypeError: invalid value used in weak set
let ws = new WeakSet()
const obj1 = {
    name: 'imooc'
}
const obj2 = {
    age: 5
}
console.log(ws)
console.log(ws.has(obj2))

16. 新的数据类型 Map

类似于对象，键值对的集合

“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键

也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应

是一种更完善的 Hash 结构实现

如果你需要“键值对”的数据结构，Map 比 Object 更合适。

16.1 基本语法

实例化：

let map = new Map();

let map = new Map([
    ['name','yl'],
    ['age',5]
])
console.log(map);  //Map(2) {"name" => 'yl',"age" => 5}

添加数据：

let obj = {
    name: 'yl'
}
map.set(obj,'66');

删除数据：

map.delete(keyObj);    // 删除指定的数据
map.clear();           // 删除所有数据

统计数据：

console.log(map.size) //2
console.log(map.has(keyObj)) //判断是否有 key-value

查询数据：

console.log(map.get(keyObj)) // 和键'keyObj'关联的值

16.2 遍历方式

map.forEach((value, key) => console.log(value, key))  //value, key

for (let [key, value] of map) {  //key, value
    console.log(key, value)
}

for (let key of map.keys()) {
    console.log(key)
}

for (let value of map.values()) {
    console.log(value)
}

for (let [key, value] of map.entries()) {
    console.log(key, value)
}

Map VS Object：

  • 键的类型Object的键: 字符串或者 SymbolsMap 的键: 任意值
  • 键的顺序Object的键：无序Map的键值：有序

    进行遍历时，Map 对象是按插入的顺序返回键值。

  • 键值对的统计Object 的个数：只能手算Map的个数：用size
  • 键值对的遍历Object：先获取键数组，再进行迭代Map：可直接进行迭代
  • 性能在涉及频繁增删键值对的场景下，Map 会有些性能优势

16.3 WeekMap

// WeakMap 可以使用 set 方法添加成员
const wm1 = new WeakMap()
const key = {
    foo: 1
}
wm1.set(key, 2)
wm1.get(key) // 2

// WeakMap 也可以接受一个数组
// 作为构造函数的参数
const k1 = [1, 2, 3]
const k2 = [4, 5, 6]
const wm2 = new WeakMap([
    [k1, 'foo'],
    [k2, 'bar']
])
wm2.get(k2) // "bar"

区别：

  • WeakMap 只接受对象作为键名（null 除外），不接受其他类型的值作为键名
  • 不计入垃圾回收机制

17. 字符串的扩展

17.1 Unicode 表示法（少用）

Unicode 有啥用：

保证简便高效和保持与已有编码标准兼容之间的平衡。

在内部使用 Unicode 的应用程序，能够同时存储和处理世界上所有的字符，这消除了传统的国际化方法所面临的一些困难。

es5 中

"\u0061"    // "a"

只限于码点在\u0000~\uFFFF 之间的字符

超出须用两个双字节的形式表示

"\uD842\uDFB7"   // ""

es6 中

将码点放入大括号：

"\u{20BB7}"   // ""

'\z' === 'z' // true
'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true
'\u{7A}' === 'z' // true

17.2 遍历器接口

for (let item of 'imooc') {
    console.log(item)
}

17.3 ==模板字符串==

  • 多行字符串使用后，不需要使用/n 换行
  • 插入表达式 
    var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);

    如果模板字符串中的变量没有声明，会报错:

    // 变量 place 没有声明
let msg = `Hello, ${place}`; // 报错
  • 嵌套模板
  • 标签模板 
    ==tag 函数（?）==

17.4 扩展方法

  • String.fromCodePoint()从 Unicode 码点返回对应字符（可以识别大于 0xFFFF 的字符）

    弥补了 String.fromCharCode()方法的不足

  • String.includes()是否包含该字符串(es5 中使用 indexOf) 
    const str = 'mybj'
console.log(str.includes('my'))  //true
  • String.startsWith()判断是否在头部 
    const str = 'mybj'
console.log(str.endsWith('myb'))  //true
  • String.endsWith()判断是否在尾部

    上述三个方法都有第二个参数 n

    includes和startsWith从第n个位置直到字符串结束

    endsWith是对前n个字符

  • String.repeat(n)将原字符串重复n次后返回一个字符串如果是小数，会被取整如果是负数或者infinity，报错NaN等同 0 
    const str = 'yl'
const newStr = str.repeat(10)
console.log(newStr)  //ylylylylylylylylylyl
  • String.raw() 在斜杆前面再加一个斜杆 
    String.raw`Hi\n${2+3}!`  //"Hi\\n5!"

    // 等同于`foo${1 + 2}bar`  "foo3bar"
String.raw({ raw: ['foo', 'bar'] }, 1 + 2)
  • String.codePointAt() 返回码点的十进制值.
  • String.normalize()
  • String.trimStart()【trimLeft()】 消除头部的空格，尾部会被保留
  • String.trimEnd() 【trimRight()】消除尾部的空格，头部会被保留
  • String.matchAll() 返回一个正则表达式在当前字符串的所有匹配
  • String.replaceAll(searchValue, replacement) 替换掉所有匹配值searchValue不能是不带 g 修饰符的正则表达式，会报错replacement为替换的文本，也可以是函数，或是以下特殊字符串：
    • $&：匹配的子字符串。
    • $ `：匹配结果前面的文本。
    • $'：匹配结果后面的文本。
    • $n：匹配成功的第n组内容，n是从 1 开始的自然数。这个参数生效的前提是，第一个参数必须是正则表达式。
    • $$：指代美元符号$ 
      // $& 表示匹配的字符串，即`b`本身
// 所以返回结果与原字符串一致
'abbc'.replaceAll('b', '$&')
// 'abbc'

// $` 表示匹配结果之前的字符串
// 对于第一个`b`，$` 指代`a`
// 对于第二个`b`，$` 指代`ab`
'abbc'.replaceAll('b', '$`')
// 'aaabc'

// $' 表示匹配结果之后的字符串
// 对于第一个`b`，$' 指代`bc`
// 对于第二个`b`，$' 指代`c`
'abbc'.replaceAll('b', `$'`)
// 'abccc'

// $1 表示正则表达式的第一个组匹配，指代`ab`
// $2 表示正则表达式的第二个组匹配，指代`bc`
'abbc'.replaceAll(/(ab)(bc)/g, '$2$1')
// 'bcab'

// $$ 指代 $
'abc'.replaceAll('b', '$$')
// 'a$c'

在 es5 中使用replace()如果想要匹配所有，需要使用正则表达式

18. 正则表达式的拓展

作用：检索、替换那些符合某个模式（规则）的文本

eg. 验证表单（匹配）、过滤页面内容中的一些敏感词（替换），或从字符串中获取我们想要的特定部分（提取）

18.1 RegExp 构造函数

  1. 利用 RegExp 对象来创建
  2. 利用字面量创建 
    var regex = new RegExp('xyz', 'i');
// 等价于 var regex = /xyz/i;
//ES5 不允许此时使用第二个参数添加修饰符

    var regex = new RegExp(/xyz/i);
// 等价于 var regex = /xyz/i;

测试正则表达式 test() 返回布尔值 regexObj.test(str) 检测是否符合正则表达式要求的规范

正则表达式里面不需要使用引号

18.2 y 修饰符

“粘连”修饰符。

后一次匹配都从上一次匹配成功的下一个位置开始。

与 g 修饰符类似，全局匹配。

不同：

  • g 修饰符只要剩余位置中存在匹配就可
  • y 修饰符确保匹配必须从剩余的第一个位置开始
var s = 'aaa_aa_a';
var r1 = /a+/g;
var r2 = /a+/y;

r1.exec(s) // ["aaa"]
r2.exec(s) // ["aaa"]

r1.exec(s) // ["aa"]
r2.exec(s) // null
//y 修饰符号隐含了头部匹配的标志^

检测 y 标志 => sticky

var pattern = /hello\d/y;
console.log(patten.sticky);
  • lastIndex 指定从 xx 位置开始匹配

18.3 u 修饰符

Unicode 模式

  • 处理大于 \uFFFF 的 Unicode 字符
  • 点字符 除了换行符以外的任意单个字符 
    var s = '';

/^.$/.test(s)   // false
/^.$/u.test(s)  // true，需要添加 u 字符
  • i 修饰符 
    /[a-z]/i.test('\u212A') // false
/[a-z]/iu.test('\u212A') // true
  • unicode 是否设置了 u 修饰符
  • 处理不兼容 es6： 
    function hasRegExpU() {
    try {
    	var pattern = new RegExp(".", "u");
    	return true;
    } catch (ex) {
    	return false;
	}
}

18.4 flags 属性

  • source 获取正则表达式的文本
  • flags 返回正则表达式中是由标志组成的字符串形式 
    var re = /ab/g;
console.log(re.source); // "ab"
console.log(re.flags); // "g"

18.5 后行断言

  • 先行断言：x只有在y前面才匹配，必须写成/x(?=y)/
  • 先行否定断言：x只有不在y前面才匹配，必须写成/x(?!y)/
  • 后行断言：x只有在y后面才匹配，必须写成/(?<=y)x/
  • 后行否定断言：x只有不在y后面才匹配，必须写成/(?<!y)x/

18.6 具名组匹配

用圆括号分组:

const RE_DATE = /(\d{4})-(\d{2})-(\d{2})/;

const matchObj = RE_DATE.exec('1999-12-31');
const year = matchObj[1]; // 1999
const month = matchObj[2]; // 12
const day = matchObj[3]; // 31

ES2018 引入了具名组匹配

/(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/

18.7 引用

如果要在正则表达式内部引用某个“具名组匹配”，可以使用\k<组名>的写法

18.8 正则匹配索引

  • indices 返回每个组
  • indices.groups 提供具名组匹配Z的开始位置和结束位置

    获取组匹配不成功，均返回undefined

const text = 'zabbcdef';
const re = /ab+(cd(ef))/;
const result = re.exec(text);

result.indices // [ [1, 8], [4, 8], [6, 8] ]

const text = 'zabbcdef';
const re = /ab+(?cd)/;
const result = re.exec(text);

result.indices.groups // { Z: [ 4, 6 ] }

19. 数值的拓展

19.1 二进制 0B 八进制 0O

const a = 5;
console.log(a.toString(2));  //十进制转换成二进制 101

const b = 101;
console.log(parseInt(b,2));  //二进制转换成十进制

const a = 0B0101  //二进制
console.log(a)

const b = 0O777  //八进制
console.log(b)  //输出的是十进制

19.2 新增方法

  • Number.isFinite() 检查一个数值是否为有限的： 
    //数值就会返回 true，其他的都是 false
Number.isFinite(15) // true
Number.isFinite(0.8) // true
Number.isFinite(NaN) // false
Number.isFinite(Infinity) // false
Number.isFinite(-Infinity) // false
Number.isFinite('foo') // false
Number.isFinite('15') // false
Number.isFinite(true) // false
  • Number.isNaN() 检查一个值是否为 NaN： 
    //NAN 值就返回 true
Number.isNaN(NaN) // true
Number.isNaN(15) // false
Number.isNaN('15') // false
Number.isNaN(true) // false
Number.isNaN(9 / NaN) // true
Number.isNaN('true' / 0) // true
Number.isNaN('true' / 'true') // true
  • Number.parseInt()在 es5 中，parseInt 是 window 上的
  • Number.parseFloat()同上
  • Number.isInteger() 判断一个数值是否为整数

    JavaScript 内部，整数和浮点数采用的是同样的储存方法，所以 25 和 25.0 被视为同一个值。

    存在误判的情况 例如精度丢失、小于Number.MIN_VALUE

    Number.isInteger(25) // true
Number.isInteger(25.1) // false

Number.isInteger() // false
Number.isInteger(null) // false
Number.isInteger('15') // false
Number.isInteger(true) // false
  • Number.MAX_SAFE_INTEGER 最大安全数：2^53 = 9007199254740991
  • Number.MIN_SAFE_INTEGER -9007199254740991
  • Number.isSafeInteger() 在-2^53^到 2^53^之间（不含两个端点）
  • Number.EPSILON 表示 1 与大于 1 的最小浮点数之间的差 [可接受的最小误差范围]

    最小精度。误差如果小于这个值，就可以认为已经没有意义了，即不存在误差

19.3 Math 拓展

ES6 在 Math 对象上新增了 17 个与数学相关的方法。所有这些方法都是静态方法，只能在 Math 对象上调用

  • Math.trunc() 去除一个数的小数部分，返回整数部分 true 代表 1，false 代表 0，其余非数值的返回 NaN 
    console.log(Math.trunc(5.5))
console.log(Math.trunc(-5.5))
console.log(Math.trunc(true)) // 1
console.log(Math.trunc(false)) // 0
console.log(Math.trunc(NaN)) // NaN
console.log(Math.trunc(undefined)) // NaN
console.log(Math.trunc()) // NaN
  • Math.sign() 判断正数、负数、零,true 和 false 会转换为数值后进行判断 
    console.log(Math.sign(5)) // 1
console.log(Math.sign(-5)) // -1
console.log(Math.sign(0)) // 0
console.log(Math.sign(NaN)) // NaN
console.log(Math.sign(true)) // 1
console.log(Math.sign(false)) // 0
  • Math.cbrt() 计算一个数的立方根，非数的返回 NaN。
  • Math.clz32() 将参数转为 32 位无符号整数的形式，返回 32 位值里面有多少个前导 0 只考虑整数部分 
    Math.clz32(1000) // 22 1000 的二进制形式是 0b1111101000，一共有 10 位，所以 32 位之中有 22 个前导 0
Math.clz32(0b01000000000000000000000000000000) // 1
Math.clz32(0b00100000000000000000000000000000) // 2

    左移运算符 << 与Math.clz32方法直接相关

  • Math.imul() 效果和(a*b)|0 相同，可以处理溢出的情况 
    Math.imul(-2, -2) // 4
(0x7fffffff * 0x7fffffff)|0 // 0
Math.imul(0x7fffffff, 0x7fffffff) // 1
  • Math.fround() 将 64 位双精度浮点数转为 32 位单精度浮点数 
    // 丢失精度
Math.fround(0.7)   // 0.699999988079071

//对于 NaN 和 Infinity，此方法返回原值
Math.fround(NaN)      // NaN
Math.fround(Infinity) // Infinity

//先将其转为数值，再返回单精度浮点数
Math.fround('5')      // 5
Math.fround(true)     // 1
Math.fround(null)     // 0
Math.fround([])       // 0
Math.fround({})       // NaN
  • Math.hypot() 返回所有参数的平方和的平方根,先将非数值的转换为数值，无法转换的返回 NaN 
    Math.hypot(3, 4);        // 5
Math.hypot(3, 4, 5);     // 7.0710678118654755
Math.hypot();            // 0
Math.hypot(NaN);         // NaN
Math.hypot(3, 4, 'foo'); // NaN
Math.hypot(3, 4, '5');   // 7.0710678118654755
Math.hypot(-3);          // 3
  • Math.expm1() Math.expm1(x) => ex – 1 == Math.exp(x) - 1。
  • Math.log1p() Math.log1p(x) == Math.log(1 + x)
  • Math.log10() 返回以 10 为底的x的对数
  • Math.log2() 返回以 2 为底的x的对数

以上三个方法，如果x小于 0，则返回 NaN

  • 双曲函数方法：
    • Math.sinh(x) 返回x的双曲正弦
    • Math.cosh(x) 返回x的双曲余弦
    • Math.tanh(x) 返回x的双曲正切
    • Math.asinh(x) 返回x的反双曲正弦
    • Math.acosh(x) 返回x的反双曲余弦
    • Math.atanh(x) 返回x的反双曲正切

20. 代理 proxy

自定义一些常用行为如查找、赋值、枚举、函数调用等

20.1 基本语法

let p = new Proxy(target, handler)

target ：用来代理的“对象”，被代理之后不能直接被访问

handler ：实现代理的过程

20.2 拦截操作场景

let o = {
    name: 'xiaoming',
    age: 20
}

let handler = {
    get(obj, key) {
        return Reflect.has(obj, key) ? obj[key] : ''
    }
}

let p = new Proxy(o, handler)

console.log(p.from)

场景 1

从服务端获取的数据希望是只读，不允许在任何一个环节被修改。

// response.data 是 JSON 格式的数据，来自服务端的响应
// 在 ES5 中只能通过遍历把所有的属性设置为只读
for (let [key] of Object.entries(response.data)) {
    Object.defineProperty(response.data, key, {
        writable: false
    })
}

使用 Proxy ：

let data = new Proxy(response.data, {
    set(obj, key, value) {
        return false
    }
})

场景 2

校验:

// Validator.js
export default (obj, key, value) => {
    if (Reflect.has(key) && value > 20) {
        obj[key] = value
    }
}

import Validator from './Validator'
let data = new Proxy(response.data, {
    set: Validator
})

场景 3

对读写进行监控：

let validator = {
    set(target, key, value) {
        if (key === 'age') {
            if (typeof value !== 'number' || Number.isNaN(value)) {  // 非数值、空值
                throw new TypeError('Age must be a number')
            }
            if (value <= 0) { // 输入的值小于等于 0 throw new TypeError('Age must be a positive number') } } return true } } const person = { age: 27 } const proxy = new Proxy(person, validator) // 添加监控 window.addEventListener( 'error', e => {
        console.log(e.message) // Uncaught TypeError: Age must be a number
    },
    true
)

场景 4

实例一个对象，每个对象都有一个自己的 id 而且只读。

class Component {
    constructor() {
        this.proxy = new Proxy({
            id: Math.random().toString(36).slice(-8)
        })
    }
    get id() {
        return this.proxy.id
    }
}

20.3 常用拦截操作

get: 拦截对象属性的读取

let arr = [7, 8, 9]
arr = new Proxy(arr, {
    get(target, prop) {
        return prop in target ? target[prop] : 'error'
    }
})
console.log(arr[1])  //8
console.log(arr[10])  //error

set: 拦截对象属性的设置

let arr = []
arr = new Proxy(arr, {
    set(target, prop, val) {
        if (typeof val === 'number') {
            target[prop] = val
            return true  //需要返回一个布尔值
        } else {
            return false
        }
    }
})
arr.push(5)
arr.push(6)
console.log(arr[0], arr[1], arr.length)

has: 拦截 propKey in proxy 的操作，返回一个布尔值。

let range = {
    start: 1,
    end: 5
}

range = new Proxy(range, {
    has(target, prop) {
        return prop >= target.start && prop <= target.end
    }
})
console.log(2 in range)
console.log(9 in range)

ownKeys:

拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in循环，返回一个数组。

该方法返回目标对象所有自身的属性的属性名。

而Object.keys()的返回结果仅包括目标对象自身的可遍历属性:

let obj = {
    name: 'imooc',
    [Symbol('es')]: 'es6'
}
console.log(Object.getOwnPropertyNames(obj))  //["name"]
console.log(Object.getOwnPropertySymbols(obj))  //[Symbol(es)]
console.log(Object.keys(obj))
for (let key in obj) {
    console.log(key)   //name
}

let userinfo = {
    username: 'zhangsna',
    age: 34,
    _password: '***'
}
userinfo = new Proxy(userinfo, {
    ownKeys(target) {
        return Object.keys(target).filter(key => !key.startsWith('_')) // 过滤
    }
})
console.log(Object.keys(userinfo))

deleteProperty:

拦截delete proxy[propKey]的操作，返回一个布尔值。

let user = {
    name: 'zhangsna',
    age: 34,
    _password: '***'
}
user = new Proxy(user, {
    get(target, prop) {
        if (prop.startsWith('_')) {
            throw new Error('不可访问')
        } else {
            return target[prop]
        }
    },
    set(target, prop, val) {
        if (prop.startsWith('_')) {
            throw new Error('不可访问')
        } else {
            target[prop] = val
            return true  //返回一个布尔值
        }
    },
    deleteProperty(target, prop) { // 拦截删除
        if (prop.startsWith('_')) {
            throw new Error('不可删除')
        } else {
            delete target[prop]
            return true
        }
    },
    ownKeys(target) {
        return Object.keys(target).filter(key => !key.startsWith('_'))
    }
})
console.log(user.age)
console.log(user._password)
user.age = 18
console.log(user.age)
try {
    user._password = 'xxx'
} catch (e) {
    console.log(e.message)
}

try {
    // delete user.age
    delete user._password
} catch (e) {
    console.log(e.message)
}
console.log(user.age)

for (let key in user) {
    console.log(key)
}

apply：

拦截 Proxy 实例作为函数调用的操作，比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。

let sum = (...args) => {
    let num = 0
    args.forEach(item => {
        num += item
    })
    return num
}

sum = new Proxy(sum, {
    apply(target, ctx, args) {
        return target(...args) * 2
    }
})
console.log(sum(1, 2))
console.log(sum.call(null, 1, 2, 3))
console.log(sum.apply(null, [1, 2, 3]))  //需要是数组

construct：

拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(...args)。

let User = class {
    constructor(name) {
        this.name = name
    }
}
User = new Proxy(User, {
    construct(target, args, newTarget) {
        console.log('construct')
        return new target(...args)
    }
})
console.log(new User('imooc'))

 

21. 反射 Reflect

和 Proxy 一起使用

21.1 设计目的

  • 将 Object 属于语言内部的方法放到 Reflect 上： 
    let obj = {}
let newVal = ''
Reflect.defineProperty(obj, 'name', {
    get() {
        return newVal
    },
    set(val) {
        console.log('set')
        // this.name = val
        newVal = val
    }
})
obj.name = 'es'
console.log(obj.name)
  • 修改某些 Object 方法的返回结果，让其变得更合理 
    // 老写法
try {
    Object.defineProperty(target, property, attributes)
    // success
} catch (e) {
    // failure
}

// 新写法
if (Reflect.defineProperty(target, property, attributes)) {
    // success
} else {
    // failure
}
  • 让 Object 操作变成函数行为 
    // 老写法
'assign' in Object // true

// 新写法
Reflect.has(Object, 'assign') // true
  • Reflect对象的方法与Proxy对象的方法一一对应（只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法） 
    Proxy(target, {
    set: function(target, name, value, receiver) {
        var success = Reflect.set(target, name, value, receiver)
        if (success) {
            console.log('property ' + name + ' on ' + target + ' set to ' + value)
        }
        return success
    }
})

Reflect是一个内置的对象，提供拦截 JavaScript 操作的方法，这些方法与处理器对象的方法相同

Reflect不是一个函数对象，因此它是不可构造的。

Reflect没有构造函数(不能与 new 使用，或将 Reflect 对象作为函数调用

Reflect 的所有属性和方法都是静态的

21.2 常用方法

Reflect.apply()

Reflect.apply(target, thisArgument, argumentsList)
参数 含义 必选
target 目标函数 Y
thisArgument target 函数调用时绑定的 this 对象 N
argumentsList target 函数调用时传入的实参列表，该参数应该是一个类数组的对象 N 
Reflect.apply(Math.floor, undefined, [1.75])    // 1

Reflect.apply(String.fromCharCode, undefined, [104, 101, 108, 108, 111])  // "hello"

Reflect.apply(RegExp.prototype.exec, /ab/, ['confabulation']).index   // 4

Reflect.apply(''.charAt, 'ponies', [3])  // "i"

ES5 对比

与 ES5 中Function.prototype.apply()方法类似:

Function.prototype.apply.call(Math.floor, undefined, [1.75])

Reflect.construct()

允许使用可变的参数来调用构造函数

Reflect.construct(target, argumentsList[, newTarget])
参数 含义 必选
target 被运行的目标函数 Y
argumentsList 调用构造函数的数组或者伪数组 Y
newTarget 该参数为构造函数， 参考 new.target 操作符，如果没有 newTarget 参数， 默认和 target 一样 N

如果target或者newTarget不是构造函数，抛出 TypeError。

function someConstructor() {}
var result = Reflect.construct(Array, [], someConstructor)

Reflect.getPrototypeOf(result) // 输出：someConstructor.prototype
Array.isArray(result) // true

Reflect.defineProperty()

静态方法 Reflect.defineProperty() 基本等同于 Object.defineProperty() 方法，唯一不同是返回 Boolean 值。

Reflect.defineProperty(target, propertyKey, attributes)
参数 含义 必选
target 目标对象 Y
propertyKey 要定义或修改的属性的名称 Y
attributes 要定义或修改的属性的描述 Y 
const student = {}
Reflect.defineProperty(student, 'name', {
    value: 'Mike'
}) // true
student.name // "Mike"

Reflect.deleteProperty()

Reflect.deleteProperty 允许你删除一个对象上的属性。

返回一个 Boolean 值表示该属性是否被成功删除。

Reflect.deleteProperty(target, propertyKey)
参数 含义 必选
target 删除属性的目标对象 Y
propertyKey 将被删除的属性的名称 Y 
var obj = {
    x: 1,
    y: 2
}
Reflect.deleteProperty(obj, "x") // true
obj // { y: 2 }

var arr = [1, 2, 3, 4, 5]
Reflect.deleteProperty(arr, "3") // true
arr // [1, 2, 3, , 5]

// 如果属性不存在，返回 true
Reflect.deleteProperty({}, "foo") // true

// 如果属性不可配置，返回 false
Reflect.deleteProperty(Object.freeze({
    foo: 1
}), "foo") // false

Reflect.get()

Reflect.get() 方法的工作方式，就像从 object (target[propertyKey]) 中获取属性，但它是作为一个函数执行的。

Reflect.get(target, propertyKey[, receiver])
参数 含义 必选
target 需要取值的目标对象 Y
propertyKey 需要获取的值的键值 Y
receiver 如果遇到 getter，此值将提供给目标调用 N 
// Object
var obj = {
    x: 1,
    y: 2
}
Reflect.get(obj, 'x') // 1

// Array
Reflect.get(['zero', 'one'], 1) // "one"

// Proxy with a get handler
var x = {
    p: 1
}
var obj = new Proxy(x, {
    get(t, k, r) {
        return k + 'bar'
    }
})
Reflect.get(obj, 'foo') // "foobar"

Reflect.getOwnPropertyDescriptor()

与 Object.getOwnPropertyDescriptor() 方法相似

如果在对象中存在，则返回给定的属性的属性描述符，否则返回 undefined

Reflect.getOwnPropertyDescriptor(target, propertyKey)
参数 含义 必选
target 需要寻找属性的目标对象 Y
propertyKey 获取自己的属性描述符的属性的名称 N 
Reflect.getOwnPropertyDescriptor({
    x: 'hello'
}, 'x')
// {value: "hello", writable: true, enumerable: true, configurable: true}

Reflect.getOwnPropertyDescriptor({
    x: 'hello'
}, 'y')
// undefined

Reflect.getOwnPropertyDescriptor([], 'length')
// {value: 0, writable: true, enumerable: false, configurable: false}

对比

如果该方法的第一个参数不是一个对象（一个原始值），那么将造成 TypeError 错误。

而对于 Object.getOwnPropertyDescriptor，非对象的第一个参数将被强制转换为一个对象处理。

Reflect.getOwnPropertyDescriptor("foo", 0)
// TypeError: "foo" is not non-null object

Object.getOwnPropertyDescriptor("foo", 0)
// { value: "f", writable: false, enumerable: true, configurable: false }

Reflect.getPrototypeOf()

与 Object.getPrototypeOf() 方法是一样，返回指定对象的原型

Reflect.getPrototypeOf(target)
参数 含义 必选
target 获取原型的目标对象 Y

Reflect.has()

检查一个对象是否拥有某个属性， 相当于in操作符

Reflect.has(target, propertyKey)
参数 含义 必选
target 获取原型的目标对象 Y
propertyKey 属性名，需要检查目标对象是否存在此属性 Y

Reflect.isExtensible()

Reflect.isExtensible判断一个对象是否可扩展（即是否能够添加新的属性）。

与Object.isExtensible()方法一样。

Reflect.isExtensible(target)
参数 含义 必选
target 获取原型的目标对象 Y

Reflect.ownKeys()
返回一个由目标对象自身的属性键组成的数组。

返回值等同于 Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target))。

Reflect.ownKeys(target)
参数 含义 必选
target 获取原型的目标对象 Y 
Reflect.ownKeys({
    z: 3,
    y: 2,
    x: 1
}) // [ "z", "y", "x" ]
Reflect.ownKeys([]) // ["length"]

var sym = Symbol.for("comet")
var sym2 = Symbol.for("meteor")
var obj = {
    [sym]: 0,
    "str": 0,
    "773": 0,
    "0": 0,
    [sym2]: 0,
    "-1": 0,
    "8": 0,
    "second str": 0
}
Reflect.ownKeys(obj)
// [ "0", "8", "773", "str", "-1", "second str", Symbol(comet), Symbol(meteor) ]
// Indexes in numeric order,
// strings in insertion order,
// symbols in insertion order

Reflect.preventExtensions()

阻止新属性添加到对象 (eg. 防止将来对对象的扩展被添加到对象中)

与 Object.preventExtensions() 方法一致

Reflect.preventExtensions(target)
参数 含义 必选
target 获取原型的目标对象 Y 
// Objects are extensible by default.
var empty = {}
Reflect.isExtensible(empty) // === true

// ...but that can be changed.
Reflect.preventExtensions(empty)
Reflect.isExtensible(empty) // === false
Reflect.preventExtensions(1)
// TypeError: 1 is not an object

Object.preventExtensions(1)
// 1

Reflect.set()

允许在对象上设置属性，

给属性赋值，并像 property accessor 语法一样，但以函数的方式。

Reflect.set(target, propertyKey, value[, receiver])
参数 含义 必选
target 获取原型的目标对象 Y
propertyKey 设置的属性的名称 Y
value 设置的值 Y
receiver 如果遇到 setter，this 将提供给目标调用 N 
// Object
var obj = {}
Reflect.set(obj, "prop", "value") // true
obj.prop // "value"

// Array
var arr = ["duck", "duck", "duck"]
Reflect.set(arr, 2, "goose") // true
arr[2] // "goose"

// It can truncate an array.
Reflect.set(arr, "length", 1) // true
arr // ["duck"]

// With just one argument, propertyKey and value are "undefined".
var obj = {}
Reflect.set(obj) // true
Reflect.getOwnPropertyDescriptor(obj, "undefined")
// { value: undefined, writable: true, enumerable: true, configurable: true }

Reflect.setPrototypeOf()

改变指定对象的原型。

Reflect.setPrototypeOf(target, prototype)
参数 含义 必选
target 获取原型的目标对象 Y
prototype 对象的新原型 （一个对象或 null） Y 
Reflect.setPrototypeOf({}, Object.prototype) // true

// It can change an object's [[Prototype]] to null.
Reflect.setPrototypeOf({}, null) // true

// Returns false if target is not extensible.
Reflect.setPrototypeOf(Object.freeze({}), null) // false

// Returns false if it cause a prototype chain cycle.
var target = {}
var proto = Object.create(target)
Reflect.setPrototypeOf(target, proto) // false

22. 异步操作

异步操作

console.log(1);  //（1）
setTimeout(() => {  //（2）
    console.log(2)
},0);
console.log(3);  //（3)
//1  3  2

(1)(3)属于主线程任务，为同步操作，（2）为异步任务，先进入 Event Table 中，等待 0 秒后进入 Event Queue 中等待主线程的任务全部完成后，再读取任务队列中结果进入主线程执行。

所以，如果有一个异步任务经过 2 秒后进入到 Event Queue 中，但是主线程的任务需要 5 秒才能执行完毕，此时的异步任务会在 Event Queue 中等待主线程任务完成，即等待 3 秒后进入主线程。

Ajax

function ajax(url,callback) {
    // 1. 创建 XMLHttpRequest 对象
    var xmlhettp
    if(window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest()
    } else { //兼容早期浏览器
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')
    }
    // 2. 发送请求
    xmlhttp.open('GET',url,true)
    xmlhttp.send()
    // 3. 服务端相应
    xmlhttp.onreadystatechange = function () {
        if(xmlhttp.readState === 4 && xmlhttp.staus === 200) {
            var obj = JSON.parse(xmlhttp.responseText])
            callback(obj)
        }
    }
}
var url = '...';
ajax(url,res => {
    console.log(res)
})

23. Promise

23.1 基本用法

//resolve 成功，rejecth 失败
let p = new Promise((resolve,rejecth) => {
    setTimeout(() => {
        console.log(1)
        // 一般情况下，使用 if else 语句进行判断是否成功
        //if(){  
        //   resolve()
        //   }else{
        //       reject()
        //   }
        },1000)
}).then(() => {  //第一个方法必须要写，第二个方法可以省略
    console.log('成功')
},() => {
    console.log('失败')
})

//可以在 resolve 写入参数，再通过传参来完成
//resolve('success')
//reject('fail')
//.then((res) => {
//    console.log(res)  //success
//}),(err) => {
//    console.log(err)  //fail
//}

23.2 状态

promise 状态

let p1 = new Promise((resolve, reject) => {
    resolve(1)
})
let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(2)
    }, 1000)
})
let p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject(3)
    }, 1000)
})
console.log(p1) // resolved
console.log(p2) // pending ==> 1 秒后变成 resolved
console.log(p3) // pending ==> 1 秒后变成 rejected
setTimeout(() => {
    console.log(p2)
}, 2000)
setTimeout(() => {
    console.log(p3)
}, 2000)

p1.then(res => {
    console.log(res)  //1
})
p2.then(res => {
    console.log(res)  //2
})
p3.catch(err => {  //使用 catch 捕获错误
    console.log(err)  //3
})

promise 状态

let p = new Promise((resolve, reject) => {
    resolve(2)
    reject(1)
}).then(res => {
    console.log(res)
}).catcj(err => {
    console.log(err)
})
//只能输出 2，Promise 状态不能被改变

23.3 使用 Promise 发送 ajax 请求

单纯使用 ajax 需要嵌套非常多层。

使用 Promise 有大量重复代码，抽离出来写成一个函数，使得代码可读性更强，也有利于后期维护。

function getPromise(url) {
    return new Promise((resolve, reject) => {
        ajax(url, res => {
        	resolve(res)
    	})
    })
}
getPromise(...)
    .then(res => {
    console.log(res)
	return getPromise(...)
    }).then(res => {
        console.log(res)
        return getPromise(...)
    }).then(res => {
        console.log(res)
    })

统一捕获 err：

function getPromise(url) {
    return new Promise((resolve, reject) => {
        ajax(url, res => {
        	resolve(res)
    	})
    })
}
getPromise(...)
    .then(res => {
        console.log(res)
	return getPromise(...)
    }).then(res => {
        console.log(res)
        return getPromise(...)
    }).then(res => {
        console.log(res)
    }).catch(err => {
        console.log(err)
    })  //上述任何一个出现错误都会调用

23.4 Promise 的静态方法

Promise.resolve('success')

Promise.reject('fail')
function foo(flag) {
    if(flag) {
        return new Promise(resolve => {
            //异步操作
            resolve('success')
        })
    } else {
        return Promise.reject('fail')  //如果写成 return 'fail',当条件为 false 的时候，会报错
    }
}

foo(false).then(res => {
    console.log(res)  //fail
},err => {
    console.log(err)
})

Promise.all([...]) 所有对象都完成之后才会进入 res，只要有一个是失败的，都会进入 err 中

可应用于上传多张图片中

Promise.all([p1,p2,p3]).then(res => {
    console.log(res)}, err => {
    console.log(err)
})

const imgArr = ['1.jpg', '2.jpg', '3.jpg']
let promiseArr = []
imgArr.forEach(item => {
    promiseArr.push(new Promise((resolve, reject) => {
        // 图片上传的操作
        resolve()
    }))
})
Promise.all(promiseArr).then(res => {
    // 插入数据库的操作
    console.log('图片全部上传完成')
})

Promise.race([...]) 只要有一个成功，整个就会进入 res 中

可应用于请求图片超时

Promise.race([p1,p2,p3]).then(res => {
    console.log(res)}, err => {
    console.log(err)
})

function getImg() {
    return new Promise((resolve, reject) => {
        let img = new Image()
        img.onload = function () {
            resolve(img) //返回图片
        }
        // img.src = 'http://www.xxx.com/xx.jpg'
        img.src = 'https://www.imooc.com/static/img/index/logo.png'
    })
}

function timeout() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('图片请求超时')
        }, 2000)
    })
}

Promise.race([getImg(), timeout()]).then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
}

24. Generator

function* foo() {
    for (let i = 0; i < 3; i++) { yield i } } let f = foo() console.log(f.next()) console.log(f.next()) console.log(f.next()) console.log(f.next()) //yield 关键字只存在于 Generator，这里的的 yield 关键字是在 forEach 函数里的 // function* gen(args) { // args.forEach(item => {
//         yield item + 1
//     })
// }

function* gen(x) {
    let y = 2 * (yield(x + 1))
    let z = yield(y / 3)
    return x + y + z
}
//在 next 里可以传递参数
let g = gen(5)
console.log(g.next()) // 6
console.log(g.next(12)) // y=24  8（对应的 x+1=12）
console.log(g.next(13)) // z=13 x=5 42（对应的 y/3=13

使用 Generator 进行 ajax 请求：

function request(url) {
    ajax(url, res => {
        getData.next(res)
    })
}

function* gen() {
    let res1 = yield request('static/a.json')
    console.log(res1)
    let res2 = yield request('static/b.json')
    console.log(res2)
    let res3 = yield request('static/c.json')
    console.log(res3)
}
let getData = gen()
getData.next()

25. Module

  • export default 默认，导入不需要知道命名（可以直接使用别名）
  • import * from ‘../../xx.js’

把庞大的代码拆开。

将多个功能的代码按功能进行分开，以达到多个模块组合在一起形成一个功能复杂的功能。

好处
  • 防止命名冲突
  • 代码复用
  • 高维护性
语法

<script type="module"> </script>

也可以使用 <script src="./src/js/app.js" type="module"></script> 将引用部分放到另一个 js 文件里

export 对外接口

导入的时候命名要完全一样，可以起别名，起了别名之后文件中使用只能使用别名，原名已经失效了

export 和 export default 可以一起使用 import add, {str} from '../../xxx.js'
分别暴露：在要暴露的语句前面+export。

统一暴露：在某个位置使用 export{}，将要暴露的数据放在花括号里面。

在模块文件里，使用 export default

export default {

​ ...

}

这样就可以直接使用了。

默认暴露：export.default = { }，这种方法在调用时需要添加default

导入不需要知道命名（可以直接使用别名）

  • import 输入其他模块提供的功能
    • 通用的导入方式：import * as m1 from “./src/js/m1.js”;

      导入的是全部

    • 解构赋值的形式：
      • import{school，teach} from “./src/js/m1.js”;
      • import{default as m1} from “./src/js/m1.js”;

      重名时需要使用别名，不然会报错

    • 简便形式(针对默认暴露）：improt m3 from “./src/js/m3.js”
  • 使用 babel
    • 安装工具 npm i babel-cli babel-preset-env browerify -D
    • 编译： npx babel src/js -d dist/js --presets=babel-preset-env 先 [原文件目录] 后 [存放文件目录]
    • 打包 ： npx browserify dist/js/app.js -o dist/bundle.js 将存放文件目录下的文件打包生成 bundle.js 文件

ES7

1. 数组拓展

  • Array.prototype.includes(searchElement[,fromIndex])
  • includes VS indexOf
    • includes 返回布尔值，可以检测 NaN
    • indexOf 返回 index / -1，不可以检测 NaN
  • 幂运算符：**等同于Math.pow()

ES8

1. 异步编程解决方案 Async Await

两者成对出现，代码可读性更强。

function timeout() {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log(1)
            resolve()
        },1000)
    })
}

async function foo() {
    await timeout()   //等待 timeout()运行完毕后再继续往下运行
    console.log(2)
}

foo()

之前的 ajax 请求代码：

async function getData() {
    const res1 = await request('static/a.json')
    console.log(res1)
    const res2 = await request('static/b.json')
    console.log(res2)
    const res3 = await request('static/c.json')
    console.log(res3)
}

2. 对象拓展

  • Object.values() 获得值
  • Object.entries() 获得数组（key 和 value）
const res = Object,keys(obj).map(key => obj[key])
console.log(res)

//上面可以写成
console.log(Object.values(obj))

console.log(Object.entries(['a','b','c']))
//["0","a"],["1","b"],["2","c"]

3. 对象属性描述

  • Object.getOwnPropertyDescriptors()
    • value 当前对象的默认值
    • writable 是否可以修改
    • enumerable 是否可以通过 for..in 方式循环
    • configurable 是否可以删除

4. 字符串拓展

  • String.prototype.padStart() 头部补全
  • String.prototype.padEnd() 尾部补全第一个参数为长度，第二个参数为用于补全的字符串
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

//等于或大于最大长度，则字符串补全不生效，返回原字符串
'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'

//应用于日期  yyyy-mm-dd
const now = new Date()
const year = now.getFullYear()
//padStart 是 String 原型下面的方法，所以想要将其转换为 String
//getMonth()返回的是 0-11 的数字，所以要加 1
const month = (now.getMonth() + 1).toString().padStart(2,'0') 
const day = (now.getDate()) + 1.toString().padStart(2,'0')
console.log(`${year}-${month}-${day}`)

//加密手机号
const tel = '13011111111'
const NewTel = tel.slice(-4).padStart(tel.length,'*')
console.log(NewTel)

5. 尾逗号

允许数参数列表使用尾逗号。

ES9

1. 异步迭代 for await of

  • for-await-of
  • Symbol.asyncIterator
//同步迭代
const arr = ['es6','es7','es8','es9']
arr[Symbol.iterator] = function() {
    let nextIndex = 0
    return {
        next() {
            return nextIndex < arr.length ? {
                value: arr[nextIndex++],
                done: false
            } : {
                value: undefined,
                done: true
            }
        }
    }
}
for(let item of arr) {
    console.log(item)
}

//异步迭代
function getPromise(time) {
    return new Promise((resolve,reject) => {
        setTimeout(() => {
            resolve({  //写成对象的形式
                value: time,
                done:false
            })
        },time)
    })
}
const arr = [getPromise(1000),getPromise(2000),getPromise(3000)]
arr[Symbol.asyncIterator] = function() {
    let nextIndex = 0
    return {
        next() {
            return nextIndex < arr.length ? arr[nextIndex++] : 
            Promise.resolve({
                value: undefined,
                done: true
            })
        }
    }
}
async function test() {
    for await (let item of arr) {
        console.log(item)
    }
}
test()

2. 正则表达式拓展

  • dotAlldot 不能匹配\n \r（包括两者的 Unicode） 
    const reg = /./s  //匹配任意单个字符
console.log(reg.test('5'))  //true
console.log(reg.test('x'))  //true
console.log(reg.test('\n'))  //true
console.log(reg.test('\r'))  //true
console.log(reg.test('\u{2028}'))  //true
console.log(reg.test('\u{2029}'))  //true
  • 具名组匹配 
    const RE_DATE = /(\d{4})-(\d{2})-(\d{2})/;  //用圆括号分组

const matchObj = RE_DATE.exec('1999-12-31');
const year = matchObj[1]; // 1999
const month = matchObj[2]; // 12
const day = matchObj[3]; // 31

    const reg = /(?\d{4}-(?<month)\d{2}-(?\d{2}))
const groups = reg.exec('2020-02-01').groups
//使用解构赋值
const {year, month,day} = groups
console.log(year, month, day)
  • 后行断言 match
    • 先行断言：x只有在y前面才匹配，必须写成/x(?=y)/
    • 先行否定断言：x只有不在y前面才匹配，必须写成/x(?!y)/
    • 后行断言：x只有在y后面才匹配，必须写成/(?<=y)x/
    • 后行否定断言：x只有不在y后面才匹配，必须写成/(?<!y)x/

3. 对象拓展 Rest&Spread

//克隆对象 为深拷贝
const obj3 = {..obj1}

//合并对象  为浅拷贝
const obj4 = {...obj1, ...obj2}  //obj1 和 obj2 相同键名的会被后者覆盖

//...rest 获取剩余的属性
const {name, age, ...rest} = obj1  //...rest 必须放在最后，不然会报错

4. Promise 拓展 finally()

  • Promise.prototype.finally()无论失败还是成功都会执行 finally 里面的语句【例如：成功失败相同的代码逻辑、关闭操作】

5. 字符串扩展

放松模板字符串文字限制，对一些错误不报错，返回 undefined。

ES10

1. 对象扩展

Object.fromEntries() 返回对象结构 【和Object.Entries()相反（返回键对结构）】

// map  =>  对象
const map = new Map()
map.set('name', 'n1')
map.set('name', 'n2')
console.log(map)
const fromEntries = Object.fromEntries(map)
console.log(map)  //对象格式

2. 字符串扩展

  • String.prototype.trimStart()【trimLeft()】 消除头部的空格，尾部会被保留
  • String.prototype.trimEnd() 【trimRight()】消除尾部的空格，头部会被保留
  • String.prototype.trim() 消除空格

3. 数组扩展

  • Array.prototype.flat(num) 对多维数组进行扁平化操作 
    const arr = [1,2,3,[4,5,6,[7,8,9,10,11],12]]  //三维数组
console.log(arr.flat().flat().flat())
console.log(arr.flat(3))
console.log(arr.flat(Infinity))
  • Array.prototype.flatMap() 
    const arr = [1,2,3,4,5]
//const res = arr.map(x => [x + 1]).flat() 等价于↓
const res = arr.flatMap(x => [x + 1])

4. 修订 toString()

返回源代码中的实际文本片段【原样输出返回一模一样的原始代码，包括注释空格等等】。

5. 可选的 Catch Binding

省略 catch 绑定的参数和括号。

try {
  // ...
} catch {
  // ...
}

6. JSON 扩展

  • JSON superset
  • JSON.stringify() 增强能力
// JSON 超集 【少用】\u2029 \u2028
eval('var str = "youlan";\u2029 function foo(){return str;}')
console.log(foo())

//0xD800~0xDfff
console.log(JSON.stringify('\uD830\uDE0E'))  //emoji
console.log(JSON.stringify('\uD830'))  //\ud830 原样输出

7. Symbol 扩展

Symbol.prototype.description 只读属性，不可写【修改 description 也不会报错，但是不能起作用】.

const s = Symbol('yl')
console.log(s)  //Symbol(yl)
console.log(s.description)  //yl 如果没有值则返回 undefined

ES11

1. 全局模式捕获 matchAll()

String.prototype.matchAll() 和正则一起使用

const str = `
    <html>
        <body>
            <div>第一个 div</div>
            <p>这是 p</p>
            <div>第二个 div</div>
            <span>这是 span</span>
            <div>第三个 div</div>
        </body>
    </html>
`
//exec g
function selectDiv1(regExp, str) {
    let matches = []
    while(true) {
        const match = regExp.exec(str)
        if(match == null) {
            break
        }
        matches.push(match[1]) //完整匹配
    }
    return matches
}
const regExp = /<div>(.*)</div>/g
const res1 = selectDiv1(regExp, str)
console.log(res1)  //["第一个 div","第二个 div","第三个 div"]

//match
//console.log(str.match(regExp))  //["<div>第一个 div</div>","<div>第二个 div</div>","<div>第三个 div</div>"]

//replace
function selectDiv2(regExp, str) {
	let matches = []
    str.replace(regExp, (all, first) => {
        matches.push(first) //完整匹配
    }) 
    return matches
}
const res2 = selectDiv2(regExp, str)
console.log(res2) //["第一个 div","第二个 div","第三个 div"]

//matchAll 
function selectDiv3(regExp, st){
    let matches = []
    for(let match of str.matchAll(regExp)){
        matches.push(match[1]) //完整匹配
    }
    return matches
}
const res3 = selectDiv3(regExp, str)
console.log(res3) //["第一个 div","第二个 div","第三个 div"]

matchAll方法的正则表达式需要有 g（全局匹配）

2. 动态导入 Dynamic import()

按需引入，使得页面渲染更快

懒加载

eg. 点击按钮才导入某个模块、才开始渲染这一部分的东西

3. 新的原始数据类型 BigInt

console.log(1n == 1) //true
console.log(1n === 1) //false

//创建
const bigInt = BigInt(900719925474740993n)
bigInt.toSring()

4. Promise 扩展 allSettled()

  • Promise.allSettled()
  • allSettled() Vs all()
Promise.allSettled([
    Promise.resolve({
        code: 200,
        data: [1, 2, 3]
    }),
    Promise.reject({
        code: 500,
        data: []
    }),
    Promise.resolve({
        code: 200,
        data: [7, 8, 9]
    }),
]).then(res => {
    //console.log(res,"成功")
    const data = res.filter(item => item.status === "fulfilled")
    console.log(data)
}).catch(err => {
    console.log(err,"失败")
})

如果使用all()，则其中有一个 reject 都会导致整个进程进入“失败”；而allSettled()，成功的会返回status: "fulfilled" value:{...},失败的返回reson: {...}，使用 filter 进行过滤获得请求成功的数据

5. 全局对象 globalThis

提供一个标准的方式去获取不同环境下的全局对象

// node: global
// web: window self
const getGlobal = () => {
    if(typeof selt !== 'undefined'){
        return self
    }
    if(typeof window !== 'undefined'){
        return window
    }
    if(typeof global !== 'undefined'){
        return global
    }
    throw new Error("无法找到全局变量")
}
const global = getGlobal()
console.log(global)

//在 es11 中
//console.log(globalThis)

6. 可选链 Optional chaining

先判断这个方法属性是否存在，如果存在再往下取

const street = user && user.address && user.address.street
console.log(street)
const num = user && user.address && user.address.getNum && user.address.getNum()
console.log(num)

//es11 中,代码更加简洁
const street = user?.address?.street
console.log(street)
const num = user?.address?.getNum?.()
console.log(num)

?. 中间不能有空格

7. 空值合并运算符 Nullish coalescing Operator

const b = null
const a = b ?? 6  //当 b 为 undefined 或 null 时，取默认值
console.log(a)

?? 中间不能有空格

ES12

String.prototype.replaceAll()

在此之前只能使用正则替换，现在可以直接使用一个快捷方式；replaceAll。

//前
'jxvxscript'.replace(/x/g, 'a');

//后
// jxvxscript becomes javascript
'jxvxscript'.replaceAll('x', 'a');

Promise.any

Promise.any() 接收一个Promise可迭代对象，只要其中的一个 promise 成功，就返回那个已经成功的 promise 。 如果可迭代对象中没有一个 promise 成功（即所有的 promises 都失败/拒绝），就返回一个失败的 promise。

const promise1 = new Promise((resolve, reject) => reject('我是失败的 Promise_1'));
const promise2 = new Promise((resolve, reject) => reject('我是失败的 Promise_2'));
const promiseList = [promise1, promise2];
Promise.any(promiseList).then(values=>{  
  console.log(values);
})
.catch(e=>{  
  console.log(e);
});

WeakRefs

使用 WeakRefs 的 Class 类创建对对象的弱引用(对对象的弱引用是指当该对象应该被 GC 回收时不会阻止 GC 的回收行为)

Logical Assignment Operators

包括这些运算符：&&=， ||= ，??= ；

a = 1;
b = 2;
a&&=b // a=2

/*
以上代码相当于
a && a = b

??=
作用相当于
a ?? a = b
*/

Numeric Separators —— 数字分隔符

数字增加分隔符，可以使用 _ 分割数字，方便阅读较大的数字 对于跟数字打交道比较多的同学来说，可能会更加舒服

// previous syntax before ES12
const number = 92145723;

// new syntax coming with ES12
const number = 92_145_723;
console.log(number) // 92145723

//对国人来说可以这样，万，亿为单位
const number = 1_0000;
console.log(number) // 10000

结语

呼哈，终于整理完了，新鲜出炉的最全 ES6-ES12 新特性总结，希望对大家有用，整理不易，希望对大家有帮助。

以上关于最全ES6-ES12新特性总结，再也不怕面试官问了的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 1 赏

给作者打赏，鼓励TA抓紧创作！

微信微信 支付宝支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 最全ES6-ES12新特性总结，再也不怕面试官问了

咸鱼妹 普通

分享到：

相关推荐

发表回复