Es8,Es9,Es10相关

Es8部分:
1.async await(Generator 函数的语法糖)

function timeout() {
    return new Promise(resolve=>{
        setTimeout(()=>{
            resolve(1);
        },1000)
    })
}
async function foo() {
    let res = await timeout();
    console.log(res);
    console.log(2);
}
foo();

执行结果.png

2.Object.values() Object.entries()

let object = { 
    name: '张三',
    age:12
};

console.log(Object.keys(object));
console.log(Object.values(object));
console.log(Object.entries(object));

执行结果.png

3.Object.getOwnPropertyDescriptor()方法返回指定对象上一个自有属性对应的属性描述符。（自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）

//基本用法
let object = {
    name: '张安',
    age: 18
};
console.log(Object.getOwnPropertyDescriptor(object,'name'));//{value: '张安', writable: true, enumerable: true, configurable: true}

Object.getOwnPropertyDescriptor()返回全部属性

4.String.prototype.padStart() String.prototype.padEnd()
String.prototype.padStart():在开始的位置填充
String.prototype.padEnd():在结束的位置填充

//字符串填充
let str = 'abc';
console.log(str.padStart(5,'x'));//xxabc
console.log(str.padEnd(5,'x'));//abcxx

应用:日期处理

function getFormatDate(date){
    let year = date.getFullYear();
    let month = (date.getMonth()+1).toString().padStart(2,'0');
    let day = date.getDate().toString().padStart(2,'0');
    console.log(`${year}-${month}-${day}`);//2022-01-01
}
getFormatDate(new Date('2022-01-01'));

---

Es9部分:
1.异步迭代:

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++] : new Promise((resolve,reject)=>{
                resolve({ value: undefined, done: true })
            })
        }
    };
}
async function test(){
    for await (let item of arr){
        console.log(item);
    }
}
test();

执行结果.png

2.Rest运算符
数组:

let arr1 = [1,2,3]
let arr2 = [4,5,6]
let arr3 = [...arr1,...arr2]
console.log(arr3);//(6) [1, 2, 3, 4, 5, 6]

对象:
①深拷贝

let obj1 = {
    name: "张三",
    age: 18
};
let obj2 = { ...obj1 }
obj1.age = 19;
console.log(obj1);
console.log(obj2);

执行结果.png

②合并对象

let obj3 = {
    sex: "男"
}
let obj4 = {...obj1,...obj3}
console.log(obj4);//{name: '张三', age: 19, sex: '男'}

//属性相同的,后面的值覆盖前面的值
let obj5 = {
    sex:'女'
}
let obj6 = {...obj4,...obj5}
console.log(obj6);//{name: '张三', age: 19, sex: '女'}

③拓展

//...运算符必须放在最后面
let obj7 = {
    name: '王五',
    age: 18,
    sex: '男',
    habbit:'篮球'
}
let {name,age,...rest} = obj7;
console.log(name);//王五
console.log(age);//18
console.log(rest);//{sex: '男', habbit: '篮球'}

3.promise.prototype.finally

new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(123)
        //reject('失败')
    }, 1000)
}).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
}).finally(() => {//无论成功还是失败,一定会执行
    console.log('最后执行');
});

---

Es10:
1.Object.fromEntries()与Object.entries互逆

let entries = Object.entries(object)
console.log(entries);
let fromEntries = Object.fromEntries(entries);
console.log(fromEntries);

执行结果.png

应用场景:
map转对象

let map = new Map();
map.set('name','赵四');
map.set('age',20);
console.log(map);
console.log(Object.fromEntries(map));

执行结果.png

//筛选出大于80分的课程
const course = {
    math:89,
    chinese:95,
    english:75
}
let data = Object.entries(course).filter(([key,value])=>{
    return value > 80; 
})
console.log(data);
console.log(Object.fromEntries(data));

执行结果.png