ES6 中新增的两种数据类型及类型判断 ( 一 )

简介: ES6 中新增的两种数据类型及类型判断 ( 一 )

前言

ES6,全称ECMAScript 2015,是JavaScript语言的一次重大更新,于2015年发布。这个标准引入了许多新特性和语法,以提高JavaScript的表达能力和开发效率。今天我们来聊聊ES6 中新增的两种数据类型及类型判断。接下来我也会持续更新关于ES6的新特性和JS干货知识点,对ES6感兴趣或是想学习JS的小伙伴们可以关注一下我。

既然提到了数据类型,我们先来复习一下:

JavaScript中有七种(加上ES6新增两种)基本数据类型,分为两大类:原始数据类型(Primitive Types)和对象数据类型(Object Types)。下面是这些数据类型的列表和示例:

��始数据类型(Primitive Types):

1.String(字符串) :

let myString = "Hello, World!";

2.Number(数字) :

let myNumber = 42;

3.Boolean(布尔) :

let isTrue = true;

4.Undefined(未定义) :

let myUndefined;

5.Null(空值) :

let myNull = null;

对象数据类型(Object Types):

  1. Object(对象) :
let myObject = { key: "value" };

2.Array(数组) :

let myArray = [1, 2, 3, 4, 5];

3.Function(函数) :

function myFunction() {
    // function code
}

4.Date:

let date = new Date()   //Date

这些数据类型在JavaScript中用于存储和操作不同类型的数据。原始数据类型是不可变的,而对象数据类型是可变的。在使用这些数据类型时,你可以根据具体的需求选择合适的类型。

接下来我们来聊聊新增的两种原始数据类型:

在ECMAScript 2015(ES6)中,JavaScript引入了两种新的数据类型:BigIntSymbol

  1. BigInt: BigInt是一种用来表示任意精度整数的数据类型。它允许你表示超过JavaScript中Number类型能够表示的最大安全整数范围的整数。BigInt通过在整数后面添加"n"来创建,例如:
const bigIntValue = 123n;

为什么要创建一个这样的数据类型呢?我来给大家举一个例子:

我们在浏览器中输入2**53,也就是2^53,意思为2的53次方,打印一下,再输入一个2**53 + 1

image.png

我们可以看到,为什么两个运算结果一样呢?我们不是加了1吗?不变的原因是对于number类型处理器的算力天花板就是2^53,当超过2^53的数据运算时,就不会得出正确结果,所以在ES6之后新增了一种数据类型BigInt

image.png

我们通过在整数后面添加'n',来使用BigInt类型,这样就可以运算啦。 BigInt的使用场景通常涉及处理非常大的整数,例如在数学计算或其他领域的应用中。

  1. Symbol:在JavaScript中,Symbol 是一种基本的数据类型,引入了 ECMAScript 6(ES6)标准。Symbol 是一种原始数据类型,用于表示唯一的、不可变的标识符。每个通过 Symbol() 构造函数创建的 Symbol 都是独一无二的,即使它们有相同的描述(description)。

通过 Symbol 创建的变量是不相同的,即使它们具有相同的描述。这是 Symbol 的一个关键特性,确保每个 Symbol 都是唯一的。

const symbol1 = Symbol('mySymbol');
const symbol2 = Symbol('mySymbol');
console.log(symbol1 === symbol2);  // false
console.log(symbol1.description);  // 'mySymbol'
console.log(symbol2.description);  // 'mySymbol'

在这个例子中,symbol1symbol2 被创建为两个不同的 Symbol 对象,即使它们的描述相同。因此,symbol1 === symbol2 返回 false

这种唯一性使得 Symbol 在创建对象属性、定义常量或其他需要确保唯一性的场景中非常有用。这确保了不同部分的代码可以安全地使用 Symbol,而不必担心冲突。

这两个数据类型的引入丰富了JavaScript的功能,使其更适应各种不同的编程场景。

typeof

  1. 可以准确判断除 null 之外的原始类型
  2. 可以判断function

在JavaScript中,typeof 是一个操作符,用于获取给定变量的数据类型。它返回一个字符串,表示变量的数据类型。接下来我们来看看typeof是怎么用的,我们首先来定义一些数据类型:

let str = 'hello'   //string
let num = 123      // number
let flag = false    // boolean
let und = undefined    // undefined
let nu = null // nul
let big = 123n // big number    大整形
let s = Symbol('hello')

接下来我们一起使用typeof来判断它们是什么数据类型:

console.log(typeof str);  // typeof(str)    string
console.log(typeof num);  // number
console.log(typeof flag); // boolean
console.log(typeof und);  // undefined
console.log(typeof nu);   // object  bug
console.log(typeof big);  // bigint
console.log(typeof s);    // symbol
console.log(typeof obj);  // object
console.log(typeof arr);  // object
console.log(typeof fn);   // function
console.log(typeof date); // object

使用typeof判断原始数据类型时,我们通过输出结果可以看出,除了null类型,typeof都能正确判断出这些变量的类型。

为什么typeof会把null判断为object呢?

这是JS遗留的一个历史问题:   JS中判定数据类型是靠将该变量转换为2进制数据,如果前三位是000判定其为引用数据类型,但是null很特殊,虽然它是原始数据类型,但是它二进制转换后全是0,自然也被读成了引用数据类型,所以它是唯一一个没有隐式原型的对象

