ES7~ES13新特性

Rsquo
557 阅读6分钟

一、ES7知识点

  • includes
    • 通过includes来判断一个数组中是否包含一个指定的元素，根据情况，如果包含则返回 true，否则返回false
    • arr.includes(valueToFind[, fromIndex])
  • 指数运算符
    • ** 运算符，对数字计算乘方

二、ES8知识点

  • Object.values()

  • Object.entries()

    • 通过 Object.entries 可以获取到一个数组，数组中会存放可枚举属性的键值对数组，可以针对对象、数组、字符串进行操作
    const obj = {
  name: "kobe",
  age: 24,
  height: 1.88,
  address: "洛杉矶"
}

// 1.获取所有的key
const keys = Object.keys(obj)
console.log(keys)

// 2.ES8 Object.values
const values = Object.values(obj)
console.log(values)

// 3.ES8 Object.entries
// 3.1. 对对象操作
const entries = Object.entries(obj)
console.log(entries)
for (const entry of entries) {
  const [key, value] = entry
  console.log(key, value)
}

// 3.2. 对数组/字符串操作(索引作为key)
console.log(Object.entries(["abc", "cba"]))
console.log(Object.entries("Hello"))

  • String - padStart/padEnd

    • 对字符串的首尾进行填充
    • 应用：对身份证、银行卡的前面位数进行隐藏
    // 1.应用场景一: 对时间进行格式化
const minute = "15".padStart(2, "0")
const second = "6".padStart(2, "0")

console.log(`${minute}:${second}`) // 15:06

// 2.应用场景二: 对一些敏感数据格式化
let cardNumber = "132666200001018899"
const sliceNumber = cardNumber.slice(-4)
cardNumber = sliceNumber.padStart(cardNumber.length, "*")
console.log(cardNumber) // **************8899

  • trailing commas：允许在函数定义和调用时多加一个逗号

    function sum(num1, num2, ) {
  console.log(num1, num2)
}

sum(10, 20, )
  • Async Function：async、await（后续promise补充）

三、ES9知识点

  • Async iterators：（后续迭代器补充）

  • Object spread operators：扩展运算符

  • Promise finally：（后续Promise补充）

四、ES10知识点

  • flat/flatMap

    • flat：按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回
    const nums = [10, 20, [111, 222], [333, 444], [[123, 321], [231, 312]]]
const newNums1 = nums.flat(1)
console.log(newNums1) // [10, 20, 111, 222, 333, 444, [123, 321], [231, 312]]
const newNums2 = nums.flat(2)
console.log(newNums2) // [10, 20, 111, 222, 333, 444, 123, 321, 231, 312]
// 无限拍平
const newNums3 = nums.flat(Infinity)
console.log(newNums3) // [10, 20, 111, 222, 333, 444, 123, 321, 231, 312]
    • flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组
      • flatMap是先进行map操作，再做flat的操作
      • flatMap中的flat相当于深度为1
    const messages = [
  "Hello World aaaaa",
  "Hello kobe",
  "你好啊 李银河"
]

// 1.for循环的方式:
// const newInfos = []
// for (const item of messages) {
//   const infos = item.split(" ")
//   for (const info of infos) {
//     newInfos.push(info)
//   }
// }
// console.log(newInfos)

// 2.先进行map, 再进行flat操作
// const newMessages = messages.map(item => item.split(" "))
// const finalMessages = newMessages.flat(1)
// console.log(finalMessages) // ['Hello', 'World', 'aaaaa', 'Hello', 'kobe', '你好啊', '李银河']

// 3.flatMap
const finalMessages = messages.flatMap(item => item.split(" "))
console.log(finalMessages) // ['Hello', 'World', 'aaaaa', 'Hello', 'kobe', '你好啊', '李银河']

  • Object.fromEntries

    • 将一个entries转换成对象
    // 1.对象
const obj = {
  name: "kobe",
  age: 24,
  height: 1.88
}

const entries = Object.entries(obj)
const info = Object.fromEntries(entries)
console.log(info) // {name: 'kobe', age: 24, height: 1.88}

// 2.应用
const searchString = "?name=kobe&age=24&height=1.88"
const params = new URLSearchParams(searchString)
console.log(params.get("name"))
console.log(params.get("age"))
// console.log(params.entries())

// for (const item of params.entries()) {
//   console.log(item)
// }

const paramObj = Object.fromEntries(params)
console.log(paramObj) // {name: 'kobe', age: '24', height: '1.88'}

  • trimStart/trimEnd：去除字符串首部或者尾部的空格

    const message = "   Hello World    "
console.log(message.trim())
console.log(message.trimStart())
console.log(message.trimEnd())
  • Symbol description（ES6文章已提到）
  • Optional catch binding：（后续try cach补充）

五、ES11知识点

  • BigInt -> n

    • 在早期的JavaScript中，不能正确的表示过大的数字：大于MAX_SAFE_INTEGER的数值，表示的可能是不正确的
    • ES11中，引入了新的数据类型BigInt，用于表示大的整数：BitInt的表示方法是在数值的后面加上n
    console.log(Number.MAX_SAFE_INTEGER) // 9007199254740991
const num1 = 9007199254740992n
const num2 = 9007199254740993n
console.log(num1, num2) // 9007199254740992n 9007199254740993n

  • 空值合并运算符（过滤null、undefined） ??

    let info = undefined
// info = info || "默认值"
// console.log(info)

// ??: 空值合并运算符
info = info ?? "默认值"
console.log(info)

  • 可选链的使用 ?.

    • 代码在进行null和undefined判断时更加清晰和简洁
    • 函数调用也需要
    const obj = {
  name: "lilei",
  friend: {
    name: "hanmeimei",
    // running: function() {
    //   console.log("running~")
    // }
  }
}

