ECMAScript 的 6 种简单数据类型

 更新时间:2022年06月04日 09:55:34   作者:​ Shrimpsss   ​  
这篇文章主要介绍了ECMAScript的 6 种简单数据类型,ECMAScript的数据类型很灵活,一种数据类型可以当作多种数据类型来使用,具体使用详情文章详细介绍需要的小伙伴可以参考一下

前言

本文为JSRedBook数据类型, 主要讲述 ECMAScript 的 6 种简单数据类型(原始类型)中的其中三种:UndefinedNullBoolean以及常用的操作符。

ECMAScript 的数据类型很灵活,一种数据类型可以当作多种数据类型来使用

typeof 操作符

typeof操作符用于确定(检测)任意变量的数据类型

类型检测

对一个值使用 typeof 操作符会返回下列字符串之一:

数据类型检测结果
undefined表示值为 未定义
boolean表示值为 布尔值
string表示值为 字符串
number表示值为 数值
symbol表示值为 符号
function表示值为 函数
object表示值为 对象 或 null

使用说明

下面是使用 typeof 操作符的例子:

 const message = "Hello"
 console.log(typeof(msssage)) // "string"
 console.log(typeof 99 ) // "number"

注意:因为 typeof 是一个操作符而不是函数,所以不需要参数(但可以使用参数)

小知识

调用typeof null 返回的是 "object"。这是因为特殊值 null 被认为是一个对空对象的引用

注意: 严格来讲,函数在 ECMAScript 中被认为是对象,并不代表一种数据类型;但函数也有自己特殊的属性,所以就有必要通过 typeof 操作符来区分函数和其他对象。

Undefined 类型

Undefined 类型只有一个值,就是特殊值 undefined

增加这个特殊值的目的就是为了正式明确空对象指针(null)和未初始化变量的区别

练习场景

当使用 var 或 let 声明了变量但没有初始化时,就相当于给变量赋予了 undefined 值,如下:

 let message; 
 console.log(message == undefined); // true 

变量 message 在声明的时候并未初始化,因此比较它和 undefined 的字面值时,两者是相等的

我们再来看看下面这个例子:

 let message = undefined; 
 console.log(message == undefined); // true

这是个不必要的预定义,因为默认情况下任何未经初始化的变量都会取得 undefined 值。

注意: 一般来说,永远不用显式地给某个变量设置 undefined 值,字面值 undefined主要用于比较,而且在 ECMA-262 第 3 版之前是不存在的。

undefined 与 not defined 的区别

包含 undefined 值的变量跟未定义变量是有区别的,如下:

 let message;   // 这个变量被声明了,只是值为 undefined 
 // let age;  确保没有声明过这个变量
 ​
 console.log(message); // "undefined" 
 console.log(age); // 报错;

在上面的例子中,第一个 console.log 因为变量message未定义值,即为"undefined";而第二个console.log 要输出一个未声明的变量 age 的值,因此会导致报错。

注意: 对未声明的变量,只能执行一个有用的操作就是对它调用 typeof。(对未声明的变量调用 delete 也不会报错,但这个操作没什么用,实际上在严格模式下会抛出错误)

使用 typeof 检测 undefined

在对未初始化的变量调用 typeof 时,返回的结果是"undefined",但对未声明的变量调用它时,返回的结果还是"undefined",这就有点让人看不懂了。比如下面的例子:

 let message; //这个变量被声明了,只是值为 undefined 
 // 确保没有声明过这个变量
 ​
 // let age 
 console.log(typeof message); // "undefined"
 console.log(typeof age); // "undefined"

这就奇怪了(⊙ˍ⊙),为什么无论是声明还是未声明,typeof 返回的都是字符串"undefined"?。

因为严格来讲这两个变量存在根本性差异,但它们都无法执行实际操作,所以都返回 undefined

注意: 即使未初始化的变量会被自动赋予 undefined 值,但仍然建议在声明变量的同时进行初始化。这样当 typeof 返回 "undefined"时,你就会知道那是因为给定的变量尚未声明,而不是声明了但未初始化。

小知识

undefined是一个假值。

但是也有很多其他的值可能也是假值,所以一定要明确自己想检测的就是 undefined 这个字面值,而不仅仅是假值,如下:

 let message; // 这个变量被声明了,只是值为 undefined 
 ​
 if (message) { 
  // 这个块不会执行
 } 
 ​
 if (!message) { 
  // 这个块会执行
 } 
 ​
 if (age) { // age 没有声明 
  // 这里会报错
 }

Null 类型

null 值表示一个空对象指针

练习场景

因为它的值表示空对象指针,所以用typeof 传一个 null 会返回 “object”,如下:

 const test = null;
 console.log(typeof test);   // "object"  

建议: 在定义将来要保存对象值的变量时,建议使用 null 来初始化,不要使用其他值;

这样只要检查这个变量的值是不是 null 就可以知道这个变量是否在后来被重新赋予了一个对象的引用,如下:

 if (car != null) { 
  // car 是一个对象的引用
 } 

注意: 用等于操作符(==)比较 null 和 undefined 始终返回 true

因为 undefined 值是由 null 值派生而来的,因此 ECMA-262 将它们定义为表面上相等,如下:

 console.log(null == undefined); // true 

小知识

即使 null 和 undefined 有关系,它们的用途也是完全不一样的。

如前所述,永远不必显式地将变量值设置为 undefined,但 null 不是这样的;任何时候,只要变量要保存对象,而当时又没有那个对象可保存,就要用 null 来填充该变量;这样就可以保持 null 是空对象指针的语义,并进一步将其与 undefined 区分开来。

