es6-es12常用知识点

1、iterator，数据含有iterator接口，就可以使用for …of 遍历

let obj={
name:'a',
arr:[1,2,3,4],
[Symbol.iterator]:function(){
let index=0;
return{
next:()=>{
if(index<this.arr.length){
const res={value:this.arr[index],done:false};
index++;
return res
}else{
return {value:undefined,done:true};
}
}
}
}
}
for(let i of obj){console.log(i)}

2、生成器函数：是一个状态机（下述代码包括三种状态，‘hello’，‘world’,‘return’），同时是iterator生成器

function*helloGen(){
yield 'hello';
console.log(111)
yield 'world';
return 'ending';
}
let hw =helloGen() //内部函数不会执行，需要调用next()方法，hw是一个iterator迭代器
hw.next() //返回{value:'hello',done:false}
hw.next() //返回{value:'world',done:false}
hw.next() //返回{value:'endin',done:false}
hw.next() //返回{value:undefined,done:true}

可以解决回调地狱

// 异步编程 文件操作 网络操作（ajax，request） 数据库操作
// 需求：1s后控制台输出111 再过2s后控制台输出222 再过3s后控制台输出333
// 一种做法：回调地狱
// setTimeout(()=>{
// console.log(111);
// setTimeout(()=>{
// console.log(222);
// setTimeout(()=>{
// console.log(333);
// },3000)
// },2000)
// },1000)
// 另一种做法
function one(){
setTimeout(()=>{
console.log(111);
iterator.next();
},1000)
}
function two(){
setTimeout(()=>{
console.log(222);
iterator.next();
},1000)
}
function three(){
setTimeout(()=>{
console.log(333);
iterator.next();
},1000)
}

let iterator = function*(){
yield one();
yield two();
yield three();
}()
iterator.next()

3、array.includes,array.flat（）
4、幂运算** 2**10
5、Object.values(),返回对象value值组成的数组
Object.entries()，返回一个数组，[[key1,value1],[key2,value2,]
Object.getOwnPropertyDescriptors(),获取对象的描述
Object.fromEntries，把键值对列表（包括数组，map,）转换为对象,，可以和entries一起组成对象的过滤

const obj = {
  name: "jimmy",
  age: 18,
  height: 188,
};
console.log(Object.entries(obj)); // [ [ 'name', 'jimmy' ], [ 'age', 18 ], [ 'height', 188 ] ]
console.log(Object.entries([1, 2, 3])); // [ [ '0', 1 ], [ '1', 2 ], [ '2', 3 ] ]

const obj = {
  name: "jimmy",
  age: 18,
};
const desc = Object.getOwnPropertyDescriptors(obj);
console.log(desc);  
// 打印结果
{
  name: {
    value: 'jimmy',
    writable: true,
    enumerable: true,
    configurable: true
  },
  age: { 
   value: 18, 
   writable: true,
   enumerable: true, 
   configurable: true 
  }
}

const courses = {english:40,math:80}
let res = Object.entries(courses).filter(_=>_[1]>60)
let newCourses  = Object.fromEntries(res)

6、String.prototype.padStart/padEnd，trimStart/trimEnd
7、for await of
8、flatMap,map操作后flat为一个新数组

let arr = ['今天天气不错', '', '早上好']
arr.map(s => s.split(''))
// [["今", "天", "天", "气", "不", "错"],[""],["早", "上", "好"]]
arr.flatMap(s => s.split(''))
// ["今", "天", "天", "气", "不", "错", "", "早", "上", "好"]

9、??左侧操作符为null或undefined时返回右侧操作数，不能与&&或or一起使用
10、可选链**********（重要）
a?.b?.c不会报错导致整段代码崩溃，经常和？？运算符一起使用

let customer = {
  name: "jimmy",
  details: { age: 18 }
};
let customerCity = customer?.city ?? "成都";

11、bigint ，超过2**53-1可用bigint
12、promise.allSettled,无论状态正常或者异常，都会走到then中，有返回状态
promise.any()与race不同的是，只有多个promise全部失败，才会进入catch
13、&&=，||=，？？=