13个大多数开发人员不知道的技巧

Javascript正在飞速变化，天哪，我必须一直学习才能跟上它的步伐。

我想与你分享从ES2021到ES2023的13个很棒的功能。

照片来自 Moritz Knöringer 在 Unsplash

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) // [-5, -1, 0, 1, 2, 4]
console.log(array) // [-5, -1, 0, 1, 2, 4]

使用 sort 方法对 array 进行排序后，它的值已经改变。如果你不想重新排序数组本身，而是要获得一个全新的数组，可以尝试使用 array.toSorted 方法。

const array = [ 1, 2, 4, -5, 0, -1 ]
const array2 = array.toSorted((a, b) => a - b)

console.log(array2) // [-5, -1, 0, 1, 2, 4]
console.log(array) // [ 1, 2, 4, -5, 0, -1 ]

我不得不说，我真的很喜欢这个方法，它非常棒。除此之外，我们还可以使用许多类似的方法。

// toReversed
const reverseArray = [ 1, 2, 3 ]
const reverseArray2 = reverseArray.toReversed()

console.log(reverseArray) // [1, 2, 3]
console.log(reverseArray2) // [3, 2, 1]
// toSpliced
const spliceArray = [ 'a', 'b', 'c' ]
const spliceArray2 = spliceArray.toSpliced(1, 1,  'fatfish')
console.log(spliceArray2) // ['a', 'fatfish', 'c']
console.log(spliceArray) // ['a', 'b', 'c']

最后，数组有一个神奇的函数，名为 with。

（来自 MDN）数组实例的 with() 方法是使用括号表示法的复制版本，用于更改给定索引处的值。它返回一个新的数组，其中给定索引处的元素被替换为给定值。

const array = [ 'a', 'b', 'c' ]
const withArray = array.with(1, 'fatfish')

console.log(array) // ['a', 'b', 'c']
console.log(withArray) // ['a', 'fatfish', 'c']

2.# findLast

我相信你对 array.find 方法不陌生，我们经常使用它来查找符合条件的元素。

const array = [ 1, 2, 3, 4 ] 
const targetEl = array.find((num) => num > 2) // 3

find 方法从后往前查找符合条件的元素，如果我们想要从后往前查找符合条件的元素怎么办？没错，你可以选择 array.findLast。

const array = [ 1, 2, 3, 4 ] 
const targetEl = array.findLast((num) => num > 2) // 4

3.# findLastIndex

我想你已经猜到了，我们已经可以使用 findLastIndex 来查找前往数组末尾的匹配元素。

const array = [ 1, 2, 3, 4 ] 
const index = array.findIndex((num) => num > 2) // 2
const lastIndex = array.findLastIndex((num) => num > 2) // 3

4.# WeakMap支持使用Symbol作为键

很久以前，我们只能使用一个对象作为WeakMap的键。

const w = new WeakMap()
const user = { name: 'fatfish' }

w.set(user, 'medium')
console.log(w.get(user)) // 'medium'

现在我们可以使用“Symbol”作为“WeakMap”的键。

const w = new WeakMap()
const user = Symbol('fatfish')

w.set(user, 'medium')
console.log(w.get(user)) // 'medium'

ES2022

5.# Object.has

你用什么方法确定对象是否有“name”属性？

是的，通常有两种方法，它们之间有什么区别？

• 'name' in obj
• obj.hasOwnProperty('name')

“in”运算符

如果指定的属性在指定对象或其原型链中，则in运算符返回true。

const Person = function (age) {
  this.age = age
}

Person.prototype.name = 'fatfish'
const p1 = new Person(24)
console.log('age' in p1) // true 
console.log('name' in p1) // true  pay attention here

obj.hasOwnProperty

“hasOwnProperty”方法返回一个布尔值，指示对象是否具有指定的属性作为它的“自有属性”（而不是继承它）。

使用上面的相同示例

const Person = function (age) {
  this.age = age
}

Person.prototype.name = 'fatfish'
const p1 = new Person(24)
console.log(p1.hasOwnProperty('age')) // true 
console.log(p1.hasOwnProperty('name')) // fasle  pay attention here

也许 "obj.hasOwnProperty" 可以过滤掉原型链上的属性，但在某些情况下它不安全，会导致程序失败。

Object.create(null).hasOwnProperty('name')
// Uncaught TypeError: Object.create(...).hasOwnProperty is not a function

Object.hasOwn

别担心，我们可以使用“Object.hasOwn”绕过这两个问题，它比“obj.hasOwnProperty”方法更方便和更安全。

let object = { age: 24 }

Object.hasOwn(object, 'age') // true
let object2 = Object.create({ age: 24 })
Object.hasOwn(object2, 'age') // false  The 'age' attribute exists on the prototype
let object3 = Object.create(null)
Object.hasOwn(object3, 'age') // false an object that does not inherit from "Object.prototype"

6.# array.at

当我们想要获取数组的第N个元素时，通常使用 [] 获得它。

const array = [ 'fatfish', 'medium', 'blog', 'fat', 'fish' ]

