ES7-ES13新特性

ES7 - Array Includes

◼ 在ES7之前，如果我们想判断一个数组中是否包含某个元素，需要通过 indexOf获取结果，并且判断是否为 -1。
◼ 在ES7中，我们可以通过includes来判断一个数组中是否包含一个指定的元素，根据情况，如果包含则返回 true，否则返回false。

ES7 –指数exponentiation运算符

◼ 在ES7之前，计算数字的乘方需要通过 Math.pow方法来完成。
◼ 在ES7中，增加了 ** 运算符，可以对数字来计算乘方

ES8 Object values

◼ 之前我们可以通过 Object.keys 获取一个对象所有的key
◼ 在ES8中提供了 Object.values 来获取所有的value值：

ES8 Object entries(对象转化为entries类型)

◼ 通过 Object.entries 可以获取到一个数组，数组中会存放可枚举属性的键值对数组。
  可以针对对象、数组、字符串进行操作；
  案例:
  <script>
const obj = {
  name: "why",
  age: 18,
  height: 1.88,
  address: "广州市"
}

// 1.获取所有的key
const keys = Object.keys(obj)
console.log(keys) // (4) ['name', 'age', 'height', 'address']

// 2.ES8 Object.values
const values = Object.values(obj)
console.log(values) // (4) ['why', 18, 1.88, '广州市']

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

// 3.2. 对数组/字符串操作(了解)
console.log(Object.entries(["abc", "cba"])) // (2) [Array(2), Array(2)]
console.log(Object.entries("Hello")) // (5) [Array(2), Array(2), Array(2), Array(2), Array(2)]

 </script>

ES8 - String Padding --字符串的填充

◼ 某些字符串我们需要对其进行前后的填充，来实现某种格式化效果，ES8中增加了 padStart和 padEnd方法，分别是对字符串的首尾进行填充的。
案例:

<h1 class="title"></h1>
<script>
  //1.padStart 在前面填充
  const minute = "5".padStart(2,"0")
  const second = "36"
  // 2.padEnd 在后面填充
  const num2 = "8".padEnd(2,"0")
  const num3 = "33"
  console.log(`${minute}:${second}`) // 05:36
  console.log(`${num2}:${num3}`) // 80:33

  // 2. 应用场景二:对一些敏感数据格式化
  let cardNumber = prompt("请输入身份证号")
  const sliceNumber = cardNumber.slice(-4)
  cardNumber = sliceNumber.padStart(cardNumber.length,"*")
  const cardEl = document.querySelector(".title")
  cardEl.textContent= cardNumber
</script>

ES8 - Trailing Commas

◼ 在ES8中，我们允许在函数定义和调用时多加一个逗号：
function foo(a,b){
  console.log(a,b)
}
foo(10,20,)

ES8 - Object Descriptors

◼ Object.getOwnPropertyDescriptors ：获取属性描述符
    这个在之前已经讲过了，这里不再重复。
◼ Async Function：async、await 异步操作
    后续讲完Promise讲解

ES9新增知识点

◼ Async iterators：后续迭代器讲解
◼ Object spread operators：(对象的展开运算)前面讲过了
◼ Promise finally：后续讲Promise讲解

ES10 - flat flatMap(遍历数组返回新数组)

◼ flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
◼ flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。
  注意一：flatMap是先进行map操作，再做flat的操作；
  注意二：flatMap中的flat相当于深度为1；

// 案例
  <script>
    // flat的使用:
    // 将一个数组,按照制定的深度,将遍历到的元素和子数组中的元素组成一个新的数组进行返回
    const nums = [10,20,30,[5,8],[[2,3]],[[9,20]],100]
    const number1 = nums.flat(1)// (8) [10, 20, 30, 5, 8, Array(2), Array(2), 100]
    const number2 = nums.flat(2)// (10) [10, 20, 30, 5, 8, 2, 3, 9, 20, 100]
    console.log(number1)
    console.log(number2)
    // flatMap的使用:
    // 首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。
    // 1>对数组中每一个元素应用一次传入的map对应的函数
    // 2>flatMap中的flat相当于深度为1；
    const messages = ["Hello World","Hello hdc","你好啊 哈哈哈"]
    // 自己的方式(for循环)
    //  const newinfos = []
    //  for (const item of messages){
    //   const infos =  item.split(" ")
    //   for (const info of infos){
    //     newinfos.push(info)
    //   }
    //  }
    //  console.log(newinfos) // (6) ['Hello', 'World', 'Hello', 'hdc', '你好啊', '哈哈哈']

    // 2.先进行Map,在进行flat
    // const newMessages = messages.map(item=>item.split(" "));
    // const finalMessages = newMessages.flat(1)
    // console.log(finalMessages) // ['Hello', 'World', 'Hello', 'hdc', '你好啊', '哈哈哈']
    // 3. 使用flatMap方法
      const finalMessages = messages.flatMap(item => item.split(" "))
      console.log(finalMessages) // (6) ['Hello', 'World', 'Hello', 'hdc', '你好啊', '哈哈哈']
  </script>

