Array Includes
const names = [1,2,3,NaN]
//在es7之前一般使用indexOf来判断数组中是否包含某项
if(names.indexOf(1) !== -1)console.log('包含该元素')
//es7
if(names.includes(1))console.log('包含该元素')
//但是使用indexOf无法判断数组中是否存在NaN,使用includes可以判断
if(names.indexOf(NaN)!== -1)console.log('包含NaN元素') //不会执行
if(names.includes(NaN))console.log('包含NaN元素')
指数运算符
//如果想得到数字的平方，在es7之前需要调用Math方法
const res1 = Math.pow(3,3) //27 3的三次方
const res = 3 ** 3 //es新增
ES8 Object Values
//获取对象的所有value值
const obj ={name:'xi',age:20}
const objV = Object.values(obj) //返回一个数组['xi',20]
Object entries
const obj = {name:'xi',age:20}
//以数组的形式存在，方便遍历
const arr = Object.entries(obj) //[['name','xi'],['age',20]]
arr.forEach(item=>console.log(item[0],item[1])) //name 'xi',age 20
String Padding填充
const message = 'Hello World'
const newMessage = message.padStart(15,'*') //****Hello World
//第一个参数为位数，以这个位数为准，往前填充，如果第二个参数有，则使用第二个参数进行填充，返回一个新的变量
const newnewMessage = message.padEnd(15,'-') //Hello World----
//第一个参数为位数，以这个为数为准，向后填充，如果第二个参数有，则使用第二个参数进行填充
//一般使用在银行卡或某些隐私显示处
const cardNumber = 11010111010101
const lastNumber = cardNumber.slice(-4) //0101
const finalNumber = lastNumber.padStart(cardNumber,'*') //**********0101
Object Descriptors
const obj = {
name:'xi',
age:20,
gendelr:'male'
}
console.log(Object.getOwnPropertyDescriptor(obj)) //undefined
console.log(Object.getOwnPropertyDescriptors(obj)) //V得到如下
-
{name: {…}, age: {…}, gendelr: {…}}
-
- age: {value: 20, writable: true, enumerable: true, configurable: true}
- gendelr: {value: ‘male’, writable: true, enumerable: true, configurable: true}
- name: {value: ‘xi’, writable: true, enumerable: true, configurable: true}
Promise async await
async foo(){
await axios({})
}
ES10 flat flatMap降维
const arr = [1,2,[3,4],[[5,6],[7,8]]]
const arr2 = arr.flat() //默认为1 [1,2,3,4,[5,6],[7,8]]
const arr3 = arr.flat(2) //[1,2,3,4,5,6,7,8] 每一项为独立的
const messages = ['Hello World']
const words = messages.flatMap(item=>{ //['Hello','World'] 顺便降维
return item.split(' ')
})
const words2 = messages.Map(item=>{ //[['Hello','World']] 还需要降维
return item.split(' ')
})
Object fromEntries
const obj = {name:'xi',age:20}
const arr = Object.entries(obj) //[['name','xi'],['age',20]]
//如果得到了entries的数据格式，想回返原来的格式
const newObj = Object.fromEntries(arr) //{name:'xi',age:20}
//应用场景
const queryString = 'name=why&age=20&height=1.88'
const queryParams = new URLSearchParams(queryString)
//[['name','why'],['age',20],['height',1.88]] //得到的是一个数组可以进行遍历
const paramObj = Object.fromEntries(queryParams) //{name:'why',age:20,height:1.88}
trimeStart trimeEnd 去除前后空格
trim()会去除前后的空格
bigInt基于大数
const bigInt = 900000000000000000001n //以n结尾
//如果需要加一个小数 bigInt +10 //不太安全，需要将10转换为bigInt型
bigInt + 10n 才可
Nullish Coalescing Operator 空值合并运算??
//当？？前的值为undefined或null时使用？？后的值，否则使用？？前的值
const foo = 0
const bar = foo || '1' //最终为1
const baz = foo ?? '1' //最终为0
Optional Chaining 可选链 ?.
?.当？前的不为undefined或null时，执行.之后的语法,不会造成后续代码的不执行
Global This
console.log(globalThis) //在不同环境下显示不同 node与浏览器中的全局对象不同
ES12 FinalizationRegistry
//在某个对象被销毁时执行
const finalRegistry = new FinalizationRegistry(()=>{
console.log('注册在finalRegistry中的对象某一个被销毁了')
})
let obj = {}
finalRegistry.register(obj) //注册的时候可以进行传递第二个参数为自己的标识
obj =null //GC不是立即回收，在一段时候后执行final的回调函数
WeakRef 弱引用
const finalRegistry = new FinalizationRegistry(()=>{
console.log('注册在finalRegistry中的对象某一个被销毁了')
})
let obj = {}
let info = new WearRef(obj)
finalRegistry.register(obj)
obj =null
console.log(info.deref())
//如果在obj指向null时，gc还没有进行回收，则可以访问，如果已经被销毁，则为undefined
logical assingn operator逻辑赋值运算
let message = undefined
message = message || 'Default'
//与下面的等价
message ||= 'Default'
message &&= '为真使用我'
message ??= 'Default' //当message为undefined或null时将后面的赋值给message