今天这篇我们来学习和了解“详解几个高效的JavaScript新特性是如何使用的”，下文的讲解详细，步骤过程清晰，对大家进一步学习和理解“详解几个高效的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 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"支持大数计算

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

最后

以上就是关于“详解几个高效的JavaScript新特性是如何使用的”的介绍了，感谢各位的阅读，希望这篇文章能帮助大家解决问题。如果想要了解更多知识，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 如何实现小程序评价功能，方法及代码是什么

  微信小程序实现评价功能 本文实例为大家分享了微信小程序实现评价的具体代码,供大家参考,具体内容如下 首先去图标库,找一个空心星图片和一个实星图片 先是效果图 代码 wxml文件 for循环5次,初始值是5星,data-name用于区别是那个评价的星星src="{{item-total+1>0?’…/image/empty_stars.png’:’…/image/entity_stars.png’}}"条件判断,图片判断一个是空星,一个实星,根据自己图片地址改变 <view class=& ...

• Typescript中this的用法是怎样，不同调用this的指向是什么

  这篇文章主要介绍了详解Typescript里的This的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• Vue中怎样动态添加类名，详细操作是什么

  本文主要介绍了如何在Vue中动态添加类名，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• JS中宏任务与微任务操作哪些需要知？

  今天给大家分享的是关于JS中宏任务与微任务的内容，本文对新手学习和理解宏任务与微任务操作有一定的帮助，感兴趣的朋友接下来跟随小编一起看看吧。

• JS中的History历史对象的用法是什么

  JS中的History历史对象的用法是什么？JavaScript编程中的History历史对象是一定要学习的基本内容，想要了解详细知识点，可以跟随小编来了解下。