5个一定要学会的JavaScript新特性

SegmentFault

共 4670字,需浏览 10分钟

 ·

2022-04-19 10:38

作者:前端胖头鱼

简介:会一点点前端,曾在阿里当小二,美团烧开水,现在热衷可视化领域。

来源:SegmentFault  思否社区 


前言



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

最后



希望能一直给大家分享实用、基础、进阶的知识点,一起早早下班,快乐摸鱼。



点击左下角阅读原文,到 SegmentFault 思否社区 和文章作者展开更多互动和交流,扫描下方”二维码“或在“公众号后台回复“ 入群 ”即可加入我们的技术交流群,收获更多的技术文章~

- END -


浏览 17
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报