当我们使用typeof判断判断引用数据类型时:

  • 对于空对象(Object)obj,输出为 "object"。
  • 对于空数组(Array)arr,输出为 "object"。同样,数组也是 JavaScript 中的一种特殊对象,所以 typeof 操作符会认为它是 "object"。
  • 对于函数(Function)fn,输出为 "function"。JavaScript 中的函数是一种特殊的对象,typeof 操作符专门将其识别为 "function"。
  • 对于日期对象(Date)date,输出为 "object"。同样,日期对象也是一种特殊对象,它被 typeof 操作符识别为 "object" 类型。

所以当使用typeof判断引用数据类型时,除了函数Function外,都会将其他的引用数据类型判断为object,所以小伙伴们以后要注意了,不要使用typeof去误判了某些数据类型。

在下篇文章中我们会介绍剩余的三种判断类型的方法,小伙伴们进主页查找哦~

总结

  1. BigInt: BigInt是一种用来表示任意精度整数的数据类型。它允许你表示超过JavaScript中Number类型能够表示的最大安全整数范围的整数。
  2. Symbol:在JavaScript中,Symbol 是一种基本的数据类型,引入了 ECMAScript 6(ES6)标准。Symbol 是一种原始数据类型,用于表示唯一的、不可变的标识符。每个通过 Symbol() 构造函数创建的 Symbol 都是独一无二的,即使它们有相同的描述(description)。

typeof

  1. 可以准确判断除 null 之外的原始类型
  2. 可以判断function
相关文章
|
存储 前端开发 JavaScript
ahooks 正式发布:值得拥抱的 React Hooks 工具库
ahook定位于一套基于 React Hooks 的工具库,核心围绕 React Hooks 的逻辑封装能力,降低代码复杂度和避免团队的重复建设为背景,共同建设和维护阿里经济体层面的 React Hooks 库。
24457 1
ahooks 正式发布:值得拥抱的 React Hooks 工具库
|
8月前
|
缓存 开发工具 git
QLExpress使用及源码分析
QLExpress是阿里开源的轻量级规则引擎,支持通过YAML配置表达式规则。支持AST语法树解析、上下文构建与动态执行,提供脚本缓存、别名映射、指令重写等扩展能力,适用于灵活的业务逻辑解耦与动态化控制。
|
8月前
|
存储 算法 BI
xxljob本地运行
本文介绍XXL-JOB分布式任务调度的部署与使用。包含源码获取、数据库导入、服务端配置启动、客户端注册及执行器配置。详细说明各数据表作用、路由策略类型,并演示任务创建、参数设置与执行日志查看,助你快速上手XXL-JOB。
|
自然语言处理 API C++
阿里通义推出SmartVscode插件,自然语言控制VS Code,轻松开发应用,核心技术开源!
SmartVscode插件深度解析:自然语言控制VS Code的革命性工具及其开源框架App-Controller
2738 1
阿里通义推出SmartVscode插件,自然语言控制VS Code,轻松开发应用,核心技术开源!
|
数据挖掘 Python
Pandas时间序列处理:日期与时间
本文介绍Pandas在处理时间序列数据时的基础概念、常见问题及解决方案。涵盖时间戳、时间间隔和周期等概念,详细讲解日期格式转换、缺失值处理、时间间隔计算和重采样等操作,并通过代码示例说明如何解决`ParserError`和`OutOfBoundsDatetime`等常见报错。掌握这些知识有助于高效处理时间序列数据,提高数据分析的质量和效率。
912 75
|
前端开发 容器
怎么让一个 div 水平垂直居中
要使一个 `div` 元素在页面上水平垂直居中,可以采用 CSS 的 Flexbox 或 Grid 布局方法。使用 Flexbox 时,可在父元素上设置 `display: flex; justify-content: center; align-items: center;`,而子 `div` 将会自动在中心显示。另一种方法是使用 Grid 布局,设置父元素 `display: grid; place-items: center;` 也能达到相同的效果。
|
人工智能 前端开发 JavaScript
AI程序员:通义灵码 2.0应用VScode前端开发深度体验
AI程序员:通义灵码 2.0应用VScode前端开发深度体验,在软件开发领域,人工智能技术的融入正深刻改变着程序员的工作方式。通义灵码 2.0 作为一款先进的 AI 编程助手,与广受欢迎的代码编辑器 Visual Studio Code(VScode)相结合,为前端开发带来了全新的可能性。本文将详细分享通义灵码 2.0 在 VScode 前端开发环境中的深度使用体验。
2671 2
AI程序员:通义灵码 2.0应用VScode前端开发深度体验
|
前端开发 JavaScript UED
React 滚动条组件 Scrollbar
本文介绍了在 React 中创建和使用滚动条组件的方法。首先,通过设置 `overflow: auto` 等 CSS 属性实现基础滚动功能。接着,推荐了如 `react-custom-scrollbars` 和 `react-perfect-scrollbar` 等第三方库以增强滚动条的功能与外观。针对常见问题,如样式不一致、无法正常工作及性能瓶颈,提供了相应的解决方案,包括自定义样式、确保容器高度和优化渲染逻辑。最后,强调了避免滚动事件绑定错误和不合理嵌套滚动的重要性,帮助开发者打造流畅、美观的用户界面。
977 16
|
JavaScript 前端开发 索引
JavaScript ES6及后续版本:新增的常用特性与亮点解析
JavaScript ES6及后续版本:新增的常用特性与亮点解析
672 4
|
搜索推荐 Android开发 iOS开发
探索未来:移动应用与操作系统的融合创新之路
在数字时代的浪潮中,移动设备已成为我们日常生活和工作不可或缺的一部分。本文将探讨移动应用开发的最新趋势、移动操作系统的创新以及它们如何共同塑造我们的数字生活。通过分析当前技术发展,我们将展望未来移动技术的演进路径,揭示这些变化如何深刻影响用户体验和企业战略。
242 35