JavaScript数据类型的一些注意要点

上班拧螺丝
• 阅读 2709

Javascript 数据类型

ECMAscript 中有5种简单的数据类型,也被称为基本数据类型:Undefined、Null、Boolean、Number和String。还有一种复杂的数据类型——Object。

Undefined 类型

在使用var 声明变量但未对其进行初始化时,这个变量的值就是undefined。如:

var number;
document.write(number); //undefined

如果没有声明变量则会出现下面这种错误。如:

document.write(str); //错误

但是用typeof对其进行执行时,不管有没有声明都会返回undefined 值。如:

var num;
document.write(typeof num); //undefined
document.write(typeof str); //undefined

Null 类型

使用typeof检测null 时会返回"object"。如:

var num = null;
document.write(typeof num); //object

实际上undefined 值是派生自null 值的,因此他们相等都会返回true。如:

alert(null == undefined); //true

这里要注意的是,只要意在保存对象的变量还没有真正保存对象,就应该明确地让该变量保存null 值,此举有助于区分null 和 undefined。如:


var num1 = null;
var num2;
document.write(typeof num1 + " " + typeof num2); //object undefined

Boolean 类型

要将一个值转换为其对应的Boolean 值,可以使用转型函数Boolean()。如:

var str = "helloworld";
document.write(Boolean(str)); //true

《JavaScript高级编程设计》一书中的3.4.4中给出了关于各种数据类型及其对应的转换规则表格。大概有以下几种:

  1. 数据类型为String 时,任何非空字符串都会转换为true;

  2. 数据类型为Number 时,除了0 和NaN 会被转换为false 之外,其他都会转换为true;

  3. 数据类型为Object 时,除了null 之外,都会转换为true;

  4. 数据类型为Undefined 时,n/a 会被转换为true,undefined 会被转换为false;

这里要注意的是,if 语句经常使用自动执行响应的Boolean 转换作为条件。如:

var str = "helloworld";
if (str){
    document.write("hellothere");
} //hellothere

Number 类型

除了可以以十进制表示之外,整数还可以通过八进制或者十六进制的字面值来表示,其中八进制字面值的第一位必须是0,然后是八进制数字序列(0~7)。如:

var num1 = 070; //八进制的56
var num2 = 032; //八进制的32
var num3 = 079; //错误的八进制(>7)
var num4 = 09; //错误的八进制(>7)

十六进制字面值的前两位必须是0x,后面跟任何十六进制数(0~9 及 A~F)。如:

var num1 = 0xA; //十六进制的10
var num1 = 0xa; //也是十六进制的10(字母不区分大小写)

浮点数值

这里要注意的是,永远不要比较特定的浮点数值。如:

var a = 0.1;
var b = 0.2;
if (a + b == 0.3){
    document.write("you are right")
} //因为0.1 加上0.2 实际上等于0.30000000000000004

数值范围

ECMAScript 能够表示的最大和最小数值保存在Number.MAX_VALUENumber.MIN_VALUE 之中。要想确定一个数值是不是有穷的,可以使用isFinite()函数。如:

document.write(isFinite(Number.MAX_VALUE + Number.MAX_VALUE)); //false

NaN

0 除以0 会返回NaN,正数除以0 会返回Infinity,复数则会返回-Infinity。其次,NaN 与任何数值都不相等,包括它本身。另外函数isNaN()可以帮助我们确定这个参数是否“不是数值”。如:

document.write(isNaN("a")); //true;
document.write(isNaN("324")); //false;
document.write(isNaN(true)); //false;
document.write(isNaN(false)); //false;
document.write(isNaN(NaN)); //true;

数值转换

有三个函数可以把非数值转换为数值:Number()parseInt()parseFloat()

Number()的转换规则如下:
  • 如果是Boolean 值,true 和false 会被转换为1 和0。

  • 如果是数字值,则不变。

  • 如果是null 值,则转换为0。

  • 如果是undefined,返回NaN。

  • 如果是字符串则遵循下列规则:

    • 如果只有数字,则转换为十进制数值。

    • 如果是浮点格式,则将其转换成对应的浮点数值。同样也会忽略前导零。

    • 如果是十六进制格式则会转换成十进制数。

    • 如果字符串是空的,则会转换成0。

    • 其他情况则会转换为NaN。

具体看下面的例子:

document.write(Number(true)); //1
document.write(Number(false)); //0
document.write(Number("789")); //789
document.write(Number(null)); //0
document.write(Number(undefined)); //NaN
document.write(Number("02.0942")); //2.0942
document.write(Number(0xa)); //10
document.write(Number("")); //0
document.write(Number("fdsa")); //NaN
parseInt()的转换规则如下:
  • 如果第一个字符不是数字字符或者符号,parseInt()会返回NaN。

  • parseInt()转换空字符串会返回NaN。

  • 如果第一个字符是数字字符,它会继续解析第二个字符,直到遇到了一个非数字字符.

下面是具体的例子:

document.write(parseInt("fds")); //NaN
document.write(parseInt("")); //NaN
document.write(parseInt("1111112abc")); //1111112
document.write(parseInt("-1111112abc")); //-1111112
document.write(parseInt("+1111112abc")); //-1111112
document.write(parseInt("0xa")); //10
document.write(parseInt("0022.00009")); //22
document.write(parseInt("070")); //ECMAScript 3认为是56(八进制), ECMAScript 5认为是70(十进制)

另外需要注意的是,ECMAScript 5已经不具备解析八进制值的能力了所以为了消除这个问题,可以为这个函数提供第二个参数:转换时使用的基数(多少进制),具体如下:

document.write(parseInt("070",10)); //70
document.write(parseInt("070",8)); //56
document.write(parseInt("070",16)); //112

多数情况下,最好默认设置成10进制。

parseFloat()的转换规则如下:
  • parseInt()类似,不同的是字符串第一个小数点是有效的,而从第二个小数点开始包括第二个小数点是无效的。

  • 他不能解析十六进制数值!!!

  • 他只能解析十进制数值!!!

  • 他没有用第二个基数来指定进制的用法。

下面是具体的例子:

document.write(parseFloat("421")); //421
document.write(parseFloat("0421.32.1")); //421.32
document.write(parseFloat("0xaafd")); //0
document.write(parseFloat("070")); //70
document.write(parseFloat("070abc")); //70
document.write(parseFloat("")); //NaN
document.write(parseFloat("abc")); //NaN

String 类型

要把一个值转换成字符串有两种方式。第一种是使用几乎每个值都有的toString()方法。如下:

document.write((533).toString(10)); //"533"
document.write((0xa).toString(10)); //"10"
document.write((0xa).toString(2)); //"1010"
document.write((true).toString(10)); //"true"
document.write((false).toString(10)); //"false"

另外需要注意的是,null 和 undefined 不能转换。


document.write((null).toString(10)); //
document.write((undefined).toString(10)); //

如果不知道需要转换的数值是否是null 或者undefined 则应该使用转型函数String(),如果是null 会返回"null"如果是undefined 会返回"undefined"。如下:

document.write(String(null)); //"null"
document.write(String(undefined)); //"undefined"

Object 类型

另外再详细介绍Object 类型

点赞
收藏
评论区
推荐文章
晴空闲云 晴空闲云
3年前
javascript实践教程-05-数据类型
本节目标1.掌握js中7种数据类型。2.掌握5种基本数据类型number、string、boolean、null、undefined的声明。3.掌握js中数组的声明和数组相关的方法。4.掌握js中对象的声明和属性、方法的使用。内容摘要本篇介绍了js中的7种数据类型,其中5种基本数据类型:number、string、boolean、null、unde
凝雪探世界 凝雪探世界
4年前
js-Answers一
JavaScript的组成JavaScript由以下三部分组成:1.ECMAScript(核心):JavaScript语言基础2.DOM(文档对象模型):规定了访问HTML和XML的接口3.BOM(浏览器对象模型):提供了浏览器窗口之间进行交互的对象和方法JS的基本数据类型和引用数据类型
Wesley13 Wesley13
3年前
SASS基础
特点:1.在css基础上增加特性:变量、嵌套(nesting)、混合(@mixin)、继承(@extend);2.通过函数进行颜色值与属性值的运算;3.提供控制指令等高级功能;4.自定义输出指令;数据类型:Sass和JavaScript语言类似,也具有自己的数据类型,在Sass中包含以下几种数据类型:1\
Jacquelyn38 Jacquelyn38
4年前
面试官:JavaScript的数据类型你了解多少?
前言作为JavaScript的入门知识点,Js数据类型在整个JavaScript的学习过程中其实尤为重要。最常见的是边界数据类型条件判断问题。我们将通过这几个方面来了解数据类型:概念检测方法转换方法概念undefined、Null、Boolean、String、Number、Symbol、BigInt为基础类型;Ob
LinMeng LinMeng
4年前
js之传值与传址/undefined和null/严格模式
传值与传址基本数据类型有五种Undefined、Null、Boolean、Number和String引用数据类型有两种object,array,fn两种数据类型的区别:1.存储位置不同原始数据类型直接存储在栈(stack)中简单数据段,占据空间小,大小固定,属于被频繁使用的数据,所以存储在栈中;引用数据类型直接存
劳伦斯 劳伦斯
4年前
前端面试题自检 JS CSS 部分
JS类型JavaScript的简单数据类型Number,String,Boolean,Undefined,Null,Symboltypeof操作符的返回值numberstringbooleanundefinedobjectfunction
Stella981 Stella981
3年前
JavaScript的深拷贝和浅拷贝
一、数据类型数据分为基本数据类型(String,Number,Boolean,Null,Undefined,Symbol)和对象数据类型。、1.基本数据类型的特点:直接存储在栈(stack)中的数据2.引用数据类型的特点:存储的是该对象在栈中引用,真实的数据放在堆内存里。引用数据类型在栈中存储了指针,该指针指向堆中该实
Wesley13 Wesley13
3年前
JavaSrcipt的数字(number):深入理解内部机制
一、数字的语法JavaScript中的数字字面量一般用十进制表示。在JavaScript中表示数字的数据类型只有一种Number,这种天使与魔鬼同体的数据类型也就只有js了。//同时表达整数和浮点数vara78,b78.3;console.log(typeofa);//number
Wesley13 Wesley13
3年前
ES6 基本数据类型整理
操作系统:Windows10运行环境:NodeJSv8.1.2Shell:WindowsPowerShellES6基本数据类型整理简介:对7种数据类型进行简单整理1定义在ES6中共有7种基本数据类型:undefined、nu
Stella981 Stella981
3年前
Js——第一课
数据类型:要特别注意相等运算符。JavaScript在设计时,有两种比较运算符:第一种是比较,它会自动转换数据类型再比较,很多时候,会得到非常诡异的结果;第二种是比较,它不会自动转换数据类型,如果数据类型不一致,返回false,如果一致,再比较。由于JavaScript这个设计缺陷,_不要_使用比较,始终
待兔 待兔
1年前
JS的数据类型你了解多少?
JS的数据类型你了解多少?作为JavaScript的⼊⻔级知识点,JS数据类型在整个JavaScript的学习过程中其实尤为重要。因为在JavaScript编程中,经常会遇到边界数据类型条件判断问题,很多代码只有在某种特定的数据类型下,才能可靠地执⾏。希望