ES6~ES13新特性（三）

ES7

ES7 - Array Includes

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

ES7 –指数exponentiation运算符（已学）

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

ES8

ES8 Object values

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

const obj = {
  name: "why",
  age: 18,
  height: 1.88,
  address: "广州市"
}

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

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

ES8 Object entries

通过 Object.entries 可以获取到一个数组，数组中会存放可枚举属性的键值对数组。
可以针对对象、数组、字符串进行操作；

const obj = {
  name: "why",
  age: 18,
  height: 1.88,
  address: "广州市"
}


// 3.ES8 Object.entries
// 3.1. 对对象操作
const entries = Object.entries(obj)
console.log(entries)//[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"]))//[['0', 'abc'],['1', 'cba']]
console.log(Object.entries("Hello"))//[['0', 'H'],['1', 'e'],['2', 'l'],['3', 'l'],['4', 'o']]

ES8 - String Padding

某些字符串我们需要对其进行前后的填充，来实现某种格式化效果，
ES8 中增加了 padStart和 padEnd 方法，分别是对字符串的首尾进行填充的。
- 我们简单具一个应用场景：比如需要对身份证、银行卡的前面位数进行隐藏：

// 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

ES8 - Trailing Commas

在ES8中，我们允许在函数定义和调用时多加一个逗号：

ES8 - Object Descriptors

Object.getOwnPropertyDescriptors ：
- 这个在之前已经讲过了，这里不再重复。

ES8-Async Function

Async Function：async 、await
- 后续讲完Promise讲解

ES9

Async iterators：后续迭代器讲解
Object spread operators：前面讲过了
Promise finally：后续讲Promise讲解

ES10

ES10 - flat和flatMap

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

// 1.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, Array(2), Array(2)]
const newNums2 = nums.flat(2)
console.log(newNums2)// [10, 20, 111, 222, 333, 444, 123, 321, 231, 312]

flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。
- 注意一：flatMap 是先进行map 操作，再做 flat的操作；
- 注意二：flatMap 中的 flat相当于深度为1 ；

// 2.flatMap的使用:
// 1> 对数组中每一个元素应用一次传入的map对应的函数
const messages = [
  "Hello World aaaaa",
  "Hello Coderwhy",
  "你好啊 李银河"
]

// 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)

// 3.flatMap
const finalMessages = messages.flatMap(item => item.split(" "))
console.log(finalMessages)

ES10 - Object fromEntries

在前面，我们可以通过 Object.entries 将一个对象转换成 entries
那么如果我们有一个entries 了，如何将其转换成对象呢？
ES10提供了 Object.formEntries来完成转换：

const obj = {
  name: "why",
  age: 18,
  height: 1.88
}

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

那么这个方法有什么应用场景呢？

const searchString = "?name=why&age=18&height=1.88"
const params = new URLSearchParams(searchString)

//使用get方法获取属性太麻烦，可以转化为对象
console.log(params.get("name"))
console.log(params.get("age"))
console.log(params.entries())


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

ES10 - trimStart trimEnd

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

ES10 其他知识点

Symbol description：已经讲过了
Optional catch binding：后面讲解try cach讲解

ES11

ES11 - BigInt

在早期的JavaScript 中，我们不能正确的表示过大的数字：
大于MAX_SAFE_INTEGER的数值，表示的可能是不正确的。

那么ES11中，引入了新的数据类型 BigInt，用于表示大的整数：
- BitInt的表示方法是在数值的后面加上n

ES11 - Nullish Coalescing Operator

ES11，Nullish Coalescing Operator增加了空值合并操作符：
- 当值为undefnined或才null时，会返回后面的默认值

console.log( "" ?? '默认值' ); //""
console.log( false ?? '默认值' );//false
console.log( undefined ?? '默认值' );//默认值
console.log( null ?? '默认值' );//默认值

ES11 - Optional Chaining

可选链也是ES11中新增一个特性，主要作用是让我们的代码在进行null和undefined 判断时更加清晰和简洁：

const obj = {
  name: "why",
  friend: {
    name: "kobe",
    // running: function() {
    //   console.log("running~")
    // }
  }
}

// 1.直接调用: 非常危险
// obj.friend.running()

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

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

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

