ES7
includes和平方运算符
// 判断数组内是否存在某元素的方法includes()
const Arr = [1,2,3,4,5,NaN]
// ES7之前
console.log(Arr.indexOf(2)); //存在返回索引值，不存在返回-1
// ES7
console.log(Arr.includes(2)); //存在返回真
console.log(Arr.includes(2,3)); //第二个参数为从第几个索引值开始判断
// 区别
console.log(Arr.indexOf(NaN)); //无法判断NaN
console.log(Arr.includes(NaN)); //true
// 平方运算符
// ES7之前
const num1 = Math.pow(3,3) //3的三次方 9
console.log('num1: ', num1);
// ES7
const num2 = 3 ** 3
console.log('num2: ', num2);
ES8
1.Object.value() 获取对象所有的值组成的数组
2.Object.entries() 将对象转换为entries类型[[key,value],[key,value]]，用于new Map()
3.padStart() padEnd() 参数:(总长度,补全字符串),第二个参数不填默认填充空格，可用于时间前补充0
// 应用场景，获得规范时间
const date = new Date()
const hh = String(date.getHours()).padStart(2,0)
const mm = String(date.getMinutes()).padStart(2,0)
const ss = String(date.getSeconds()).padStart(2,0)
console.log(`${hh}:${mm}:${ss}`);
4.async,await:后面再写一篇文章单独讲
ES9
Promise:后面再写一篇文章单独讲
ES10
1.flat(deep=1)数组降维，维度默认为1层 设置为Infinity扁平化最深一层
2.flatMap(item=>{ })数组映射且降低1维度 flatMap 方法等效于 array.map().flat()
// flat数组降维，参数为维度，默认为1
const arr = [1,2,3,[4,5],6,7,[[8,9],12,1,3,5,6,7]]
const newArr = arr.flat(Infinity)
console.log('newArr: ', newArr);
// flatMap数组映射且降维1层
const strArr = ["Hello World","hello fmy","HELLO zs"]
const newStrArr = strArr.flatMap(item=>{
return item.split(" ")
})
console.log('newStrArr: ', newStrArr);
3.Object.fromEntries() 把enteris转为对象
// enteris转对象，Map类型也能用，应用场景，拿URL参数
const url = "name=李斯&age=22"
const urlParmes = new URLSearchParams(url) //这个方法返回的是类似Map类型的映射关系，也可用fromEnteris
console.log('urlParmes: ', urlParmes);
const objParmes = Object.fromEntries(urlParmes)
console.log('objParmes: ', objParmes); //{name:"李斯",age:22}
4.trim trimStart trimEnd 去字符串首尾空格 5.try{} catch{} 捕获异常
ES11
1.BigInt大整数类型，末尾加n，最大值9007199254740991
const maxInt = Number.MAX_SAFE_INTEGER //获取最大数字
console.log('maxInt: ', maxInt); //最大的数字 超过了不安全 计算不一定准确 9007199254740991
console.log('maxInt+1: ', maxInt+1); // 9007199254740992
console.log('maxInt+2: ', maxInt+2); // 9007199254740992 出错了
const bigInt = 9007199254740991n //加个n代表大数字
console.log(bigInt + 2n); //这个时候就正确了 9007199254740993 同为大数字类型才能操作 不然会报错
console.log(bigInt + BigInt(2)); // 9007199254740993 这种也可以
console.log(Number(bigInt)) //大数字类型转为普通类型
- ??空值合并运算符 用来取代||误判0和“”为false的情况
console.log(undefined || "空值"); //空值
console.log(null || "空值"); //空值
console.log("" || "空值"); //空值 这两个被误认为空值了 所以是错误的
console.log(0 || "空值"); //空值
console.log("" ?? "空值"); //"" 因此引入了空值合并运算符
console.log(0 ?? "空值"); //0 只有null和undefined为false
- ?.可选链，判断对象是否有该属性，没有就不继续查找直接返回undefined
// 可选链?. 知道就好 不要乱用 不报错更难找bug，甩锅后端
const obj = {
name:"李斯",
address:{}
}
//这样会先判断address是否存在 存在则继续找下层，不存在则结束查找直接返回undefined,不会报错影响后面代码执行
console.log(obj.address?.area?.name); //undefined
console.log(obj.address.area.name); //报错
console.log("剩余执行代码"); //上行代码报错导致后续代码不执行
4.globalThis 获取当前环境的全局对象 浏览器为window，node环境为global
ES12
1.FinalizationRegistry监听某个对象内存被回收执行回调
// FinalizationRegistry类监听一个对象回收，执行回调
const finalRegistry = new FinalizationRegistry(val=>{
console.log(val,"已回收");
})
let obj = {}
finalRegistry.register(obj,"obj对象") //监听的对象以及回调接收的val值
obj = null
2.WeakRef创建一个弱引用对象
// WeakRef创建一个弱引用，需要使用deref()才能获取属性
const finalRegistry = new FinalizationRegistry(val=>{
console.log(val,"已回收");
console.log(newObj.deref()?.name); //undefined 证明回收成功
})
let obj = {name:"李斯"}
const newObj = new WeakRef(obj)
// 不能直接打印整个obj 否则obj不会被GC回收，造成内存泄漏
// console.log('newObj: ', newObj.deref());
console.log(newObj.deref().name);
finalRegistry.register(obj,"obj")
obj = null
3.逻辑赋值运算符，与上面空值合并运算符类似，管道符会把0和""当做false
// 逻辑赋值运算||= &&= ??=
let stra = undefined
let straa = 0
stra ||= "值为undefined"
console.log('stra: ', stra); //值为undefined
straa ||= "值为undefined"
console.log('straa: ', straa); //值为undefined
let strb = undefined
let strbb = 0
strb ??= "值为undefined"
console.log('strb: ', strb); //值为undefined
strbb ??= "值为undefined"
console.log('strbb: ', strbb); //0
