ES6~ES11新增特性合集

ES6

let 和 const

区别1：var声明的变量会挂载在window上，而let和const声明的变量不会
区别2：var声明的变量存在变量提升，而let和const不存在变量提升
区别3：let和const声明形成快作用域
区别4：同一作用域下的let和const不能声明同名变量，而var可以

字符串方法和模板字符串

// 模板字符串
const name = 'mySkey'
const str = `my name is ${name}`

// startsWith 判定字符串是否以另一个字符串开头，返回布尔值
console.log('hello wolrd'.startsWith('hello'))	// true

// endsWith	判定字符串是否以另一个字符串结尾，返回布尔值
console.log('hello wolrd'.endsWith('hello'))	// false

// includes	判定字符串是否以包含另一个字符串，返回布尔值
console.log('hello wolrd'.includes('hello'))	// true

// repeat 将字符串复制多次，参数就是被复制的次数
console.log('hello wolrd'.repeat(2))	// hello wolrdhello wolrd

解构赋值

//数组
let [a, b, c] =[1, 2, 3]
//对象
let{ a, b, c} = { a: 1, b: 2, c: 3}

数组方法

// Array.of 解决了Array在接收参数时的BUG
console.log(Array.of(3)) // [3]

// Array.from 将类数组对象转为数组，ES6之前，我们可以通过[].slice.call(arr)方式转为数组
console.log(Array.from(new Set([1, 2, 3])))

对象两个方法 is 和 assign

// Object.is 用于比较两者是否全等
console.log(NaN === NaN) //false
console.log(Object.is(NaN,NaN)) //true
console.log(+0 === -0) // true
console.log(Object.is(+0, -0)) // false

// Object.assign 用于对象属性的复制（浅复制）
var obj = {}
var obj1 = {sex ：'女'}
Object.assign(obj, obj1)

箭头函数

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

// 一个参数时，可以不用()包含形参； 一句执行语句时，可以不用{}包含代码块； 一行代码时是有返回值的。
let fn = num=>console.log(num)

// 两个参数
let fn = (a,b)=>a+b

// 箭头函数中的this
function foo() {
    setTimeout(() => {
        console.log('id:', this.id);
    }, 100);
}

var id = 21;

foo.call({ id: 42 }); // id: 42
//
foo::bar;
// 等同于
bar.bind(foo);

foo::bar(...arguments);
// 等同于
bar.apply(foo, arguments);

Proxy

ES6中增加了一个Proxy代理类，他可以对指定的对象的访问操作和修改操作进行拦截，vue2.0是通过Object.defineProperty来拦截，要是开启深层拦截将很耗费性能，所以对于对象，数组的更改，无法数据动态响应；在vue3.0中将使用Proxy来进行拦截，将解决这一问题。

var proxy = new Proxy(原对象，{
    get:function(原对象,属性名){},
    set:function(原对象，属性名，属性值){},
})

Set和 WeakSet

Set 它类似于数组，但是成员的值都是唯一的，没有重复的值，使用场景并不多，但是用来做数组去重很方便
WeakSet 与 Set 有两个区别。1、WeakSet 的成员只能是对象 2、WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会自动回收该对象所占用的内存，不考虑该对象还存在于 WeakSet 之中

// 数组去重
let removeSame = arr => [...new Set(arr)]

// 也可以用于字符串去重
let removeSameStr = str => [...new Set(str)].join('')

// WeakSet
const a = [[1, 2], [3, 4]];
const ws = new WeakSet(a);
// WeakSet {[1, 2], [3, 4]}

Map 和 WeakMap

JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。
WeakMap 结构与Map结构类似，也是用于生成键值对的集合。WeakMap与Map的区别有两点:1、WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名 2、WeakMap的键名所指向的对象，不计入垃圾回收机制

const map = new Map([
    ['name', '张三'],
    ['title', 'Author']
]);

map.size // 2
map.has('name') // true
map.get('name') // "张三"
map.has('title') // true
map.get('title') // "Author"

// WeakMap
const wm = new WeakMap();
let key = {};
let obj = {foo: 1};

wm.set(key, obj);
obj = null;
wm.get(key)
// Object {foo: 1}

Symbol

let mySymbol = Symbol();

// 第一种写法
let a = {};
a[mySymbol] = 'Hello!';

