ECMAScript 的 6 种简单数据类型

目录
  • 前言
  • typeof 操作符
    • 类型检测
    • 使用说明
    • 小知识
  • Undefined 类型
    • 练习场景
    • undefined 与 not defined 的区别
    • 使用 typeof 检测 undefined
    • 小知识
    • Null 类型
    • 练习场景
    • 小知识
  • Boolean 类型
    • 练习场景
    • 类型转换
    • 转换表
    • if 中的转换
  • 总结

前言

本文为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 的值
Boolean true false
String 非空字符串 ""(空字符串)
Number 非零数值(包括无穷值) 0,NaN
Object 任意对象 null
Undefined N/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 数据类型内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 详解ECMAScript2019/ES10新属性

    每年都有一些新的属性进入ECMA262标准,今年发布的ECMAScript2019/ES10同样也有很多新的特性,本文将会挑选一些普通开发者会用到的新属性进行深入的解读. Array.prototype.flat() The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth. -- MDN 简单来说flat

  • 一篇文章弄懂ECMAScript中的操作符

    目录 一元操作符 布尔操作符 乘性操作符 加性操作符 关系操作符 相等操作符 条件操作符 赋值操作符 逗号操作符 总结 一元操作符 只能操作一个值的操作符叫做一元操作符 递增和递减.递增和递减操作符借鉴自C,而且有两个版本:前置型和后置型 前置型:操作符位于要操作的变量之前.执行前置型递增和递减操作时,变量的值都是在语句被求值以前改变的 var age = 29; var anotherAge = --age + 2 console.log(age) // 28 console.log(anot

  • ECMAscript新特性对象介绍

    目录 1.对象的属性 1.1属性表示法 2.计算属性名 3.Object 的方法 3.1Object.is() 方法 3.2Object.assign()方法 4.super 关键字 5.对象的扩展运算符 1.对象的属性 1.1属性表示法 ECMAScript 2015允许在大括号里面,直接写入变量和函数,作为对象的属性和方法.这样的书写更加简洁. 示例代码如下所示: let name = '一碗周' let job = '前端攻城狮' // 属性表示法 直接写入变量 let obj1 = {

  • 关于ECMAScript中的原始值和引用值详解

    目录 前言 什么是动态属性 值的复制 判断值类型 总结 前言 这应该是很基础的 JavaScript 的知识点,但估计很多小伙伴都只是简单带过,到面试时一问三不知.这里结合我之前的笔记,再简单的介绍下原始值和引用值的相关知识,来,开始. ECMAScript 规定变量可以包含两种数据类型,要么是原始值(primitive value),要么是引用值(reference value),原始值即为最简单的数据构成,而引用值是指由多个值构成的对象. 一共包含六种原始值,分别是:Undefined.Nu

  • JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)

    一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,主要用来给HTML增加动态功能. 几乎所有主流的语言都可以编译为JavaScript,进而能够在所有平台上的浏览器中执行,这也体现了JavaScript的强大性和在Web开发中的重要性.如Blade:一个Visual Studio扩展,可以将C#代码转

  • 浅谈ECMAScript 中的Array类型

    前言 Array 类型是除了 Object 类型之外又是一个特别经常用的一个类型了,当然数组在其他的语言中都是不可缺少的属性,我们都知道不管 js 还是其他类的语言的数组都是数据的有序列表,但是在 javaScript 中的数组是有一定的区别的,具体的区别就是: js 中的数组保存的数据可以是任何类型的数据,比如,我可以在第一个位置来保存数字,第二个位置保存字符串,第三和第四保存一个对象都完全OK,同时我还可以非常方便的操作数组的大小,添加新数据长度也会自动增长,动态调整什么的都是没有任何问题滴

  • ECMAScript6中Map映射的基本概念与常用方法

    目录 什么是映射 Object与Map区别 Map映射常用方法 声明并初始化 赋值set 获取键值get 删除键值delete 判断键值是否存在 has 获取所有键值 values() key/value 迭代器 entries() 遍历所有键值 forEach(callback) 清空Map映射所有键值 clear() 与其它数据结构的转换 Map映射转为数组 Map映射转为对象 数组转为Map映射 对象转为Map 映射Map转为JSON 总结 映射(Map)是 ECMAScript 6 规范

  • ECMAScript中迭代器的深入讲解

    目录 前言 较早的迭代 迭代器模式 迭代器工厂函数 迭代器协议 写在最后 前言 许多初级前端开发者在往中级迈进的过程中,面试经常问到的一个就是迭代器和生成器,其实在开发中都用过,但是并不知道这是什么,或者有些许了解但并不够深入.那这篇文章就对这一部分开发者会有一定的帮助,讲清楚迭代器这玩意. 较早的迭代 迭代肯定知道,简单理解起来就是循环,在JavaScript 中,计数循环便是最简单的一种.示例: for(let i = 0; i < 9; ++i){ console.log("[ i

  • ECMAScript 的 6 种简单数据类型

    目录 前言 typeof 操作符 类型检测 使用说明 小知识 Undefined 类型 练习场景 undefined 与 not defined 的区别 使用 typeof 检测 undefined 小知识 Null 类型 练习场景 小知识 Boolean 类型 练习场景 类型转换 转换表 if 中的转换 总结 前言 本文为JSRedBook数据类型, 主要讲述 ECMAScript 的 6 种简单数据类型(原始类型)中的其中三种:Undefined.Null.Boolean以及常用的操作符.

  • JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型

    ECMAScript是一种动态类型的语言,构建于5种简单数据类型(Undefined.Null.Boolean.Number.String)和一种复杂数据类型(Object)的基础之上.这篇文章就来复习一下简单数据类型,我会尽量从编程实践的角度来描述,下面代码运行环境为FireFox 14.0.1. 简单数据类型 简单数据类型 取值 Undefined undefined(只有一个值) Null null(只有一个值) Boolean true|false(只有两个值) Number 数值 St

  • JavaScript数值千分位格式化的两种简单实现方法

    在对数值进行格式化的时候,一个常见的问题是按照千分位格式化,网上对这个问题已经有很多种解决方法了,还可以利用Array.prototype.reduce方法来实现千分位格式化. function formatNumber(num) { if (isNaN(num)) { throw new TypeError("num is not a number"); } var groups = (/([\-\+]?)(\d*)(\.\d+)?/g).exec("" + nu

  • 在C++中把字符串转换为整数的两种简单方法

    目录 C++中的数据类型 如何在C++中声明和初始化 int s 如何在C++中声明和初始化 string s 如何使用 stoi() 函数将字符串转换为int 如何使用stringstream 类将一个字符串转换为一个int 总结 当你用C++编码时,经常会有这样的时候,你会想把一种数据类型转换为另一种. 在这篇文章中,你将看到两种最流行的方法来学习如何在C++中把字符串转换为整数. 让我们开始吧! C++中的数据类型 C++编程语言有一些内置的数据类型. int,用于整数(整数)(例如10,

  • JS 动态加载js文件和css文件 同步/异步的两种简单方式

    /*动态添加js或css,URL:文件路径,FileType:文件类型(js/css)*/ function AddJsFiles(URL,FileType){ var oHead = document.getElementsByTagName('HEAD').item(0); var addheadfile; if(FileType=="js"){ addheadfile= document.createElement("script"); addheadfile

  • php解析xml 的四种简单方法(附实例)

    XML处理是开发过程中经常遇到的,PHP对其也有很丰富的支持,本文只是对其中某几种解析技术做简要说明,包括:Xml parser, SimpleXML, XMLReader, DOMDocument. 1. XML Expat Parser: XML Parser使用Expat XML解析器.Expat是一种基于事件的解析器,它把XML文档视为一系列事件.当某个事件发生时,它调用一个指定的函数处理它.Expat是无验证的解析器,忽略任何链接到文档的DTD.但是,如果文档的形式不好,则会以一个错误

  • 调整优化您的LAMP应用程序的5种简单方法

    简介 Wikipedia.Facebook 和 Yahoo! 等主要 web 属性使用 LAMP 架构来为每天数百万的请求提供服务,而 Wordpress.Joomla.Drupal 和 SugarCRM 等 web 应用程序软件使用其架构来让组织轻松部署基于 web 的应用程序. 该架构的优势在于其简单性.而 .NET 这样的堆栈和 Java™ 技术可能使用大量硬件.昂贵的软件栈和复杂的性能调优,LAMP 堆栈可以运行于商品硬件之上,使用开源软件栈.由于软件栈是一个松散的组件集,而非一个整体堆

  • 三种简单排序算法(使用java实现)

    一.冒泡排序 算法思想:遍历待排序的数组,每次遍历比较相邻的两个元素,如果他们的排列顺序错误就交换他们的位置,经过一趟排序后,最大的元素会浮置数组的末端.重复操 作,直到排序完成. 示例演示: 算法实现: for(int i=0;i<array.length-1;i++){//最多排序n-1次 for(int j=0;j<array.length-i-1;j++){//需要交换的次数 if(array[j]>array[j+1]){ int temp=array[j]; array[j]

  • Java的Jackson库中复杂对象集合的几种简单转换

    话不多说,请看代码: package com; import java.io.BufferedReader; import java.io.ByteArrayInputStream; import java.io.IOException; import java.io.InputStreamReader; import java.util.List; import com.fasterxml.jackson.core.JsonParseException; import com.fasterxm

  • Java中八种基本数据类型的默认值

    通过一段代码来测试一下 8种基本数据类型的默认值 package dierge; public class Ceshi { int a; double b; boolean c; char d; float f; byte e; long h; short j; public static void main(String args[]){ Ceshi a=new Ceshi(); System.out.println("整型的默认值是:"+a.a); System.out.print

随机推荐