读懂ES6（二）：运算符与BigInt、Symbol的深入探索

哦abc
319 阅读4分钟

前言

本系列已更新：读懂ES6（一）：let、const与解构赋值的深度解析

本篇文章是在学习完阮一峰老师的 《ECMAScript 6 入门》一书后的学习总结，我将结合自身的理解和实践，通过详细的文字介绍与代码示例来帮助大家理解学习。这篇文章将探讨ES6中的几个关键特性，包含运算符，BigInt和Symbol类型，带你领略ES6的魅力。

运算符

指数运算符

ES6引入了一个新的运算符**用于表示幂运算（一个数被另一个数乘以其自身指定次数）。

注意：当多个指数运算符连用时，是从最右边开始计算的（如下面的第5行代码），而不是我们常见的从左到右。

let a = 2
let b = 3

result1 = a ** b       // 8
result2 = a ** b ** a  // 相当于 a ** (b ** c) 结果为：512
b **= b                // 相当于 b = b * b * b  结果为：27

链判断运算符

链判断运算符 ?. 让我们可以安全地读取深层嵌套对象属性，而不需要显式地验证每一层是否存在。如果左侧的表达式结果为 null 或 undefined，则表达式短路返回 undefined，而不是抛出错误。

注意：链判断运算符只能用于属性访问、方法调用和数组元素访问。它也不能用于变量声明（如let a?.b = 10;是无效的）。

const user = {  
    name: "Tom",  
    address: {  
        street: "123",  
        city: "JX"  
    }  
};  
    
console.log(user.address?.city);     // "JX"  
console.log(user.address?.nation);   // undefined，而不是抛出错误  
console.log(user.contact?.email);    // undefined，因为contact未定义

Null判断运算符

Null判断运算符 ?? 是一个逻辑运算符，用于在左侧的操作数为 null 或 undefined 时，返回其右侧的操作数，否则返回左侧的操作数。

let foo = null;  
let bar = foo ?? 'hhh';  // 'hhh'  
 
foo = 'Hello';  
bar = foo ?? 'hhh';      // 'Hello'

BigInt

JavaScript处理非常大的整数时，传统的Number类型会遇到精度限制的问题，它能够安全表示的最大整数是2^53 - 1，一旦超过这个范围的整数将不再保持其精确值。如下图所示，a 与 b 按照常理来说应该是相差 2的，但是因为b的值超出了安全范围所以我们计算出的 b不正确。

image.png

为了克服这个限制，ES11 引入了BigInt类型，允许你表示任意大小的整数。BigInt提供了一种方法来处理那些超出Number类型精度范围的整数。

声明方式

  1. 在整数的末尾添加一个n，表示这是一个BigInt类型

  2. 构造函数：使用BigInt函数将常规数字转换为BigInt

var big = 123n 
BigInt("1234567890123456789012345678901234567890")

注意：

  • BigInt 和 Number 类型之间是不兼容的，不能直接对它们进行算术运算，除非将它们转换为相同的类型（ BigInt 转换为 Number 会导致精度丢失）。
  • BigInt 字面量后面必须紧跟 n 后缀，否则它会被解析为 Number 类型。
  • 将 BigInt 转换为字符串时（通过toString()方法或模板字符串），它会保留完整的精度。

Symbol

== VS ===

  1. 当使用==进行比较时，如果两边的值类型不同，JavaScript会发生隐式转换，尝试将它们转换为相同的类型，然后再进行比较。
  2. 当使用===进行比较时，JavaScript不会进行类型转换。如果两边的值类型不同，或者它们的值（即使类型相同）不相等，比较结果就是false。

Symbol是一种原始数据类型，其值通过Symbol()函数生成，用于创建唯一的标识符。每个 Symbol 值都是唯一的，即使是通过相同的参数创建的两个数也是不同的。

var s = 1
var s2 = '1'
console.log(s == s2);   // true  用两个等号判断，JavaScript引擎会隐式转换两个变量为同一个类型
console.log(s === s2);  // false

var obj = {}
var obj2 = {}
console.log(obj == obj2);   // false    js中不存在两个一样的引用类型
console.log(obj === obj2);  // false

// Symbol是原始类型，创建世界上独一无二的值，不会有相等
var a = Symbol(123)
var a2 = Symbol(123)
console.log(a == a2);    // false
console.log(a === a2);   // false

结语

希望本文能够帮助你了解es6的一些特性，感谢观看！｀･ω･´)ゞ敬礼っ

avatar
文章
阅读
粉丝