es7 以上知识

1. Es8

Object.keys() 返回一个数组，包括对象自身的（不含继承的）所有可枚举属性（不含 Symbol 属性）的键名。
Object.values() 返回一个数组，包含对象自身的（不含继承的）所有可枚举属性的值。

const obj = {
  name: "hzy",
  age: 18
}

console.log(Object.keys(obj))
console.log(Object.values(obj))

// 用的非常少
console.log(Object.values(["abc", "cba", "nba"]))
console.log(Object.values("abc"))

// [ 'name', 'age' ]
// [ 'hzy', 18 ]
// [ 'abc', 'cba', 'nba' ]
// [ 'a', 'b', 'c' ]

Object.entries() 返回一个数组，包含对象自身的（不含继承的）所有可枚举属性的键值对数组。

const obj = {
  name: "hzy",
  age: 18,
};

console.log(Object.entries(obj));
const objEntries = Object.entries(obj);
objEntries.forEach((item) => {
  console.log(item[0], item[1]);
});

console.log(Object.entries(["abc", "cba", "nba"]));
console.log(Object.entries("abc"));

// [ [ 'name', 'hzy' ], [ 'age', 18 ] ]
// name hzy
// age 18
// [ [ '0', 'abc' ], [ '1', 'cba' ], [ '2', 'nba' ] ]
// [ [ '0', 'a' ], [ '1', 'b' ], [ '2', 'c' ] ]

padStart() padStart用于头部补全.
padEnd 用于尾部补全.

const message = "Hello World"

const newMessage = message.padStart(15, "*").padEnd(20, "-")
console.log(newMessage)

// 案例
const cardNumber = "321324234242342342341312"
const lastFourCard = cardNumber.slice(-4)
const finalCard = lastFourCard.padStart(cardNumber.length, "*")
console.log(finalCard)

// ****Hello World-----
// ********************1312

Trailing-Commas : 尾部逗号

function foo(m, n,) {

}

foo(20, 30,)

Async/Await : 异步/等待

// 1. async
// 2. await
async function foo() {
  await new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("async")
      resolve()
    }, 1000)
  })
}

2. Es10

Array.flat() : 数组扁平化
Array.flatMap() : 数组扁平化

// 1.flat的使用
// const nums = [10, 20, [2, 9], [[30, 40], [10, 45]], 78, [55, 88]]
// const newNums = nums.flat()
// console.log(newNums)

// const newNums2 = nums.flat(2)
// console.log(newNums2)

// 2.flatMap的使用
// const nums2 = [10, 20, 30]
// const newNums3 = nums2.flatMap(item => {
//   return item * 2
// })
// const newNums4 = nums2.map(item => {
//   return item * 2
// })

// console.log(newNums3)
// console.log(newNums4)

// 3.flatMap的应用场景
const messages = ["Hello World", "hello lyh", "my name is hzy"]
const words = messages.flatMap(item => {
  return item.split(" ")
})

console.log(words)

Object.fromEntries: 将键值对列表转换为对象

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

// const entries = Object.entries(obj)
// console.log(entries)

// const newObj = {}
// for (const entry of entries) {
//   newObj[entry[0]] = entry[1]
// }

// 1.ES10中新增了Object.fromEntries方法
// const newObj = Object.fromEntries(entries)

// console.log(newObj)


// 2.Object.fromEntries的应用场景
const queryString = 'name=hzy&age=18&height=1.88'
const queryParams = new URLSearchParams(queryString)
for (const param of queryParams) {
  console.log(param)
}

const paramObj = Object.fromEntries(queryParams)
console.log(paramObj)

// [ 'name', 'hzy' ]
// [ 'age', '18' ]
// [ 'height', '1.88' ]
// { name: 'hzy', age: '18', height: '1.88' }

trimStart: 去除字符串左侧空格
trimEnd: 去除字符串右侧空格

const message = "    Hello World    "

console.log(message.trim())
console.log(message.trimStart())
console.log(message.trimEnd())

// Hello World
// Hello World    
//     Hello World

3. es11

BigInt: 大整数