console.log(array[ 1 ], array[ 0 ]) // medium fatfish

哦，这似乎不是什么稀奇的事情。但是我的朋友，请帮我回忆一下，如果我们想要获取数组的倒数第N个元素，我们该怎么办？

const array = [ 'fatfish', 'medium', 'blog', 'fat', 'fish' ]
const len = array.length

console.log(array[ len - 1 ]) // fish
console.log(array[ len - 2 ]) // fat
console.log(array[ len - 3 ]) // blog

看起来很丑陋，我们应该追求一种更优雅的方法来完成这件事。是的，从现在开始请使用数组的 at 方法！

它让你看起来像一个高级开发人员。

const array = [ 'fatfish', 'medium', 'blog', 'fat', 'fish' ]

console.log(array.at(-1)) // fish
console.log(array.at(-2)) // fat
console.log(array.at(-3)) // blog

7.# 在模块的顶层使用“await”

from mdn await 运算符用于等待 Promise 并获取其完成值。

const getUserInfo = () => {
  return new Promise((rs) => {
    setTimeout(() => {
      rs({
        name: 'fatfish'
      })
    }, 2000)
  })
}
// If you want to use await, you must use the async function.
const fetch = async () => {
  const userInfo = await getUserInfo()
  console.log('userInfo', userInfo)
}

fetch()
// SyntaxError: await is only valid in async functions
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) // 1
console.log(p1._money) // 1
p1._money = 2 // Modify private property _money from outside
console.log(p1.money) // 2
console.log(p1._money) // 2

我们可以使用“#”实现真正安全的私有属性

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) // 1
// p1.#money = 2 // We cannot modify #money in this way
p1.money = 2
console.log(p1.money) // 2
console.log(p1.#money) // Uncaught SyntaxError: Private field '#money' must be declared in an enclosing class

9.# 更容易为类设置成员变量

除了通过“#”为类设置私有属性外，我们还可以以新的方式设置类的成员变量。

class Person {
  constructor () {
    this.age = 1000
    this.name = 'fatfish'
  }

  showInfo (key) {
    console.log(this[ key ])
  }
}
const p1 = new Person()
p1.showInfo('name') // fatfish
p1.showInfo('age') // 1000

现在你可以使用以下方式，它真的更方便使用。

class Person {
  age = 1000
  name = 'fatfish'

  showInfo (key) {
    console.log(this[ key ])
  }
}
const p1 = new Person()
p1.showInfo('name') // fatfish
p1.showInfo('age') // 1000

ES2021

10.# 有用的数字分隔符

我们可以使用“_”使数字更易读。很酷。

const sixBillion = 6000000000
// It is very difficult to read
const sixBillion2 = 6000_000_000
// It's cool and easy to read
console.log(sixBillion2) // 6000000000

当然，我们可以使用“_”进行实际计算。

const sum = 1000 + 6000_000_000 // 6000001000

11. 逻辑或赋值运算符 (||=)

(来自mdn)

逻辑或赋值运算符 (x ||= y) 仅在 x 为假值时进行赋值。

const obj = {
  name: '',
  age: 0
}

obj.name ||= 'fatfish'
obj.age ||= 100
console.log(obj.name, obj.age) // fatfish 100

从上面的代码中可以看到，当 x 的值为 false 时，赋值操作成功。

它对我们有什么作用？

(来自mdn) 如果“歌词”元素为空，则显示默认值:

document.getElementById("lyrics").textContent ||= "No lyrics."

在这里，短路运算符特别有益，因为该元素不会不必要地更新，并且不会引起不想要的副作用，例如额外的解析或渲染工作，或失去焦点等。

ES2020

12. 使用“??”代替“||”

使用“??”代替“||”，它用于判断运算符左侧的值是否为 null 或 undefined，然后返回右侧的值。

const obj = {
  name: 'fatfish',
  nullValue: null,
  zero: 0,
  emptyString: '',
  falseValue: false,
}

console.log(obj.age ?? 'some other default') // some other default
console.log(obj.age || 'some other default') // some other default

console.log(obj.nullValue ?? 'some other default') // some other default
console.log(obj.nullValue || 'some other default') // some other default
console.log(obj.zero ?? 0) // 0
console.log(obj.zero || 'some other default') // some other default

console.log(obj.emptyString ?? 'emptyString') // ''
console.log(obj.emptyString || 'some other default') // some other default

console.log(obj.falseValue ?? 'falseValue') // false
console.log(obj.falseValue || 'some other default') // some other default

13. 使用“BigInt”支持大整数计算问题

在 JS 中进行的超过 "Number.MAX_SAFE_INTEGER" 的数字计算将无法保证正确性。

例子

Math.pow(2, 53) === Math.pow(2, 53) + 1 // true
// Math.pow(2, 53) => 9007199254740992
// Math.pow(2, 53) + 1 => 9007199254740992

对于大数字的计算，我们可以使用“BigInt”来避免计算错误。

BigInt(Math.pow(2, 53)) === BigInt(Math.pow(2, 53)) + BigInt(1) // false