5个一定要学会的JavaScript新特性
也许你我素未谋面，但很可能相见恨晚，我是前端胖头鱼
前言
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 class3.# 具有用的"数字分隔符" 直接看例子，惊呆了我...
const sixBillion = 6000000000
// ? 难以阅读
const sixBillion2 = 6000_000_000
// ? 更加易于阅读
console.log(sixBillion2) // 6000000000
当然也可以使用"_"用于计算
const sum = 1000 + 6000_000_000 // 60000010004.# 使用"?."简化"&&"和三元运算符 这些例子，你一定非常熟悉，咱们有办法可以简化它吗？
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) 执行函数
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
最后 希望能一直给大家分享实用、基础、进阶的知识点，一起早早下班，快乐摸鱼。
【5个一定要学会的JavaScript新特性】期待你在掘金关注我：前端胖头鱼，也可以在公众号里找到我：前端胖头鱼。
推荐阅读
- 一款开源的文件搜索神器，终于不用记|一款开源的文件搜索神器，终于不用记 find 命令了
- Android群英传笔记系列一view的介绍
- Android平台安全概念篇
- Java静态绑定和动态绑定
- ROS|ROS入门21讲（第一部分 基础概述（1-5讲））
- 数字信号处理|实验一 序列的傅里叶变换和离散傅里叶变换及其关系
- PHP编码标准是什么（详细介绍）
- 投稿|小家电种草：一场瞄准女性理想生活的“精致阳谋”
- 为什么手机一打开淘宝就稀奇卡
- 本文一键重装Windows 10系统图文详细教程