// ES11之前 max_safe_integer
const maxInt = Number.MAX_SAFE_INTEGER
console.log(maxInt) // 9007199254740991
console.log(maxInt + 1)
console.log(maxInt + 2)

// ES11之后: BigInt
const bigInt = 900719925474099100n
console.log(bigInt + 10n)

const num = 100
console.log(bigInt + BigInt(num))

const smallNum = Number(bigInt)
console.log(smallNum)

// 9007199254740991
// 9007199254740992
// 9007199254740992
// 900719925474099110n
// 900719925474099200n
// 900719925474099100

Nullish Coalescing Operator: 空值合并运算符

// ES11: 空值合并运算 ??

const foo = undefined
// const bar = foo || "default value"
const bar = foo ?? "defualt value"

console.log(bar)

// ts 是 js 的超级

// defualt value

Optional Chaining: 可选链

const info = {
  name: "hzy",
  // friend: {
  //   girlFriend: {
  //     name: "hmm"
  //   }
  // }
}


// console.log(info.friend.girlFriend.name)
// if (info && info.friend && info.friend.girlFriend) {
//   console.log(info.friend.girlFriend.name)
// }

// ES11提供了可选链(Optional Chainling)
console.log(info.friend?.girlFriend?.name)

console.log('其他的代码逻辑')

// undefined
// 其他的代码逻辑

获取全局对象globalThis: globalThis

// 获取某一个环境下的全局对象(Global Object)

// 在浏览器下
// console.log(window)
// console.log(this)

// 在node下
// console.log(global)

// ES11
console.log(globalThis)

遍历对象标准方法: for-in

// for...in 标准化: ECMA
const obj = {
  name: "why",
  age: 18
}

for (const item in obj) {
  console.log(item)
}

// name
// age

4. es12

Promise.any: 只要有一个promise成功就返回
Promise.allSettled: 等待所有promise完成，不管成功还是失败
String.prototype.replaceAll: 替换所有
数值分隔符: 100_000_000
finalizationRegistry: 垃圾回收机制

// ES12: FinalizationRegistry类
const finalRegistry = new FinalizationRegistry((value) => {
  console.log("注册在finalRegistry的对象, 某一个被销毁", value)
})

let obj = { name: "hzy" }
let info = { age: 18 }

finalRegistry.register(obj, "obj")
finalRegistry.register(info, "value")

obj = null
info = null

// 对象被GC销毁时候, 执行回调函数,

WeakRef: 弱引用

// ES12: WeakRef类
// WeakRef.prototype.deref: 
// > 如果原对象没有销毁, 那么可以获取到原对象
// > 如果原对象已经销毁, 那么获取到的是undefined
const finalRegistry = new FinalizationRegistry((value) => {
  console.log("注册在finalRegistry的对象, 某一个被销毁", value)
})

let obj = { name: "hzy" }
let info = new WeakRef(obj)

finalRegistry.register(obj, "obj")

obj = null

setTimeout(() => {
  console.log(info.deref()?.name)
  console.log(info.deref() && info.deref().name)
}, 10000)

// 垃圾回收机制: 回收一些没有被引用的对象, 执行回调函数

logical assign operator: 逻辑赋值运算符

// 1.||= 逻辑或赋值运算
// let message = "hello world"
// message = message || "default value"
// message ||= "default value"
// console.log(message)

// 2.&&= 逻辑与赋值运算
// &&
// const obj = {
//   name: "hzy",
//   foo: function() {
//     console.log("foo函数被调用")
    
//   }
// }

// obj.foo && obj.foo()

// &&=
// let info = {
//   name: "hzy"
// }

// // 1.判断info
// // 2.有值的情况下, 取出info.name
// // info = info && info.name
// info &&= info.name
// console.log(info)

// 3.??= 逻辑空赋值运算
let message = 0
message ??= "default value"
console.log(message)

es7 以上知识 ​

1. Es8 ​

2. Es10 ​

3. es11 ​

4. es12 ​

es7 以上知识

1. Es8

2. Es10

3. es11

4. es12