还有一点:null 也是个假值,检测方法与上述 undefined 一致

Boolean 类型

Boolean(布尔值)类型是 ECMAScript 中使用最频繁的类型之一,有两个字面值:true 和 false

  • 这两个布尔值不同于数值,因此 true 不等于 1,false 不等于 0。

练习场景

布尔值字面量 true 和 false 是区分大小写的

因此 True 和 False(及其他大小混写形式)是有效的标识符,但不是布尔值,如下:

 const a = true; // ✅
 const b = false; // ✅
 const c = True; // 报错:True is not defined

类型转换

虽然布尔值只有两个,但所有其他 ECMAScript 类型的值都有相应布尔值的等价形式

要将一个其他类型的值转换为布尔值,可以调用特定的 Boolean()转型函数,如下:

 const message = "Hello juejin";
 const remessage = Boolean(message); // true

在上述例子中,字符串 message 会被转换为布尔值并保存在变量 remessage 中。

转换表

Boolean()转型函数 可以在任意类型的数据上调用,而且始终返回一个布尔值;什么值能转换为 true或 false 的规则取决于数据类型和实际的值。

下表总结了不同类型与布尔值之间的转换规则:

数据类型转换为 true 的值转换为 false 的值
Booleantruefalse
String非空字符串""(空字符串)
Number非零数值(包括无穷值)0,NaN
Object任意对象null
UndefinedN/A(不存在)undefined

这个表非常重要,基本布尔转换都得依靠这个表

if 中的转换

像 if 等流控制语句会自动执行其他类型值到布尔值的转换,如下:

 const test = "Hey";
 if (test) { 
     console.log("Value is True");
 }
 // "Value is True"

上面的例子中,字符串 test 会被自动转换为等价的布尔值 true,因此成功输出 "Value is True"

由于存在这种自动转换,理解控制流语句中使用的是什么变量就非常重要,错误地使用对象而不是布尔值会明显改变应用程序的执行流。

总结

  • typeof 操作符用于确定任意变量的数据类型
  • undefined 属性表示变量没有被赋值,或者根本没有被声明
  • undefined字面值主要用于比较
  • null 值表示一个空对象指针
  • null用来填充一个要保存对象,而当时又没有那个对象可保存的变量
  • Boolean 两个字面值:true 和 false,泛指正确与错误;
  • Boolean()转型函数 可以在任意类型的数据上调用,而且始终返回一个布尔值

到此这篇关于ECMAScript 的 6 种简单数据类型的文章就介绍到这了,更多相关ECMAScript 数据类型内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 给页面渲染时间加速 干掉Dom Level 0 Event

    给页面渲染时间加速 干掉Dom Level 0 Event

    我们去掉事件绑定的逻辑,发现只渲染dom元素,不绑定事件的时间,仅仅125ms,可见事件绑定的时间消耗还是很大的 ,尤其是第一种方式,也就是Dom Level 0 Event,最为耗时
    2012-12-12
  • javascript正则表达式使用replace()替换手机号的方法

    javascript正则表达式使用replace()替换手机号的方法

    这篇文章主要介绍了javascript正则表达式使用replace()替换手机号的方法,可实现把手机号第4位到第7位替换成****的功能,是非常实用的技巧,需要的朋友可以参考下
    2015-01-01
  • JavaScript 实现 Tab 点击切换实例代码

    JavaScript 实现 Tab 点击切换实例代码

    Tab 选项卡切换效果在现如今的网页中,运用的也是比较多的,包括点击切换、滑动切换、延迟切换、自动切换等多种效果,在这篇博文里,我们是通过原生 JavaScript 来实现 Tab 点击切换的效果。
    2017-03-03
  • Ionic 2 实现列表滑动删除按钮的方法

    Ionic 2 实现列表滑动删除按钮的方法

    这篇教程将展示如何使用Ionic2添加一个简单的删除按钮到列表,当用户滑动列表项到左边的时候。这是一个处理删除列表数据时候常用的模式,具体内容大家通过本文学习吧
    2017-01-01
  • js中通过split函数分割字符串成数组小例子

    js中通过split函数分割字符串成数组小例子

    分割字符串成数组的方法有很多,不过使用最多的还是split函数,接下来为大家介绍下它的具体使用方法,感兴趣的朋友可以参考下
    2013-09-09
  • javascript实现简单打字游戏

    javascript实现简单打字游戏

    这篇文章主要为大家详细介绍了javascript实现简单打字游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • 微信小程序里引入SVG矢量图标的方法

    微信小程序里引入SVG矢量图标的方法

    这篇文章主要介绍了微信小程序里引入SVG矢量图标的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • javascript解析ajax返回的xml和json格式数据实例详解

    javascript解析ajax返回的xml和json格式数据实例详解

    这篇文章主要介绍了javascript解析ajax返回的xml和json格式数据,结合实例形式详细分析了JS ajax调用及返回值中xml与json格式数据的处理技巧,需要的朋友可以参考下
    2017-01-01
  • JS实现的简单图片切换功能示例【测试可用】

    JS实现的简单图片切换功能示例【测试可用】

    这篇文章主要介绍了JS实现的简单图片切换功能,结合实例形式分析了javascript结合时间函数定时触发控制图片的遍历与切换操作相关技巧,需要的朋友可以参考下
    2017-02-02
  • JavaScript原型继承_动力节点Java学院整理

    JavaScript原型继承_动力节点Java学院整理

    这篇文章主要为大家详细介绍了JavaScript原型继承的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06

最新评论