ES10 - Object fromEntries(entries转化成obj类型)

◼ 在前面，我们可以通过 Object.entries 将一个对象转换成 entries
◼ 那么如果我们有一个entries了，如何将其转换成对象呢？
    ES10提供了 Object.formEntries来完成转换：
◼ 那么这个方法有什么应用场景呢？
案例:
<script>
    const obj = {
      name: "hdc",
      age:21,
      height : 1.88
    }
    const entries = Object.entries(obj)
    console.log(entries) // (3) [Array(2), Array(2), Array(2)]
    const info = Object.fromEntries(entries)
    console.log(info) // {name: 'hdc', age: 21, height: 1.88}

    //2.应用
    const searchString = "?name=hdc&age=18&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 paramsObj = Object.fromEntries(params.entries())
    console.log(paramsObj) // {name: 'hdc', age: '18', height: '1.88'}
</script>

ES10 - trimStart trimEnd(去除空白符)

 ◼ 去除一个字符串首尾的空格，我们可以通过trim方法，如果单独去除前面或者后面呢？
    ES10中给我们提供了trimStart和trimEnd；
  const message = "  Hello World  "

ES10 其他知识点

◼ Symbol description：已经讲过了
◼ Optional catch binding：后面讲解try cach讲解 捕获异常

ES11 - BigInt

◼ 在早期的JavaScript中，我们不能正确的表示过大的数字：
    大于MAX_SAFE_INTEGER的数值，表示的可能是不正确的。
◼ 那么ES11中，引入了新的数据类型BigInt，用于表示大的整数：
    BigInt的表示方法是在数值的后面加上n
案例:
  <script>
    console.log(Number.MIN_SAFE_INTEGER)
    const num1 = 9007199254740991 + 1
    const num2 = 9007199254740991 + 2
    console.log(num1,num2) // 9007199254740992 9007199254740992
    const num3 = 9007199254740993n
    console.log(num3) // 9007199254740993n
  </script>

ES11 - Nullish Coalescing Operator 空值合并运算符

◼ ES11，Nullish Coalescing Operator增加了空值合并操作符：
  <script>
    let info =undefined
    info =  info || "我是默认值"
    console.log(info) // 我是默认值

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

ES11 - Optional Chaining(可选链)

◼ 可选链也是ES11中新增一个特性，主要作用是让我们的代码在进行null和undefined判断时更加清晰和简洁：
  <script>
    const obj = {
      name:"hdc",
      friend : {
        name:"kebo",
        running : function(){
          console.log("running~")
        }
      }
    }
    // 直接调用
    // obj.friend.running()
    // if判断:比较麻烦
    // if (obj.friend && obj.friend.running){
    //     obj.friend.running()
    // }
    // 可选链的用法
    obj?.friend?.running?.()
  </script>

ES11 - Global This（已学）

◼ 在之前我们希望获取JavaScript环境的全局对象，不同的环境获取的方式是不一样的
    比如在浏览器中可以通过this、window来获取；
    比如在Node中我们需要通过global来获取；
◼ 在ES11中对获取全局对象进行了统一的规范：globalThis

ES11 - for..in标准化

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

ES11 其他知识点

◼ Dynamic Import：后续ES Module模块化中讲解。
◼ Promise.allSettled：后续讲Promise的时候讲解。
◼ import meta：后续ES Module模块化中讲解。

ES12 - FinalizationRegistry 垃圾回收回调

◼ FinalizationRegistry 对象可以让你在对象被垃圾回收时请求一个回调。
FinalizationRegistry 提供了这样的一种方法：当一个在注册表中注册的对象被回收时，请求在某个时间点上调用一个清理回调。（清理回调有时被称为 finalizer ）;
你可以通过调用register方法，注册任何你想要清理回调的对象，传入该对象和所含的值;
 <script>
    let obj = {name:"hdc",age:21}
    let info = {name:"kobe",age:30}
    const finalRegistry = new FinalizationRegistry((value)=>{
      console.log(value,"某一个对象被回收了")
    })
    finalRegistry.register(obj,"onj")
    finalRegistry.register(info,"info")
    obj = null
    info = null
 </script>

