【JS基础】(三)JavaScript数据类型

ECMAScript 的数据类型

  1. 5种简单数据类型:UndefinedNullBooleanNumberString
  2. 1种复杂数据类型:Object

(一)typeof 操作符

typeof操作符用来检测给定变量的数据类型,对一个值使用 typeof 操作符可能返回下列某个字符串:

  • "undefined" —— 如果这个值未定义;
  • "boolean" —— 如果这个值是布尔值;
  • "string" —— 如果这个值是字符串;
  • "number" —— 如果这个值是数值;
  • "object" —— 如果这个值是对象或 null
  • "function" —— 如果这个值是函数。
var b;
console.log(typeof b); //'undefined'
console.log(typeof a); //'undefined'
console.log(typeof(true)); //'boolean'
console.log(typeof '123'); //'string'
console.log(typeof 123); //'number'
console.log(typeof NaN); //'number' 
console.log(typeof null); //'object' 

var obj = new String(); 
console.log(typeof(obj)); //'object' 

var fn = function(){}; 
console.log(typeof(fn)); //'function' 

console.log(typeof(class c{})); //'function'

(二)Undefined 类型

  1. Undefined 类型只有一个值,即特殊的 undefined
  2. 在使用 var 声明变量但未对其加以初始化时, 这个变量的值就是 undefined
var message; 
alert(message == undefined); //true 

// 上面与下面等价
var message = undefined; 
alert(message == undefined); //true 
  1. 包含 undefined 值的变量与尚未定义的变量用typeof操作符时都返回undefined,但还是不一样的:
var message; // 这个变量声明之后默认取得了 undefined 值 

// 下面这个变量并没有声明 
// var age 
alert(typeof message);  // "undefined" 
alert(typeof age);  // "undefined" 

alert(message);  // "undefined" 
alert(age);   // 产生错误 

(三)Null 类型

  1. Null 类型只有一个值,这个特殊的值是 null
  2. null 值表示一个空对象指针,而这也正是使用 typeof 操作符检测 null 值时会返回"object"的原因;
var car = null; 
alert(typeof car);     // "object"
  1. 如果定义的变量准备在将来用于保存对象,那么最好将该变量初始化为 null 而不是其他值。这样 一来,只要直接检查 null值就可以知道相应的变量是否已经保存了一个对象的引用了;
