Javascript 变化如此之快，作为前端开发人员，我们必须通过不断学习才能跟上它的发展步伐。
因此，今天这篇文章将分享的13个
从 ES2021 到 ES2023的
JavaScript新特性技巧，希望对你有所帮助。
ES2023
ES2023中Javascript有很多有用的数组方法，比如toSorted，toReversed等。
1.toSorted
你一定用过数组的sort方法，我们可以用它来对数组进行排序。
const array = [ 1, 2, 4, -5, 0, -1 ]const array2 = array.sort((a, b) => a - b)
console.log(array2) console.log(array)
数组通过 sort 方法排序后，其值发生了变化。如果你不希望数组本身被重新排序，而是得到一个全新的数组，你可以尝试使用 array.toSorted 方法。
const array = [ 1, 2, 4, -5, 0, -1 ]const array2 = array.toSorted((a, b) => a - b)
console.log(array2) console.log(array)
不得不说，我真的很喜欢这种方法，太棒了。除此之外，我们还可以使用许多类似的方法。
const reverseArray = [ 1, 2, 3 ]const reverseArray2 = reverseArray.toReversed()
console.log(reverseArray) console.log(reverseArray2) const spliceArray = [ 'a', 'b', 'c' ]const spliceArray2 = spliceArray.toSpliced(1, 1, 'fatfish')console.log(spliceArray2) console.log(spliceArray)
最后，数组有一个神奇的功能，它被命名为 with。
Array 实例的 with() 方法是使用括号表示法更改给定索引值的复制版本。它返回一个新数组，其中给定索引处的元素替换为给定值。
const array = [ 'a', 'b', 'c' ]const withArray = array.with(1, 'fatfish')
console.log(array) console.log(withArray)
2.findLast
相信大家对 array.find 方法并不陌生，我们经常用它来查找符合条件的元素
。
const array = [ 1, 2, 3, 4 ] const targetEl = array.find((num) => num > 2)
find方法是从后往前查找符合条件的元素，如果我们想从后往前查找符合条件的元素怎么办？是的，你可以选择 array.findLast
const array = [ 1, 2, 3, 4 ] const targetEl = array.findLast((num) => num > 2)
3.findLastIndex
我想您已经猜到了，我们已经可以使用 findLastIndex 来查找数组末尾的匹配元素了。
const array = [ 1, 2, 3, 4 ] const index = array.findIndex((num) => num > 2) const lastIndex = array.findLastIndex((num) => num > 2)
4.WeakMap支持使用Symbol作为key
很久以前，我们只能使用一个对象作为 WeakMap 的key。
const w = new WeakMap()const user = { name: 'fatfish' }
w.set(user, 'medium')console.log(w.get(user))
现在我们使用“Symbol”作为“WeakMap”的key。
const w = new WeakMap()const user = Symbol('fatfish')
w.set(user, 'medium')console.log(w.get(user)) // 'medium'
ES2022
5.Object.has
您最喜欢确定对象是否具有名称属性的方法是什么？
是的，通常有两种方式，它们有什么区别呢？
-
对象中的“名称”
-
obj.hasOwnProperty(‘名称’)
“in”运算符
如果指定属性在指定对象或其原型链中，则 in 运算符返回 true。
const Person = function (age) { this.age = age}
Person.prototype.name = 'fatfish'const p1 = new Person(24)console.log('age' in p1) console.log('name' in p1)
obj.hasOwnProperty
hasOwnProperty 方法返回一个布尔值，指示对象是否具有指定的属性作为其自身的属性（而不是继承它）。
使用上面相同的例子
const Person = function (age) { this.age = age}
Person.prototype.name = 'fatfish'const p1 = new Person(24)console.log(p1.hasOwnProperty('age')) console.log(p1.hasOwnProperty('name'))
也许“obj.hasOwnProperty”已经可以过滤掉原型链上的属性，但在某些情况下并不安全，会导致程序失败。
Object.create(null).hasOwnProperty('name')
Object.hasOwn
不用担心，我们可以使用“Object.hasOwn”来规避这两个问题，比“obj.hasOwnProperty”方法更方便、更安全。
let object = { age: 24 }
Object.hasOwn(object, 'age') let object2 = Object.create({ age: 24 })Object.hasOwn(object2, 'age') let object3 = Object.create(null)Object.hasOwn(object3, 'age')
6.array.at
当我们想要获取数组的第 N 个元素时，我们通常使用 [] 来获取。
const array = [ 'fatfish', 'medium', 'blog', 'fat', 'fish' ]
console.log(array[ 1 ], array[ 0 ])
哦，这似乎不是什么稀罕事。但是请朋友们帮我回忆一下，如果我们想得到数组的最后第N个元素，我们会怎么做呢？
const array = [ 'fatfish', 'medium', 'blog', 'fat', 'fish' ]const len = array.length
console.log(array[ len - 1 ]) console.log(array[ len - 2 ]) console.log(array[ len - 3 ])
这看起来很难看，我们应该寻求一种更优雅的方式来做这件事。是的，以后请使用数组的at方法！
它使您看起来像高级开发人员。
const array = [ 'fatfish', 'medium', 'blog', 'fat', 'fish' ]
console.log(array.at(-1)) // fishconsole.log(array.at(-2)) // fatconsole.log(array.at(-3)) // blog
7.在模块的顶层使用“await”
await 操作符用于等待一个 Promise 并获取它的 fulfillment 值。
const getUserInfo = () => { return new Promise((rs) => { setTimeout(() => { rs({ name: 'fatfish' }) }, 2000) })}const fetch = async () => { const userInfo = await getUserInfo() console.log('userInfo', userInfo)}
fetch()const userInfo = await getUserInfo()console.log('userInfo', userInfo)
事实上，在 ES2022 之后，我们可以在模块的顶层使用 await，这对于开发者来说是一个非常令人高兴的新特性。
const getUserInfo = () => { return new Promise((rs) => { setTimeout(() => { rs({ name: 'fatfish' }) }, 2000) })}
const userInfo = await getUserInfo()console.log('userInfo', userInfo)
8.使用“#”声明私有属性
以前我们用“_”来表示私有属性，但是不安全，仍然有可能被外部修改。
class Person { constructor (name) { this._money = 1 this.name = name }
get money () { return this._money } set money (money) { this._money = money } showMoney () { console.log(this._money) }}
const p1 = new Person('fatfish')console.log(p1.money) console.log(p1._money) p1._money = 2 console.log(p1.money) console.log(p1._money)
我们可以使用“#”来实现真正安全的私有属性。
class Person { #money=1 constructor (name) { this.name = name } get money () { return this.#money } set money (money) { this.#money = money } showMoney () { console.log(this.#money) }}const p1 = new Person('fatfish')console.log(p1.money) p1.money = 2console.log(p1.money) console.log(p1.#money)
9.更容易为类设置成员变量
除了通过“#”为类设置私有属性外，我们还可以通过一种新的方式设置类的成员变量。
class Person { constructor () { this.age = 1000 this.name = 'fatfish' }
showInfo (key) { console.log(this[ key ]) }}const p1 = new Person()p1.showInfo('name') p1.showInfo('age')
现在你可以使用下面的方式，使用起来确实更方便。
class Person { age = 1000 name = 'fatfish'
showInfo (key) { console