// 第二种写法
let a = {
[mySymbol]: 'Hello!'
};

// 第三种写法
let a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });

// 以上写法都得到同样结果
a[mySymbol] // "Hello!"

Promise

Promise是es6用来处理异步的对象，分为三种状态：pending、fulfilled、rejected。对象拥有resolve和reject两个方法，分别在里面处理正确情况和异常情况。

let getData = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            let data = { code: 404, msg: 'I am sleeping' }
            try{
                // throw('我非要出个错，来看一下catch有没有用')
                // throw 强制产生一个错误，Promis的catch就能捕获到错误
                resolve(data)
            }catch(err){
                reject(err)
            }
        }, 3000)
    })
}

// 调用函数，在函数返回时使用数据
getData().then(res=>{
    console.log('后台说：' + res.msg)
}).catch(err=>{
    console.log('发生的错误是：' + err)
})

Generator

Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。在node的中间件中使用广泛，中间件授权之类，vue的路由鉴权也有使用

let getData = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            let data = { code: 404, msg: 'I am sleeping' }
            resolve(data)
        }, 3000)
    })
}

// 调用函数，在函数返回时使用数据
(function * () {
    let data = yield getData();
    return data;
})().next().value.then(res=>{
    console.log(res)
})

Iterator 和 for...of循环

for...of 和 for...in 区别在于 for...in会循环原型链性能差
具有Symbol.iterator属性可以使用for...of
JavaScript 原有的表示“集合”的数据结构，主要是数组（Array）和对象（Object），ES6 又添加了Map和Set。这样就有了四种数据集合，用户还可以组合使用它们，定义自己的数据结构，比如数组的成员是Map，Map的成员是对象。这样就需要一种统一的接口机制，来处理所有不同的数据结构。
遍历器（Iterator）就是这样一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。遍历器可以直接遍历迭代器的结果，而不需要每次next

function* foo() {
    yield 1;
    yield 2;
    yield 3;
    yield 4;
    yield 5;
    return 6;
}

for (let v of foo()) {
    console.log(v);
}
// 1 2 3 4 5

Class

class的本质是function,它可以看做是一个语法糖，让对象原型的写法更加清晰，更像面向对象编程的写法

class Person {
    constructor(props, name, age){
        super(props);
        this.name = name;
        this.age = age;
    }
    sing(){
        console.log('sing');
    }
    cry(){
        console.log('cry');
    }
}

Person.prototype = {
    talk: function(){
    console.log('talk')
}
let mySkey = new Person('mySkey', 23)
mySkey.talk()

模块化

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。

ES7

Array.prototype.includes()

arr.includes(x)
// 相当于
arr.indexOf(x) >= 0

指数操作符 **

在ES7中引入了指数运算符**，** 有与Math.pow(..)等效的计算结果。

console.log(2**10);// 输出1024

ES8

async/await

async,await异步解决方案：优化回调地狱，ES6中的promise解决了回调地狱，但是要连续打点调用then，就会显得不清楚，所以引入了async函数，awiat表达式

async function process(array) {
    for await (let i of array) {
        doSomething(i);
    }
}

Object.values()

Object.values()就是将对象的值合并到一个数组中， Object.keys() 是将对象的key合并到一个数组中

const obj = {a: 1, b: 2, c: 3};
console.log(Object.values(obj)) // [1, 2, 3]

Object.entries()和Object.fromEntries

Object.entries()函数返回一个给定对象自身可枚举属性的键值对的数组。

let obj = {a:1, b:2, c:3};
console.log(Object.entries(obj)) // [[a, 1], [b, 2],[c,3]]

const map = new Map([ ['foo', 'bar'], ['baz', 42] ]);
const obj = Object.fromEntries(map);
console.log(obj);
// { foo: "bar", baz: 42 }
const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ];
const obj = Object.fromEntries(arr);
console.log(obj);
// { 0: "a", 1: "b", 2: "c" }

string padStart() 和 padEnd

允许将空字符串或其他字符串添加到原始字符串的开头或结尾。

console.log('8'.padStart(2, '0')) arguments[0] => length

ES9

异步迭代

在async/await的某些时刻，你可能尝试在同步循环中调用异步函数。例如：
// 以下两种方式就循环本身依旧保持同步