if (car != null){ 
    // 对 car 对象执行某些操作 }
  1. undefined 值是派生自 null 值的,因此 ECMA-262规定对它们的相等性测试要返回 true
alert(null == undefined);    //true
alert(null === undefined);    //false

(四)Boolean 类型

  1. Boolean 类型只有两个字面值:truefalse
  2. truefalse这两个值与数字值不是一回事,因此 true 不一定等于 1,而 false 也不一定等于 0
// == 会把比较的二者进行类型转换:
0 == false; // true, 会把0转成bool值进行比较
1 == true; // true, 同样把1转成bool值再和true进行比较

// === 是不会把比较的二者进行类型转换,是string就是string,是number就是number
0 === false; // false, 因为0是number,false是boolean,两者就肯定不相等
1 === true; // false
  1. 任何数据类型转换为Boolean值 —— Boolean()函数

可以对任何数据类型的值调用 Boolean()函数,而且总会返回一个 Boolean 值。至于返回的 这个值是true还是false取决于要转换值的数据类型及其实际值

数据类型 转换为true的值 转换为false的值
Boolean true false
String 任何非空字符串 ""(空字符串)
Number 任何非零数字值(包括无穷大) 0和NaN
Object 任何对象 null
Undefined 不适用 undefined

转换规则对理解流控制语句(如 if 语句)自动执行相应的 Boolean 转换非常重要。

(五)Number类型

  1. 数值字面量格式
  • 十进制(数字序列 0~9
  • 八进制(以0开头,以8为基数,数字序列 0~7
  • 十六进制(以0x开头,以16为基数,0~9A~F
var intNum = 55;    // 十进制整数 

var octalNum1 = 070;     // 八进制的 56 
var octalNum2 = 079;     // 无效的八进制数值——解析为 79 
var octalNum3 = 08;     // 无效的八进制数值——解析为 8 

var hexNum1 = 0xA;      // 十六进制的 10 
var hexNum2 = 0x1f;      // 十六进制的 31
  1. 浮点数值
  • 浮点数值,就是该数值中必须包含一个小数点,并且小数点后面必须至少有一位数字;
  • 浮点数值需要的内存空间是保存整数值的两倍;
  • 对于那些极大或极小的数值,可以用e表示法(即科学计数法)表示的浮点数值表示;
  • 浮点数值的最高精度是17位小数,但在进行算术计算时其精确度远远不如整数。因此,永远不 要测试某个特定的浮点数值。
var a = 0.1, b = 0.2;
if (a + b == 0.3){ // 不要做这样的测试! 
    alert("You got 0.3."); 
} 

console.log(a + b == 0.3); // false
// 0.1 加 0.2 的结果不是 0.3,而是 0.30000000000000004
  1. 数值范围

(1)ECMAScript 能够表示的数值范围Number.MIN_VALUE ~ Number.MAX_VALUE(5e-324 ~ 1.7976931348623157e+308)

(2)预定的Number特殊值

  • -Infinity(负无穷)
  • Infinity(正无穷)
  • NaN(非数值)
console.log(1/0); // Infinity
console.log(-1/0); // -Infinity

console.log(Number.NEGATIVE_INFINITY); // -Infinity
console.log(Number.POSITIVE_INFINITY); // Infinity

console.log(0/0); // NaN

console.log(Infinity/0); // Infinity
console.log(Infinity/-0); // -Infinity
console.log(Infinity/Infinity); // NaN
console.log(1/Infinity); // 0
console.log(-1/Infinity); // -0

由于-InfinityInfinityNaN是预定的Number特殊值,所以都属于Number类型。

console.log(-Infinity); // "number"
console.log(Infinity); // "number"
console.log(NaN); // "number"

(3)isFinite()函数 - 确定一个数值是不是有穷的

var result = Number.MAX_VALUE + Number.MAX_VALUE; 
alert(isFinite(result));  //false 

console.log(isFinite(Infinity)); // false
console.log(isFinite(-Infinity)); // false
console.log(isFinite(NaN)); // false
  1. NaN

(1)NaN,即非数值(Not a Number)是一个特殊的数值,这个数值用于表示一个本来要返回数值的操作数 未返回数值的情况(这样就不会抛出错误了)。

(2)NaN 两个非同寻常的特点

  • 任何涉及 NaN 的操作(例如 NaN/10)都会返回 NaN
  • NaN 与任何值都不相等,包括 NaN 本身
console.log(NaN/10); // NaN
alert(NaN == NaN);  //false 

(3)isNaN()函数

isNaN()函数接受一个参数,该参数可以 是任何类型,而函数会帮我们确定这个参数是否“不是数值”isNaN()在接收到一个值之后,会尝试将这个值转换为数值。而任何不能被转换为数值的值都会导致这个函数返回 true

alert(isNaN(NaN));  //true 
alert(isNaN(10));   //false(10 是一个数值) 
alert(isNaN("10")); //false(可以被转换成数值 10) 
alert(isNaN("blue"));  //true(不能转换成数值) 
alert(isNaN(true)); //false(可以被转换成数值 1)

在基于对象调用 isNaN() 函数时,会首先调用对象的 valueOf()方法,然后确定该方法返回的值是否可以转 换为数值。如果不能,则基于这个返回值再调用 toString()方法,再测试返回值。

  1. 数值转换

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

(1)Number()可以用于任何数据类型,转换规则如下:

  • 如果是 Boolean 值,truefalse 将分别被转换为 10
  • 如果是数字值,只是简单的传入和返回。
  • 如果是 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 
var num5 = Number("11abc"); // NaN
var num6 = Number(null); // 0
var num7 = Number(undefined); // NaN

(2)parseInt()函数 —— 在处理整数的时候更常用

在转换字符串时,更多的时看其是否符合数值模式。会忽略字符串前面的空格,直至找到第一个非空格字符

  • parseInt()的返回值只有两种可能,不是一个十进制整数,就是NaN
  • 如果parseInt()的参数不是字符串,则会先转为字符串再转换;
  • 如果第一个字符不是数字字符或者负号parseInt() 就会返回 NaN,也就是说,parseInt()转换空字符串会返回 NaNNumber()对空字符返回 0);
  • 如果第一个字符是数字字符parseInt()会继续解析第二个字符,直到解析完所有后续字符或者遇到了一个非数字字符。
  • 如果字符串以"0x"开头且后跟数字字符,就会将其当作一个十六进制整数;
  • 如果字符串以"0"开头且后跟数字字符,就会将其当作一个八进制整数;
  • parseInt()函数增加了第二参数(236之间),用于指定转换时使用的基数(即多少进制)。
var num = parseInt("blue1234");    // NaN 
var num1 = parseInt("1234blue");    // 1234 
var num2 = parseInt("");            // NaN 
var num3 = parseInt("0xA");         // 10(十六进制数) 
var num4 = parseInt(22.5);          // 22 
var num6 = parseInt("70");         // 70(十进制数) 
var num7 = parseInt("0xf");         // 15(十六进制数) 

// 在使用 parseInt()解析像八进制字面量的字符串时,ECMAScript 3 和 5 存在分歧。 
// ECMAScript 3 认为是 56(八进制),ECMAScript 5 认为是 70(十进制) 
var num8 = parseInt("070");  // 70

// 使用第二个参数指定转换时使用的基数就不会出现分歧了
var num9 = parseInt("070", 8); // 56 (指定转换时以8为基数)

(3)parseFloat()函数

  • parseFloat()也是从第一个字符(位置 0)开始解析每个字符。而且 也是一直解析到字符串末尾,或者解析到遇见一个无效的浮点数字字符为止;
  • 始终都会忽略前导的零;
  • parseFloat()只解析十进制值,因此它没有用第二个参数指定基数的用法;
  • 十六进制格式的字符串则始终会被转换成 0
  • 如果字符串包含的是一个可解析为整数的数(没有小数点,或者小数点后 都是零),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 

(4) Number()parseInt()的区别

当转换的内容包含非数字的时候,Number() 会返回NaN(Not a Number);
parseInt() 要看情况,如果以数字开头,就会返回开头的合法数字部分,如果以非数字开头,则返回NaN

// 空字符串时
var num1 = Number("");  // 0 
var num2 = parseInt("");  // NaN 

// 以数字开头时
var num3 = Number("1234blue");    // NaN
var num4 = parseInt("1234blue");   // 1234 

// 以非数字开头时
var num5 = Number("blue1234");    // NaN
var num6 = parseInt("blue1234");   // NaN 

(六)String 类型

字符串可以由双 引号(")或单引号(')表示,用双引号表示的字符串和用单引号表示的字符串完全相同。

  1. 字符字面量
    String 数据类型包含一些特殊的字符字面量,也叫转义序列,用于表示非打印字符,或者具有其他用途的字符。这些字符字面量如下所示:
字面量 含义
\n 换行
\t 制表
\b 空格
\r 回车
\f 进纸
\ 斜杠
' 单引号('),在用单引号表示的字符串中使用。例如:'He said, 'hey.''
" 双引号("),在用双引号表示的字符串中使用。例如:"He said, "hey.""
\xnn 以十六进制代码nn表示的一个字符(其中n为0~F)。例如,\x41表示"A"
\unnnn 以十六进制代码nnnn表示的一个Unicode字符(其中n为0~F)。例如,\u03a3表示希腊字符Σ
  1. 字符串的特点

ECMAScript 中的字符串是不可变的,也就是说,字符串一旦创建,它们的值就不能改变。要改变 某个变量保存的字符串,首先要销毁原来的字符串,然后再用另一个包含新值的字符串填充该变量。

var lang = "Java"; 
lang = lang + "Script"; 
// 首先创建一个能容纳 10 个字符的新字符串;
// 然后在这个字符串中填充"Java"和"Script";
// 最后一步是销毁原来的字符串"Java"和字符串"Script",因为这两个字符串已经没用了。
  1. 转换为字符串

(1)toString()方法

数值、布尔值、对象和字符串值都有 toString()方法,但 nullundefined 值没有这个方法。

var age = 11; 
var ageAsString = age.toString();  // 字符串"11"

(2)转型函数 String()

转型函数 String()能够将任何类型的值转换为字符串。String()函数遵循下列转换规则:

  • 如果值有 toString()方法,则调用该方法(没有参数)并返回相应的结果;
  • 如果值是 null,则返回"null"
  • 如果值是 undefined,则返回"undefined"
var value; 
alert(String(10));     // "10" 
alert(String(true));     // "true" 
alert(String(null));     // "null" 
alert(String(value));     // "undefined" 

(七)Object 类型

ECMAScript 中的对象其实就是一组数据和功能的集合。对象可以通过执行 new 操作符后跟要创建的对象类型的名称来创建。

  1. 创建对象
// 创建 Object 类型的实例
var o = new Object();
  1. Object 的每个实例都具有下列属性和方法
  • constructor:保存着用于创建当前对象的函数。对于前面的例子而言,构造函数(constructor) 就是 Object()
  • hasOwnProperty(propertyName):用于检查给定的属性在当前对象实例中(而不是在实例的原型中)是否存在。
  • isPrototypeOf(object):函数用于指示对象是否存在于另一个对象的原型链中。如果存在,返回true,否则返回false
  • propertyIsEnumerable(propertyName):用于检查给定的属性是否能够使用 for-in 语句 来枚举。
  • toLocaleString():返回对象的字符串表示,该字符串与执行环境的地区对应。
  • toString():返回对象的字符串表示。
  • valueOf():返回对象的字符串、数值或布尔值表示。通常与toString()方法的返回值相同。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,640评论 6 507
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,254评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,011评论 0 355
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,755评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,774评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,610评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,352评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,257评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,717评论 1 315
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,894评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,021评论 1 350
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,735评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,354评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,936评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,054评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,224评论 3 371
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,974评论 2 355

推荐阅读更多精彩内容

  •   引用类型的值(对象)是引用类型的一个实例。   在 ECMAscript 中,引用类型是一种数据结构,用于将数...
    霜天晓阅读 1,057评论 0 1
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,128评论 0 21
  • 教程 https://wangdoc.com/javascript/types/general.html 1 概述...
    智勇双全的小六阅读 581评论 0 0
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,237评论 0 4
  • 今天星期二,今天是阴天,特别冷。早晨我吃过早餐去学校,今天是新的一天! 今天第一次上体育课的时候有点儿累,因为老师...
    小狐狸的麻麻阅读 164评论 0 0