// 1.直接调用: 如果没有会报错
// obj.friend.running()

// 2.if判断: 麻烦/不够简洁
// if (obj.friend && obj.friend.running) {
//   obj.friend.running()
// }

// 3.可选链的用法: ?.
obj?.friend?.running?.()
  • globalThis

    • 在之前获取JavaScript环境的全局对象，不同的环境获取的方式是不一样的

      • 在浏览器中可以通过this、window来获取
      • 在Node中我们需要通过global来获取

    • 在ES11中对获取全局对象进行了统一的规范：globalThis

  • for..in标准化
    • 在ES11之前，虽然很多浏览器支持for...in来遍历对象类型，但是并没有被ECMA标准化
    • 在ES11中，对其进行了标准化，for...in是用于遍历对象的key

六、ES12知识点

  • FinalizationRegistry：在对象被垃圾回收时请求一个回调

    • FinalizationRegistry 提供一种方法：当一个在注册表中注册的对象被回收时，请求在某个时间点上调用一个清理回调（清理回调有时被称为 finalizer ）；可以通过调用register方法，注册任何想要清理回调的对象，传入该对象和所含的值
    let obj = { name: "kobe", age: 24 }
let info = { name: "james", age: 20 }

const finalRegistry = new FinalizationRegistry((value) => {
  console.log("某一个对象被回收了:", value)
})

finalRegistry.register(obj, "kobe")
finalRegistry.register(info, "james")

// obj = null
info = null

  • WeakRef

    • 默认将一个对象赋值给另外一个引用，那么这个引用是一个强引用：如果希望是一个弱引用的话，可以使用WeakRef
    • objRef.deref()：获取弱引用的值
    let info = { name: "kobe", age: 24 }
let obj = new WeakRef(info)

const finalRegistry = new FinalizationRegistry(() => {
  console.log("对象被回收~")
})

finalRegistry.register(info, "info")

setTimeout(() => {
  info = null
}, 2000)

setTimeout(() => {
  console.log(obj.deref().name, obj.deref().age)
}, 8000)

  • 逻辑赋值运算符

    • ||=
    • ??=
    • &&=
    // 赋值运算符
// const foo = "foo"
let counter = 100
counter = counter + 100
counter += 50

// 逻辑赋值运算符
function foo(message) {
  // 1.||逻辑赋值运算符
  // message = message || "默认值"
  // message ||= "默认值"

  // 2.??逻辑赋值运算符
  // message = message ?? "默认值"
  message ??= "默认值"

  console.log(message)
}

foo("abc") // abc
foo() // 默认值

// 3.&&逻辑赋值运算符
let obj = {
  name: "kobe",
  running: function() {
    console.log("running~")
  }
}

// &&一般的应用场景
// obj && obj.running && obj.running()
// obj = obj && obj.name
obj &&= obj.name
console.log(obj)

  • replaceAll

    const message = "my name is kobe, my age is 20"
const newMessage = message.replace("my", "james")
const newMessage2 = message.replaceAll("my", "james")
console.log(newMessage) // james name is kobe, my age is 20
console.log(newMessage2) // james name is kobe, james age is 20

七、ES13知识点

  • at：字符串，数组

    const names = ['abc', 'cba', 'nba']
console.log(names.at(1)) // cba
console.log(names.at(-1)) // nba

  • Object.hasOwn(obj, propKey)

    • 用于判断一个对象中是否有某个自己的属性
    • 和Object.prototype.hasOwnProperty的区别
      • 防止对象内部有重写hasOwnProperty
      • 对于隐式原型指向null的对象， hasOwnProperty无法进行判断
    const obj = {
  name: "kobe",
  age: 24,
  // 1.和hasOwnProperty的区别一: 防止对象中也有一个自己的hasOwnProperty方法
  hasOwnProperty: function() {
    return "abc"
  },
  __proto__: {
    address: "洛杉矶"
  }
}

console.log(obj.name, obj.age)
console.log(obj.address)

console.log(obj.hasOwnProperty("name")) // abc
console.log(obj.hasOwnProperty("address")) // abc

console.log(Object.hasOwn(obj, "name")) // true
console.log(Object.hasOwn(obj, "address")) // false


const info = Object.create(null)
info.name = "james"
// console.log(info.hasOwnProperty("name")) // Uncaught TypeError: info.hasOwnProperty is not a function
console.log(Object.hasOwn(info, "name")) // true

  • class成员

    • public instance fields
    • public static fields
    • private instance fields
    • private static fields
    • static block
    class Person {
  // 1.实例属性
  // 对象属性: public 公共 -> public instance fields
  height = 1.88

  // 对象属性: private 私有: 程序员之间的约定
  // _intro = "name is kobe"
  
  // ES13对象属性: private 私有: 程序员之间的约定
  #intro = "name is kobe"


  // 2.类属性(static)
  // 类属性: public
  static totalCount = "70亿"

  // 类属性: private
  static #maleTotalCount = "20亿"

  constructor(name, age) {
    // 对象中的属性: 在constructor通过this设置
    this.name = name
    this.age = age
    this.address = "洛杉矶"
  }

  // 3.静态代码块: 加载解析类的时候会执行，仅执行一次，可用于对类做初始化操作
  static {
    console.log("Hello World")
    console.log("Hello Person")
  }
}

const p = new Person("kobe", 28)
console.log(p) // Person {height: 1.88, name: 'kobe', age: 28, address: '洛杉矶', #intro: 'name is kobe'}
// console.log(p.name, p.age, p.height, p.address, p.#intro)

// console.log(Person.#maleTotalCount) // Uncaught SyntaxError: Private field '#maleTotalCount' must be declared in an enclosing class
avatar
文章
阅读
粉丝