async function process(array) {
    for (let i of array) {
        await doSomething(i);
    }
}
async function process(array) {
    array.forEach(async i => {
        await doSomething(i);
    });
}

// 想要同步循环，需要以下写法
async function process(array) {
    for await (let i of array) {
        doSomething(i);
    }
}

Promise.finally()

function doSomething() {
    doSomething1()
    .then(doSomething2)
    .then(doSomething3)
    .catch(err => {
        console.log(err);
    })
    .finally(() => {
        // finish here!	// 清除loading之类的
    });
}

ES10

Array的flat()方法和flatMap()方法

// flat()方法最基本的作用就是数组降维
var arr3 = [[1,2,[3]],4,5,[6]]
arr3.flat(Infinity); /使用 Infinity 作为深度，展开任意深度的嵌套数组
// [1, 2, 3, 4, 5, 6]

// 可以利用flat()方法的特性来去除数组的空项
var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]

String的trimStart()方法和trimEnd()方法

分别是去除首位空白符的

ES11

Nullish coalescing Operator(空值处理)

如果表达式在 ?? 的左侧运算符求值为undefined或null，返回其右侧。

let user = {
u1: 0,
u2: false,
u3: null,
u4: undefined
u5: '',
}
let u1 = user.u1 || '用户1' // 用户1
let u2 = user.u2 || '用户2' // 用户2
let u3 = user.u3 || '用户3' // 用户3
let u4 = user.u4 || '用户4' // 用户4
let u5 = user.u5 || '用户5' // 用户5
// es11语法
let u1 = user.u1 ?? '用户1' // 0
let u2 = user.u2 ?? '用户2' // false
let u3 = user.u3 ?? '用户3' // 用户3
let u4 = user.u4 ?? '用户4' // 用户4
let u5 = user.u5 ?? '用户5' // ''

Optional chaining（可选链）

?. 用户检测不确定的中间节点，如果不存在中间节点则返回undefined。避免了程序报错直接导致整个应用挂掉，可以用lodash的 get 来处理这种链路不确定性

let person = {}
let age = person.info.age
// TypeError: Cannot read property 'name' of undefined
// 因为person的info属性为undefined，那么直接就报错了
let age = person.info?.age
// undefined

使用lodash
import _ from 'lodash'
let age = _.get(person, 'person.info.age', '')

Promise.allSettled

使用 Promise.all 来并发两个接口，如果其中任意一个异常，则两个区域都无法正常渲染。Promise.allSettled 则可以避免这个问题

Promise.all([
    new Promise.reject('a1'),
    new Promise.resolve('a2')
]).then((ret) => {
    // 不会执行
    console.log(ret)
}).catch((error) => {
    // 因为有一个promise返回为reject。所以程序只会走到这里
    // 输出：a1
    console.log(error)
})

// 使用es11的Promise.allSettled
Promise.allSettled([
    new Promise.reject('a1'),
    new Promise.resolve('a2')
]).then((ret) => {
    // 输出
    // 0: {status: "fulfilled", value: "a1"},
    // 1: {status: "rejected", value: "a2"}
    console.log(ret)

    // 这样可以过滤掉rejected，避免整段程序运行错乱
    handleFun(ret.filter(el => el.status !== 'rejected'))
})

Dynamic import

动态引入，之前的import是静态引入

const util = './util.js'
import(util).then((module) => {
    module.fun1();
    module.fun2();
});

(async () => {
    const util = './util.js';
    const module = await import(util)
    const fun1 = module.fun1(1);
    const fun2 = module.fun1(2);
})();

BigInt

BigInt是第7个基本类型，它是一个任意精度的整数。变量可以代表2⁵³不仅是在9007199254740992处的最大值

// 创建方法一：在整数后面加 n
let bigInt = 9999999999999999n;
// 创建方法二：BigInt函数
let bigInt2 = BigInt(9999999999999999);
let bigInt3 = BigInt('9999999999999999');

// bigIng类型可以进行更大的值计算
let sum = bigInt + bigInt2 // 19999999999999999n
sum.toString() // 19999999999999999 使用toString可以去掉后面的n

// bigint是一种新的原始类型
typeof 9999999999999999n; // -> 'bigint

export * as ns from “mod”

这是对 ES 规范的有力补充，它允许开发者以新名称导出另一模块的命名空间外部对象。用于集成多个模块到一个文件

export * as ns from "mod"