JS-ES7-ES12

只爱碎花裙
141 阅读6分钟

Array Includes（ES7）

  • ES7之前，使用indexOf()根据返回结果是否为小于0来判断一个数组中是否包含某个元素，不等于-1的话则包含
  • ES7，新增includes(),如果包含返回true

指数运算符（ES7）

  • ES7之前，使用Math.pow(x,y)来计算x的y次方
  • ES7，新增指数运算符**（exponentiation）,使用xy来计算x的y次方

Object values(ES8)

  • ES8之前，使用Object.keys获取一个对象所有的key
  • ES8，新增Object.values获取一个对象所有的value

Object entries（ES8）

  • 通过Object entries可以获取到一个数组，数组中会存放可枚举属性的键值对数组

String Padding（ES8）

  • ES8，新增padStart和padEnd方法，对字符串的首尾进行填充，来实现某种格式化效果

Trailing Commas（ES8）

  • ES8，允许在函数定义和调用时在结尾多加一个逗号

Object Descriptors（ES8）

  • getOwnPropertyDescriptor(obj, prop)

    • 获取对象的特定属性描述符

  • getOwnPropertyDescriptors(obj)

    • 获取对象的所有属性描述符

Async Function（ES8）

  • async，await
  • Promise部分详细记录

Async iterators（ES9）

  • 迭代器部分详细记录

Object sperad operators（ES9）

  • 构建对象字面量时，数组会按照索引值: 元素的格式添加到对象中

    const names = ['aa', 'bb', 'cc']
const info = {name: 'zzy', age: 22}
// 数组会按照索引值和元素的格式添加到对象中
const obj = {...info, address: '广州市', ...names}
console.log(obj); // {'0': 'aa', '1': 'bb', '2': 'cc', name: 'zzy', age: 22, address: '广州市' }

Promise finally（ES9）

  • Promise部分详细记录

flat （ES10）

  • flat()方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回

  • 默认降维一层

    const nums = [10, [1,2], [[3,4], [4,2]]]
const newNums = nums.flat() // 默认降维一层
console.log(newNums); // [ 10, 1, 2, [ 3, 4 ], [ 4, 2 ] ]

const newNums2 = nums.flat(2) // 降维2次
console.log(newNums2); // [  10, 1, 2, 3, 4, 4, 2]

flatMap（ES10）

  • flatMap()方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组

    • flatMap先执行map操作，再进行flat操作
    • flatMap中的flat相当于深度为1
    • flatMa的第2个参数可以绑定this

  • 应用场景

    const msg = ['hello world', 'my name is zzy']
const words = msg.flatMap(i => {
  return i.split(" ")
})
console.log(words); // ['hello', 'world', 'my', 'name','is', 'zzy']

Object fromEntries（ES10）

  • 通过Object.entries将一个对象转换成entries，

  • 通过Object.formEntries将一个entries转换成对象

    const obj = {
    name: 'zzy',
    age: 22
}

const entries = Object.entries(obj) // [ [ 'name', 'zzy' ], [ 'age', 22 ] ]
console.log(entries);

// 将entries格式转为对象格式
// 1.遍历数组时 for...in 拿到的是索引值，for...of拿到的才是元素
const newObj = {}
for(const entry of entries) {
    newObj[entry[0]] = entry[1]
}
console.log(newObj); // { name: 'zzy', age: 22 }
// 2.ES10中新增Object.fromEntries方法
const newObj1 = Object.fromEntries(entries)
console.log(newObj1); // { name: 'zzy', age: 22 }

  • 应用场景

    const queryString = 'name=zzy&age=22'
const queryParams = new URLSearchParams(queryString)
console.log(queryParams); // URLSearchParams { 'name' => 'zzy', 'age' => '22' }
for(const param of queryParams) {
    console.log(param); // [ 'name', 'zzy' ] [ 'age', '22' ]
}

const paramObj = Object.fromEntries(queryParams)
console.log(paramObj); // { name: 'zzy', age: '22' }

trimStart trimEnd（ES10）

  • 去除首尾空字符串

Symbol description（ES10）

  • const s3 = Symbol("aa");
console.log(s3.description); // aa

Optional catch binding（ES10）

  • try catch部分详细记录

BigInt（ES11）

  • ES11之前，无法正确表示过大的数字

    • 大于MAX_SAFE_INTEGER的数值，表示可能会出错

      const maxInt = Number.MAX_SAFE_INTEGER
console.log(maxInt); // 9007199254740991
// 超过MAX_SAFE_INTEGER的数字计算可能会出现错误
console.log(maxInt + 1); // 9007199254740992
console.log(maxInt + 2); // 9007199254740992

  • ES11，新增数据类型BigInt，表示大的整数

    • BigInt的表示方法是在数值的后面加上n

      const bigInt = 9007199254740991n
