JavaScript高级 ES7-ES13 新特性

1. ES7

1. Array Includes

在ES7之前，如果我们想判断一个数组中是否包含某个元素，需要通过 indexOf 获取结果，并且判断是否为 -1

在ES7中，我们可以通过includes来判断一个数组中是否包含一个指定的元素，根据情况，如果包含则返回 true，否则返回false

var arr = [1, 23, 4, 4524, 5]
console.log(arr.includes(3)); //false
console.log(arr.includes(1)); // true

2. 指数exponentiation运算符

在ES7之前，计算数字的乘方需要通过 Math.pow 方法来完成

在ES7中，增加了 ** 运算符，可以对数字来计算乘方

console.log(3 ** 2); // 9
console.log(Math.pow(3, 2)); // 9

2. ES8

1. Object values entries

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

    const obj = {name: "why",age: 18,height: 1.88,address: "广州市"}// 1.获取所有的keyconst keys = Object.keys(obj)console.log(keys)// 2.ES8 Object.valuesconst 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] = entryconsole.log(key, value)}// 3.2. 对数组/字符串操作(了解)console.log(Object.entries(["abc", "cba"]))console.log(Object.entries("Hello"))

2. String Padding

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

    // padStart和padEnd// 1.应用场景一: 对时间进行格式化// const minute = "15".padStart(2, "0")// const second = "6".padStart(2, "0")// console.log(`${minute}:${second}`)// 2.应用场景二: 对一些敏感数据格式化let cardNumber = "132666200001018899"const sliceNumber = cardNumber.slice(-4)cardNumber = sliceNumber.padStart(cardNumber.length, "*")const cardEl = document.querySelector(".card")cardEl.textContent = cardNumber

3. Trailing Commas

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

    function foo(num1, num2, ) {console.log(num1, num2)}foo(10, 20, )

4. Object Descriptors

Object.getOwnPropertyDescriptors

5. async、await

3. ES9

1. Async iterators

2. Object spread operators

3. Promise finally

4. ES10

1. flat flatMap

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

flatMap是先进行map操作，再做flat的操作, flatMap中的flat相当于深度为1

    // 1.flat的使用: // 将一个数组, 按照制定的深度遍历, 将遍历到的元素和子数组中的元素组成一个新的数组, 进行返回// const nums = [10, 20, [111, 222], [333, 444], [[123, 321], [231, 312]]]// const newNums1 = nums.flat(1)// console.log(newNums1)// const newNums2 = nums.flat(2)// console.log(newNums2)// 2.flatMap的使用:// 1> 对数组中每一个元素应用一次传入的map对应的函数const messages = ["Hello World aaaaa","Hello ximingx"]// 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.flatMapconst finalMessages = messages.flatMap(item => item.split(" "))console.log(finalMessages)

2. Object fromEntries

ES10提供了 Object.formEntries来完成 entries将其转换成对象的操作

    // 1.对象// const obj = {//   name: "why",//   age: 18,//   height: 1.88// }// const entries = Object.entries(obj)// const info = Object.fromEntries(entries)// console.log(info)// 2.应用const searchString = "?name=why&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 paramObj = Object.fromEntries(params)console.log(paramObj)

3. trimStart trimEnd

    const message = "   Hello World    "console.log(message.trim())console.log(message.trimStart())console.log(message.trimEnd())

4. Symbol description

5. Optional catch binding

5. ES11

1. BigInt

大于MAX_SAFE_INTEGER的数值，表示的可能是不正确的

    console.log(Number.MAX_SAFE_INTEGER)const num1 = 9007199254740992nconst num2 = 9007199254740993nconsole.log(num1, num2)

ES11中，引入了新的数据类型BigInt，用于表示大的整数

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

2. Nullish Coalescing Operator

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

3. 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?.()

4. Global This

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

5. for…in标准化

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

6. Dynamic Import

7. Promise.allSettled

8. import meta

6. ES12

1. FinalizationRegistry

FinalizationRegistry 提供了这样的一种方法：当一个在注册表中注册的对象被回收时，请求在某个时间点上调用一个清理回调

你可以通过调用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 = nullinfo = null

2. 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)

3. logical assignment operators

    // 赋值运算符// const foo = "foo"let counter = 100counter = counter + 100counter += 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.nameobj &&= obj.nameconsole.log(obj)

7. ES13

1. method .at()

    const message = "my name is why, why age is 18"const newMessage = message.replace("why", "kobe")const newMessage2 = message.replaceAll("why", "kobe")console.log(newMessage)console.log(newMessage2)

2. Object.hasOwn(obj, propKey)

该方法用于判断一个对象中是否有某个自己的属性

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

3. New members of classes

在ES13中，新增了定义class类中成员字段（field）的其他方式

    class Person {// 1.实例属性// 对象属性: public 公共 -> public instance fieldsheight = 1.88// 对象属性: private 私有: 程序员之间的约定// _intro = "name is why"// ES13对象属性: private 私有: 程序员之间的约定#intro = "name is why"// 2.类属性(static)// 类属性: publicstatic totalCount = "70亿"// 类属性: privatestatic #maleTotalCount = "20亿"constructor(name, age) {// 对象中的属性: 在constructor通过this设置this.name = namethis.age = agethis.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)