5个实用的JavaScript新特性


Posted in Javascript onJune 16, 2022

前言

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新特性的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
js的一些常用方法小结
Jun 29 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
ExtJS下 Ext.Direct加载和提交过程排错小结
Apr 02 Javascript
json数据的列循环示例
Sep 06 Javascript
浮动的div自适应居中显示的js代码
Dec 23 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
Vue.js每天必学之Class与样式绑定
Sep 05 Javascript
JavaScript省市区三级联动菜单效果
Sep 21 Javascript
D3.js中强制异步文件读取同步的几种方法
Feb 06 Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 jQuery
JS中Promise函数then的奥秘探究
Jul 30 Javascript
使用vue cli4.x搭建vue项目的过程详解
May 08 Javascript
字节飞书面试promise.all实现示例
Jun 16 #Javascript
JS轻量级函数式编程实现XDM三
Jun 16 #Javascript
JS轻量级函数式编程实现XDM二
Jun 16 #Javascript
JS函数式编程实现XDM一
Jun 16 #Javascript
正则表达式基础与常用验证表达式
Jun 16 #Javascript
使用compose函数优化代码提高可读性及扩展性
html中两种获取标签内的值的方法
Jun 16 #jQuery
You might like
php 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
PHP人民币金额数字转中文大写的函数代码
2013/02/27 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
JS面向对象编程之对象使用分析
2010/08/19 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
js图片处理示例代码
2014/05/12 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
2014/12/13 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
理解JS事件循环
2016/01/07 Javascript
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
Webpack打包字体font-awesome的方法示例
2018/04/26 Javascript
vuex进阶知识点巩固
2018/05/20 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
[48:02]Ti4循环赛第三日 VG vs Liquid和NEWBEE vs DK
2014/07/12 DOTA
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
Python K最近邻从原理到实现的方法
2019/08/15 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
利用python在excel中画图的实现方法
2020/03/17 Python
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
Lacoste美国官网:经典POLO衫品牌
2016/10/12 全球购物
香港现代设计家具品牌:Ziinlife Furniture
2018/11/13 全球购物
华为c/c++笔试题
2016/01/25 面试题
cf战队收人广告词
2014/03/14 职场文书
学校端午节活动方案
2014/08/23 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
500字小学生检讨书
2015/02/19 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python