console.log(bigInt); // 9007199254740991n
console.log(bigInt + 10n); //9007199254741001n
// 小数转大数
const num = 100
console.log(bigInt + BigInt(num)); // 9007199254741091n
// 大数转小数
const smallNum = Number(bigInt)
console.log(smallNum); // 9007199254740991

Nullish Coalescing Operator（ES11）

  • 空值合并操作符

    const foo = 0
// ES11之前采用逻辑或
const bar = foo || 'default value' //针对0和空字符串无法正确赋值z
// ES11新增空值合并运算符 ??
const baz = foo ?? 'default value' //
console.log(bar); // default value
console.log(baz); // 0

Optional Chaining（ES11）

  • 可选链

    • 使代码在进行null和undefined判断时更加清晰和简洁
    const info = {
    name: "zzy",
    // friend: {
    //   name: "aaa",
    //   girlFriend: { name: "bbb" },
    // },
};
// 可选链 ?.
console.log(info.friend?.girlFriend?.name); // undefined

Global This（ES11）

  • ES11之前，获取JS环境的全局对象
    • 在浏览器中通过this，window
    • 在Node中通过global
  • ES11新增globalThis,在所有环境下都指向全局对象

for...in标准化（ES11）

  • for...in用于遍历对象的key

Dynamic Import（ES11）

  • ES Module模块化详细记录

Promise.allSettled（ES11）

  • Promise详细记录

import meta (ES11)

  • ES Module模块化详细记录

FinalizationRegistry（ES12）

  • 当一个在注册表中注册的对象被回收时，请求在某个时间点上调用一个清理回调（finalizer）

  • 通过调用registry方法，注册任何你想要清理回调的对象，传入该对象和所含的值

    const finalRegistry = new FinalizationRegistry((value) => {
    console.log('注册在finalRegistry中的某个对象被销毁', value);
})

let obj = {name: 'zzy'}
let info = {name: 'aaa'}
finalRegistry.register(obj, 'obj')
finalRegistry.register(info, 'info')
obj = null
info = null

    image.png

WeakRef（ES12）

  • 默认将一个对象赋值给另一个引用，那这个引用是强引用

  • 通过WeakRef可以成为弱引用

    const finalRegistry = new FinalizationRegistry((value) => {
    console.log('注册在finalRegistry中的某个对象被销毁', value);
})

let obj = {name: '强引用'}
let weakObj = {name: '弱引用'}
let weakObj2 = {name: '弱引用2'}

// 强引用
let info = obj
// WeakSet弱引用
let weakInfo = new WeakSet()
weakInfo.add(weakObj)
// ES12提供类 WeakRef弱引用
let weakInfo2 = new WeakRef(weakObj2)


finalRegistry.register(obj, 'obj')
finalRegistry.register(weakObj, 'weakObj')
finalRegistry.register(weakObj2, 'weakObj2')

// WeakRef.prototype.defef():
// 如果原对象没有销毁，那么可以获取到原对象
console.log(weakInfo2.deref().name); // 弱引用2
// 当对象被销毁后获取到undefined
setTimeout(() => {
    // 可选链方式
    console.log(weakInfo2.deref()?.name); // undefined
                // 逻辑与方式
                console.log(weakInfo2.info() && weakInfo2.deref().name); // undefined
},10000)

obj = null // 依然有info指向{name: '强引用'}，所以不会被回收
weakObj = null // 虽然weakObj指向{name: '弱引用'}，但是是弱引用，依然会被回收
weakObj2 = null // 虽然weakObj2指向{name: '弱引用2'}，但是是弱引用，依然会被回收

logical assignment operators（ES12）

  • 逻辑赋值运算符

    • ||= 逻辑或赋值运算

      let msg = undefined
msg = msg || 'default value'
msg ||= 'default value' // ES12
console.log(msg); // default value

    • &&= 逻辑与赋值运算

      // &&
const obj = {
    name: 'zzy',
    foo: function () {
        console.log('foo~');
    }
}
// 判断obj.foo是否存在，如果存在则调用
obj.foo && obj.foo() // foo~
// &&=
let info = {
    name: 'zzy'
}
// 判断info是否存在，如果存在，将info.info
info = info && info.name
console.log(info); // zzy

    • ??= 逻辑空赋值运算

      let message = 0
let message2 = 0
message ??= "default value"
message2 ||= "default value" // 对0或者空字符串无法正确赋值
console.log(message); // 0
console.log(message2); // default value

Numeric Separator（ES12）

  • 大的数值的连接符,将数字进行下划线分割

    console.log(1000_000_000) // 1000000000

String.replaceAll（ES12）

  • 字符串替换

    const str = 'abcabc'
const newStr = str.replaceAll('a', '-')
console.log(newStr); // -bc-bc
avatar
文章
阅读
粉丝