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 相关文章推荐
HTML页面如何象ASP一样接受参数
Feb 07 Javascript
top.location.href 没有权限 解决方法
Aug 05 Javascript
让你的博客飘雪花超出屏幕依然看得见
Jan 04 Javascript
js页面跳转的常用方法整理
Oct 18 Javascript
原生js实现图片轮播特效
Dec 18 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
Apr 30 Javascript
js原生Ajax的封装和原理详解
Mar 11 Javascript
Vue项目中使用Vux的安装过程
May 01 Javascript
vue :src 文件路径错误问题的解决方法
May 15 Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 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函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
php遍历目录输出目录及其下的所有文件示例
2014/01/27 PHP
Windows下安装PHP单元测试环境PHPUnit图文教程
2014/10/24 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
PHP实现四种基础排序算法的运行时间比较(推荐)
2016/08/11 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
ASP中用Join和Array,可以加快字符连接速度的代码
2007/08/22 Javascript
js加载之使用DOM方法动态加载Javascript文件
2013/11/08 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
AngularJS创建自定义指令的方法详解
2016/11/03 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
js实现搜索栏效果
2018/11/16 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
Python CSV模块使用实例
2015/04/09 Python
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
Python数据分析之双色球统计两个红和蓝球哪组合比例高的方法
2018/02/03 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
python实现网页自动签到功能
2019/01/21 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
Java程序员面试题
2013/07/15 面试题
医学专业个人求职自荐信格式
2013/09/23 职场文书
大学生旷课检讨书
2014/01/22 职场文书
物流业务员岗位职责
2014/02/08 职场文书
中学校庆方案
2014/03/17 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
2014年幼儿园园长工作总结
2014/12/17 职场文书
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby