0

0

js数据类型详解

小云云

小云云

发布时间:2018-03-22 17:22:51

|

1486人浏览过

|

来源于php中文网

原创

es5简单数据类型(也称为基本数据类型):undefined、null、boolean、number和string。还有1 种复杂数据类型—object,object 本质上是由一组无序的名值对组成的。ecmascript不支持任何创建自定义类型的机制,而所有值最终都将是上述6 种数据类型之一。

1. typeof 操作符——检测给定变量的数据类型
对一个值使用typeof 操作符可能返回下列某个字符串:
 "undefined"——如果这个值未定义;
 "boolean"——如果这个值是布尔值;
 "string"——如果这个值是字符串;
"number"——如果这个值是数值;
"object"——如果这个值是对象或null;
"function"——如果这个值是函数。
下面是几个使用typeof 操作符的例子:
var message = "some string";
alert(typeof message); // "string"
alert(typeof(message)); // "string"
alert(typeof 95); // "number"
这几个例子说明,typeof 操作符的操作数可以是变量,也可以是数值字面量。注意,typeof 是一个操作符而不是函数,因此例子中的圆括号尽管可以使用,但不是必需的。

有时候,typeof 操作符会返回一些令人迷惑但技术上却正确的值。比如,调用typeof null 会返回"object",因为特殊值null 被认为是一个空的对象引用。Safari 5 及之前版本、Chrome 7 及之前版本在对正则表达式调用typeof 操作符时会返回"function",而其他浏览器在这种情况下会返回"object"。从技术角度讲,函数在ECMAScript 中是对象,不是一种数据类型。然而,函数也确实有一些特殊的属性,因此通过typeof 操作符来区分函数和其他对象是有必要的。

2.1 undefined 类型

undefined 类型只有一个值,即特殊的undefined。引入这个值是为了正式区分空对象指针与未经初始化的变量。对于尚未声明过的变量,只能执行一项操作,即使用typeof 操作符检测其数据类型。来看下面的例子:

var message; // 这个变量声明之后默认取得了undefined 值
alert(typeof message); // "undefined"
alert(typeof age); // "undefined"
结果表明,对未初始化和未声明的变量执行typeof 操作符都返回了undefined 值。因为虽然这两种变量从技术角度看有本质区别,但实际上无论对哪种变量也不可能执行真正的操作。

2.2 null 类型

null 类型是只有一个值的数据类型,这个特殊的值是null。从逻辑角度来看,null 值表示一个空对象指针,而这也正是使用typeof 操作符检测null 值时会返回"object"的原因。
如果定义的变量准备在将来用于保存对象,那么最好将该变量初始化为null 而不是其他值。
实际上,undefined 值是派生自null 值的,因此ECMA-262 规定对它们的相等性测试要返回true:
alert(null == undefined); //true
这里,位于null 和undefined 之间的相等操作符(==)总是返回true,不过要注意的是,这个操作符出于比较的目的会转换其操作数。

尽管null 和undefined 有这样的关系,但它们的用途完全不同。无论在什么情况下都没有必要把一个变量的值显式地设置为undefined,可是同样的规则对null 却不适用。换句话说,只要意在保存对象的变量还没有真正保存对象,就应该明确地让该变量保存null 值。这样做不仅可以体现null 作为空对象指针的惯例,而且也有助于进一步区分null 和undefined。

2.3 boolean 类型

boolean 类型只有两个字面值:true 和false,区分大小写。

转换为false的值:  false ,""(空字符串),0和NaN ,null  ,undefined

2.4 number 类型

number 类型:整数和浮点数值。
由于保存浮点数值需要的内存空间是保存整数值的两倍,因此ECMAScript 会不失时机地将浮点数值转换为整数值。显然,如果小数点后面没有跟任何数字,那么这个数值就可以作为整数值来保存。
var floatNum1 = 1.; // 小数点后面没有数字——解析为1
var floatNum2 = 10.0; // 整数——解析为10
浮点数值的最高精度是17 位小数,但在进行算术计算时其精确度远远不如整数。

百度AI搜
百度AI搜

百度全新AI搜索引擎

下载

关于浮点数值计算会产生舍入误差的问题,有一点需要明确:这是使用基于IEEE754 数值的浮点计算的通病,ECMAScript 并非独此一家;其他使用相同数值格式的语言也存在这个问题。

isFinite()函数可以确定一个数值是不是有穷的(是不是位于最小和最大的数值之间)。这个函数在参数位于最小与最大数值之间时会返回true。

NaN,即非数值(Not a Number)是一个特殊的数值,这个数值用于表示一个本来要返回数值的操作数未返回数值的情况(这样就不会抛出错误了)。例如,在ECMAScript 中,任何数值除以0 会返回NaN,因此不会影响其他代码的执行。NaN 本身有两个非同寻常的特点。首先,任何涉及NaN 的操作(例如NaN/10)都会返回NaN,这个特点在多步计算中有可能导致问题。其次,NaN 与任何值都不相等,包括NaN 本身。例如,下面的代码会返回false:alert(NaN == NaN);  //false
isNaN( )在接收到一个值之后,会尝试将这个值转换为数值。某些不是数值的值会直接转换为数值,例如字符串"10"或Boolean 值。而任何不能被转换为数值的值都会导致这个函数返回true。请看下面的例子:
alert(isNaN(NaN)); //true alert(isNaN("10")); //false(可以被转换成数值10)
alert(isNaN("blue")); //true(不能转换成数值) alert(isNaN(true)); //false(可以被转换成数值1)

isNaN()确实也适用于对象。在基于对象调用isNaN()函数时,会首先调用对象的valueOf()方法,然后确定该方法返回的值是否可以转换为数值。如果不能,则基于这个返回值再调用toString()方法,再测试返回值。而这个过程也是ECMAScript 中内置函数和操作符的一般执行流程。

数值转换:有3 个函数可以把非数值转换为数值:Number()、parseInt()和parseFloat()。
转型函数Number()可以用于任何数据类型,而另两个函数则专门用于把字符串转换成数值。这3 个函数对于同样的输入会有返回不同的结果。
Number()函数的转换规则如下:
 如果是Boolean 值,true 和false 将分别被转换为1 和0。
 如果是数字值,只是简单的传入和返回。
 如果是null 值,返回0。
 如果是undefined,返回NaN。
 如果是字符串,遵循下列规则:
 如果字符串中只包含数字(包括前面带正号或负号的情况),则将其转换为十进制数值,即"1"会变成1,"123"会变成123,而"011"会变成11(注意:前导的零被忽略了);
 如果字符串中包含有效的浮点格式,如"1.1",则将其转换为对应的浮点数值(同样,也会忽略前导零);
 如果字符串中包含有效的十六进制格式,例如"0xf",则将其转换为相同大小的十进制整数值;
 如果字符串是空的(不包含任何字符),则将其转换为0;
 如果字符串中包含除上述格式之外的字符,则将其转换为NaN。
 如果是对象,则调用对象的valueOf()方法,然后依照前面的规则转换返回的值。如果转换的结果是NaN,则调用对象的toString()方法,然后再次依照前面的规则转换返回的字符串值。
下面还是给出几个具体的例子吧。
var num1 = Number("Hello world!"); //NaN
var num2 = Number(""); //0
var num3 = Number("000011"); //11
var num4 = Number(true); //1
在处理整数的时候更常用的是parseInt()函数。parseInt()函数在转换字符串时,它会忽略字符串前面的空格,直至找到第一个非空格字符。如果第一个字符不是数字字符或者负号,parseInt()就会返回NaN;也就是说,用parseInt()转换空字符串会返回NaN(Number()对空字符返回0)。如果第一个字符是数字字符,parseInt()会继续解析第二个字符,直到解析完所有后续字符或者遇到了一个非数字字符。例如,"1234blue"会被转换为1234,因为"blue"会被完全忽略。类似地,"22.5"会被转换为22,因为小数点并不是有效的数字字符。
如果字符串中的第一个字符是数字字符,parseInt()也能够识别出各种整数格式。如果字符串以"0x"开头且后跟数字字符,就会将其当作一个十六进制整数;如果字符串以"0"开头且后跟数字字符,则会将其当作一个八进制数来解析。
为了更好地理解parseInt()函数的转换规则,下面给出一些例子:
var num1 = parseInt("1234blue"); // 1234 var num2 = parseInt(""); // NaN
var num3 = parseInt("0xA"); // 10(十六进制数) var num4 = parseInt(22.5); // 22
var num5 = parseInt("070"); // 56(八进制数) var num6 = parseInt("70"); // 70(十进制数)
var num7 = parseInt("0xf"); // 15(十六进制数)
var num = parseInt("070");//在ES5 JavaScript 引擎中,parseInt( )已经不具有解析八进制值的能力
parseInt()函数提供第二个参数:转换时使用的基数(即多少进制)。
var num = parseInt("0xAF", 16); //175 var num1 = parseInt("AF", 16); //175
如果指定了16 作为第二个参数,字符串可以不带前面的"0x"。 
与parseInt()函数类似,parseFloat()也是从第一个字符(位置0)开始解析每个字符。而且也是一直解析到字符串末尾,或者解析到遇见一个无效的浮点数字字符为止。即字符串中的第一个小数点是有效的,而第二个小数点就是无效的了,因此它后面的字符串将被忽略。"22.34.5"将会被转换为22.34。
除了第一个小数点有效之外,parseFloat()与parseInt()的第二个区别在于它始终都会忽略前导的零。parseFloat()可以识别前面讨论过的所有浮点数值格式,也包括十进制整数格式。但十六进制格式的字符串则始终会被转换成0。由于parseFloat()只解析十进制值,因此它没有用第二个参数指定基数的用法。最后还要注意一点:如果字符串包含的是一个可解析为整数的数(没有小数点,或者小数点后都是零),parseFloat()会返回整数。以下是使用parseFloat()转换数值的几个典型示例。
var num1 = parseFloat("1234blue"); //1234 (整数) var num2 = parseFloat("0xA"); //0
var num3 = parseFloat("22.5"); //22.5 var num4 = parseFloat("22.34.5"); //22.34
var num5 = parseFloat("0908.5"); //908.5 var num6 = parseFloat("3.125e7"); //31250000

2.5 String 类型

ECMAScript 中的字符串是不可变的,也就是说,字符串一旦创建,它们的值就不能改变。例如:
var lang = "Java";
lang = lang + "Script";
以上示例中的变量lang 开始时包含字符串"Java"。而第二行代码把lang 的值重新定义为"JavaScript"。实现这个操作的过程如下:首先创建一个能容纳10 个字符的新字符串,然后在这个字符串中填充"Java"和"Script",最后一步是销毁原来的字符串"Java"和字符串"Script",因为这两个字符串已经没用了。
var age = 11; var ageAsString = age.toString(); // 字符串"11"
var found = true; var foundAsString = found.toString(); // 字符串"true"
数值、布尔值、对象和字符串值(没错,每个字符串也都有一个toString()方法,该方法返回字符串的一个副本)都有toString()方法。但null 和undefined 值没有这个方法。
在不知道要转换的值是不是null 或undefined 的情况下,还可以使用转型函数String(),这个函数能够将任何类型的值转换为字符串。String()函数遵循下列转换规则:
 如果值有toString()方法,则调用该方法(没有参数)并返回相应的结果;
 如果值是null,则返回"null";
 如果值是undefined,则返回"undefined"。
因为null 和undefined 没有toString()方法,所以String()函数就返回了这两个值的字面量。
Tip:要把某个值转换为字符串,可以使用加号操作符把它与一个字符串("")加在一起。

2.6 Object 类型

ECMAScript 中的对象其实就是一组数据和功能的集合。创建:var o = new Object();
Object 的每个实例都具有下列属性和方法。
 constructor:保存着用于创建当前对象的函数。对于前面的例子而言,构造函数(constructor)就是Object()。
 hasOwnProperty(propertyName):用于检查给定的属性在当前对象实例中是否存在。其中,作为参数的属性名(propertyName)必须以字符串形式指定(例如:o.hasOwnProperty("name"))。
 isPrototypeOf(object):用于检查传入的对象是否是传入对象的原型。
 propertyIsEnumerable(propertyName):用于检查给定的属性是否能够使用for-in 语句来枚举。与hasOwnProperty()方法一样,作为参数的属性名必须以字符串形式指定。
 toLocaleString():返回对象的字符串表示,该字符串与执行环境的地区对应。
 toString():返回对象的字符串表示。
 valueOf():返回对象的字符串、数值或布尔值表示。通常与toString()方法的返回值相同。
由于在ECMAScript 中Object 是所有对象的基础,因此所有对象都具有这些基本的属性和方法。

从技术角度讲,ECMA-262 中对象的行为不一定适用于JavaScript 中的其他对象。浏览器环境中的对象,比如BOM 和DOM 中的对象,都属于宿主对象,因为它们是由宿主实现提供和定义的。ECMA-262 不负责定义宿主对象,因此宿主对象可能会也可能不会继承Object。

3. 注意

(1)任何操作数与NaN 进行关系比较,结果都是false。
(2)null == undefined 会返回true,因为它们是类似的值;但null === undefined 会返回false,因为它们是不同类型的值。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

49

2026.03.13

Python异步编程与Asyncio高并发应用实践
Python异步编程与Asyncio高并发应用实践

本专题围绕 Python 异步编程模型展开,深入讲解 Asyncio 框架的核心原理与应用实践。内容包括事件循环机制、协程任务调度、异步 IO 处理以及并发任务管理策略。通过构建高并发网络请求与异步数据处理案例,帮助开发者掌握 Python 在高并发场景中的高效开发方法,并提升系统资源利用率与整体运行性能。

89

2026.03.12

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

276

2026.03.11

Go高并发任务调度与Goroutine池化实践
Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开,系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示,帮助开发者构建稳定高效的 Go 并发任务处理系统,提高系统在高负载环境下的处理能力与稳定性。

59

2026.03.10

Kotlin Android模块化架构与组件化开发实践
Kotlin Android模块化架构与组件化开发实践

本专题围绕 Kotlin 在 Android 应用开发中的架构实践展开,重点讲解模块化设计与组件化开发的实现思路。内容包括项目模块拆分策略、公共组件封装、依赖管理优化、路由通信机制以及大型项目的工程化管理方法。通过真实项目案例分析,帮助开发者构建结构清晰、易扩展且维护成本低的 Android 应用架构体系,提升团队协作效率与项目迭代速度。

99

2026.03.09

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

105

2026.03.06

Rust内存安全机制与所有权模型深度实践
Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开,深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例,分析内存安全保障原理与零成本抽象优势,并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学,掌握在高性能与安全性并重场景中的工程实践能力。

230

2026.03.05

PHP高性能API设计与Laravel服务架构实践
PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开,重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景,深入分析性能瓶颈定位与优化思路,帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

619

2026.03.04

AI安装教程大全
AI安装教程大全

2026最全AI工具安装教程专题:包含各版本AI绘图、AI视频、智能办公软件的本地化部署手册。全篇零基础友好,附带最新模型下载地址、一键安装脚本及常见报错修复方案。每日更新,收藏这一篇就够了,让AI安装不再报错!

173

2026.03.04

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 6.1万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号