ES12 - FinalizationRegistry

FinalizationRegistry 对象可以让你在对象被垃圾回收时请求一个回调。
- FinalizationRegistry 提供了这样的一种方法：当一个在注册表中注册的对象被回收时，请求在某个时间点上调用一个清理回调。（清理回调有时被称为 finalizer ）;
- 你可以通过调用register 方法，注册任何你想要清理回调的对象，传入该对象和所含的值 ;

let obj = { name: "why", age: 18 }
let info = { name: "kobe", age: 30 }

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

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

// obj = null
info = null

ES12 - WeakRefs

如果我们默认将一个对象赋值给另外一个引用，那么这个引用是一个强引用：
如果我们希望是一个弱引用的话，可以使用WeakRef ；

let info = { name: "why", age: 18 }
let obj = new WeakRef(info)
let obj2 = 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)

ES12 - logical assignment operators)

// 赋值运算符
// 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")
foo()

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

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

ES12其他知识点

Numeric Separator：讲过了；
String.replaceAll：字符串替换；

ES13

ES13 - method .at()

前面我们有学过字符串、数组的 at方法，它们是作为 ES13中的新特性加入的：

ES13 - Object.hasOwn(obj, propKey))

Object中新增了一个静态方法（类方法）： hasOwn(obj, propKey)
- 该方法用于判断一个对象中是否有某个自己的属性；
那么和之前学习的Object.prototype.hasOwnProperty 有什么区别呢？

区别一：防止对象内部有重写hasOwnProperty

区别二：对于隐式原型指向null 的对象， hasOwnProperty无法进行判断

const obj = {
  name: "why",
  age: 18,
  // 1.和hasOwnProperty的区别一: 防止对象中也有一个自己的hasOwnProperty方法
  hasOwnProperty: function() {
    return "abc"
  },
  __proto__: {
    address: "广州市"
  }
}

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

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

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


// 2.和hasOwnProperty的区别二:
const info = Object.create(null)
info.name = "why"
// console.log(info.hasOwnProperty("name"))
console.log(Object.hasOwn(info, "name"))

ES13 - New members of classes

在ES13 中，新增了定义class类中成员字段（ field）的其他方式：
- Instance public fields
- Static public fields
- Instance private fields
- static private fields
- static block

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

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

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


  // 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("why", 18)
console.log(p)
// console.log(p.name, p.age, p.height, p.address, p.#intro)

// console.log(Person.#maleTotalCount)

ES7​

ES7 - Array Includes​

ES7 –指数exponentiation运算符（已学）​

ES8​

ES8 Object values​

ES8 - String Padding​

ES8 - Trailing Commas​

ES8 - Object Descriptors​

ES8-Async Function​

ES9​

ES10​

ES10 - flat和flatMap​

ES10 - Object fromEntries​

ES10 - trimStart trimEnd​

ES10 其他知识点​

ES11​

ES11 - BigInt​

ES11 - Nullish Coalescing Operator​

ES11 - Optional Chaining​

ES11 - Global This（已学）​

ES11 - for..in标准化​

ES11 其他知识点​

ES12​

ES12 - FinalizationRegistry​

ES12 - WeakRefs​

ES12 - logical assignment operators)​

ES12其他知识点​

ES13​

ES13 - method .at()​

ES13 - Object.hasOwn(obj, propKey))​

ES13 - New members of classes​

ES7

ES7 - Array Includes

ES7 –指数exponentiation运算符（已学）

ES8

ES8 Object values

ES8 - String Padding

ES8 - Trailing Commas

ES8 - Object Descriptors

ES8-Async Function

ES9

ES10

ES10 - flat和flatMap

ES10 - Object fromEntries

ES10 - trimStart trimEnd

ES10 其他知识点

ES11

ES11 - BigInt

ES11 - Nullish Coalescing Operator

ES11 - Optional Chaining

ES11 - Global This（已学）

ES11 - for..in标准化

ES11 其他知识点

ES12

ES12 - FinalizationRegistry

ES12 - WeakRefs

ES12 - logical assignment operators)

ES12其他知识点

ES13

ES13 - method .at()

ES13 - Object.hasOwn(obj, propKey))

ES13 - New members of classes