ES12 - WeakRefs(转成弱引用)

◼ 如果我们默认将一个对象赋值给另外一个引用，那么这个引用是一个强引用：
    如果我们希望是一个弱引用的话，可以使用WeakRef
  <script>
    let info = {name : "hdc" , age : 21}
    let obj = new WeakRef(info)

      const finalRegistry = new FinalizationRegistry((value)=>{
        console.log("对象被回收:",value)
      })
      finalRegistry.register(info,"info")
      setTimeout(()=>{
        info = null
      },2000)
      setTimeout(()=>{
        // 需要通过deref()解析一下引用的数据
        console.log(obj.deref().name,obj.deref().age)
      })
    
  </script>

ES12 - logical assignment operators(逻辑赋值运算符)

  <script>
    //赋值运算符
    const foo = "foo"
    let counter = 100
    counter += 100

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

      message = message ?? "默认值"
      message ??= "默认值"
      console.log(message)
    }
    bar("ab") // ab
    bar() // 默认值

    // 2.&&逻辑赋值运算符
    let obj = {
      running : function(){
        console.log("running~")
      }
    }
    // 2.1 &&一般的应用场景
    //obj && obj.running && obj.running()
    obj = obj&&obj.name
    obj &&= obj.name
    console.log(obj)
  </script>

ES12其他知识点

  ◼ Numeric Separator(数字分割符)：讲过了；
  ◼ String.replaceAll(字符串替换)：字符串替换；
   <script>
        const message = "my name is hdc,hdc age is 21"
        const newMessages = message.replace("hdc","kebo")
        console.log(newMessages) // my name is kebo,hdc age is 21
        const newMessages1 = message.replaceAll("hdc","kebo")
        console.log(newMessages1)// my name is kebo,kebo age is 21
  </script>

ES13 - method .at()

 ◼ 前面我们有学过字符串、数组的at方法，它们是作为ES13中的新特性加入的：
  const names = ["abc","bbc","ccc"]
  console.log(names.at(1))// abc
  console.log(names.at(-1))// ccc
  const message = "Hello Coder"
  console.log(message.at(1)) // Hello
  console.log(message.at(-1))// Coder

ES13 - Object.hasOwn(obj, propKey)

  ◼ Object中新增了一个静态方法（类方法）：hasOwn(obj, propKey)
      该方法用于判断一个对象中是否有某个自己的属性；
  ◼ 那么和之前学习的Object.prototype.hasOwnProperty有什么区别呢？
      Object.prototype.hasOwnProperty是放在原型上的是实例方法,
      区别一：防止对象内部有重写hasOwnProperty
      区别二：对于隐式原型指向null的对象，hasOwnProperty无法进行判断
    <script>
      const obj = {
        name:"hdc",
        age:21,
        __proto__:{
          address:"天津市"
        }
      }
      console.log(obj.name)
      console.log(obj.hasOwnProperty("name"))//true
      console.log(obj.hasOwnProperty("address"))//false

      console.log(Object.hasOwn(obj,"name"))//true
    </script>

ES13 - New members of classes

   ◼ 在ES13中，新增了定义class类中成员字段（field）的其他方式：
        Instance public fields 公共属性
        Static public fields   私有属性
        Instance private fields 静态公共属性
        static private fields    静态私有属性
        static block           静态代码块
    <script>
      class Person{
        // 对象属性:public公共属性 Instance public fields
          height = 1.88
        // 对象属性:private私有属性:程序员之间约定
        _intro = "name is hdc"
        // 真正的私有属性 #加属性名
        #intro1 = "name is hdc"
        // 类属性
        // 类属性:静态公共属性
          static totalCount = "70亿"
        // 类属性:私有属性
          static #maleTotalCount = "20亿"
        constructor(name,age){
          // 对象中的属性:在constructor通过this设置
          this.name = name
          this.age = age
          this.address = "天津市"
        }
        // 静态代码块
        // 一般做初始化操作
        static{
          console.log("Hello World")
          console.log("Hello Person")
        }
      }
      
      const p = new Person("hdc",21)
      console.log(p)
      console.log(p.name,p.age,p.address,p.height)
      console.log(Person.totalCount)
      // console.log(Person.#maleTotalCount)
    </script>