5個一定要學會的JavaScript新特性

前端胖頭魚發表於2022-04-18

也許你我素未謀面,但很可能相見恨晚,我是前端胖頭魚

前言

JavaScript在不斷地升級迭代,越來越多的新特性讓我們的程式碼寫起來變得簡潔有趣,這篇文章會介紹5個新特性,一起研究一下把。

1.# 使用"Object.hasOwn"替代“in”操作符

有時,我們想知道物件上是否存在某個屬性,一般會使用“in”操作符或“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) // true 
console.log('name' in p1) // true  注意這裡

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  注意這裡

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  
let object3 = Object.create(null)
Object.hasOwn(object3, 'age') // false 

2.# 使用"#"宣告私有屬性

以前,我們一般用_表示私有屬性,但它並不靠譜,還是會被外部修改。

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 // 依舊可以從外部修改_money屬性,所以這種做法並不安全
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 // 沒法從外部直接修改
p1.money = 2
console.log(p1.money) // 2
console.log(p1.#money) // Uncaught SyntaxError: Private field '#money' must be declared in an enclosing class

3.# 具有用的"數字分隔符"

直接看例子,驚呆了我...

const sixBillion = 6000000000
// ❌ 難以閱讀
const sixBillion2 = 6000_000_000
// ✅ 更加易於閱讀
console.log(sixBillion2) // 6000000000

當然也可以使用"_"用於計算

const sum = 1000 + 6000_000_000 // 6000001000

4.# 使用"?."簡化"&&"和三元運算子

這些例子,你一定非常熟悉,我們們有辦法可以簡化它嗎?

const obj = null
console.log(obj && obj.name)
const $title = document.querySelector('.title')
const title = $title ? title.innerText : undefined

“?.”

const obj = null
console.log(obj?.name)
const $title = document.querySelector('.title')
const title = $title?.innerText

Tips

?. 的一般用法

  1. obj?.prop 物件屬性
  2. obj?.[expr] 物件屬性
  3. func?.(...args) 執行函式

5.# 使用"BigInt"支援大數計算

JS中超過“Number.MAX_SAFE_INTEGER”的數字計算將是不安全的。

Example:

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

最後

希望能一直給大家分享實用、基礎、進階的知識點,一起早早下班,快樂摸魚。

期待你在掘金關注我:前端胖頭魚,也可以在公眾號裡找到我:前端胖頭魚

相關文章