本文介绍5个实用的JavaScript新特性：使用Object.hasOwn安全检测属性、通过#声明真正的私有属性、利用数字分隔符提升代码可读性、使用?.简化可选链访问，以及引入BigInt支持大整数计算。这些特性帮助开发者写出更简洁、安全且高效的代码。
前言
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) 创建），该方法仍可能引发错误，因此并不完全安全。
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
?. 的一般用法
- obj?.prop 用于访问对象属性
- obj?.[expr] 用于通过表达式访问对象属性
- func?.(...args) 用于安全执行函数
5. 使用 BigInt 支持大数计算
在 JavaScript 中，超过 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
最后
希望能持续分享实用、基础及进阶的知识点，助力开发者高效工作。更多关于 JavaScript 新特性的资料，请关注本站其他相关文章！