第二节:JavaScript中的数据类型及类型转换

一. 数据类型

JavaScript中的值,无论是字面量还是变量,都有明确的类型。

1. 概述

1.1 基本类型5种

number 数字类型

string 字符串类型

boolean 布尔类型,仅有两个值true 和 false,讲if语句时我们细说

undefined undefined类型,这中类型值只有一个,就是undefined

null null类型,这种类型的值也就只有一个null,之后在说

1.2 引用类型

讲到再说


2. 数据类型的检测

使用typeof关键字检查数据类型,通常用来检测变量的类型,因为直接量的类型一眼就看的出来

var a = 123;
console.log(typeof a);       //number


2.1 . number 数字类型

所有的number类型

    //下面定义的变量都是number类型
    var a = 200;       
    var b = -123;
    var c = 123.456;
    var d = .5e4;
    var e = 0xf0;
    var f = 016;
    var g = Infinity;       
    var h = NaN;

    console.log(typeof a);
    console.log(typeof b);
    console.log(typeof c);
    console.log(typeof d);
    console.log(typeof e);      
    console.log(typeof f);
    console.log(typeof g);
    console.log(typeof h);

JS中所有的数字都是number类型的,不在细分为整形int、浮点型float这些乱七八糟的东西。

number类型的东西, 所有的数字(不分正负,整浮,大小,进制,),Infinity, NaN


2.2 . string 字符串类型
var str1 = "您好啊";
var str2 = "250";   
var str3 = "";      //空字符串,也是字符串
console.log(typeof str1);
console.log(typeof str2);
console.log(typeof str3);


2.3 . boolean类型

boolean类型(布尔类型), 布尔类型只有两个值true,false,即真或假

var bool = true;  
console.log(bool );
console.log(typeof bool );      //boolean

注意:此时true,和false没有加引号,所以不是字符串, 同时注意它也是变量,true时一个关键字, 本省就有特殊意义,表示真和假,


2.4 . undefined 类型

前面说过,如果只var了一个变量,没有赋初值,它的默认值是undefined;

这个undefined是自成一家,类型和值都是undefined。这种类型的值页只有一个。

var un;   //我只定义了,没有赋初值,所以就是undefined,类型也是undefined
console.log(un);
console.log(typeof un);      //undefined


3. 变量的类型

变量是什么类型,和赋的值有关系,而和定义的时候是没有关系的。定义的时候,都是用var关键字定义的。

// 动态数据类型
var num = 123;  //number
console.log(typeof num);      
num = "哈哈";  //改为string是合法的
console.log(typeof num);

我们说js这个语言叫做动态数据类型,原因就在这里,

就是赋值的时候就决定这个变量的类型了。甚至可以改变这个变量的值,为其他类型的值。变量的类型是自动检测的,就是检查变量存储的值的类型,不是认为定义的。


二. 运算符:加号 +

我们先看一个运算符加号,因为它比较特殊

加号两边都是数字的时候,那么就是数学加法;两边只要有一遍是字符串,那么结果就是字符串拼接。

console.log("您" + "好");  //您好
console.log(3 + 2);     //5
console.log(3 + "2");    //32

因为2被引号引起来了,所以就是字符串,所以+就是连字符

所以要知道加号结果是什么, 一定要知道加号左右两侧的数据类型,在初期学习中很容易出的问题

实例:

var a = "10";
var b = "2";
console.log(a + b);    //102
var a = 10;
var b = 2;
console.log("a" + b);   //a2

多个加号,运算顺序是从左算到右:

var a = 3;
var b = 2;
var c = 5;
console.log(a+b+'c');
console.log("a" + a + b + "c");  //a32c
var a = 3;
var b = 2;
var c = 5;
console.log(a + b + "c");        //5c

console.log(1 + 2 + "a" + "(3 + 4)");

发现没有,运算从左到有计算,默认是数字加分,但是一旦遇到字符串就变成字符串拼接了


三. 数据类型转换

数据类型转换就是其字面意思, 讲一种数据类型转换为另外一种数据类型

先来理解一下,
在JS中有一些方法可以将内存中表示其他数据类型转换为对应的数字类型

因此我们要先认识一个语句prompt(),这个语句和alert差不多,也是弹窗,弹的是输入框:

prompt("请输入你的电话","138")

这些小功能,就叫做程序给我们提供的API,每个API都有自己不同的语法。

prompt(“提示文本”,”默认值”);

默认值可以省略。

可以把用户输入的值,存入变量:

var a = prompt("请输入你的电话","138");
alert("哈哈,你输入的电话是" + a);

用prompt接收的任何东西都是字符串,哪怕用户输入了一个数字,也是字符串的数字。

接下来,让我们学习数据类型转换, 首先学习讲其他数据类型转为数字类型

1. 转 number
  • Number方法

    1. string       "12px" => NaN “” => 0
    2. boolean       true => 1 false => 0
    3. null        null => 0
    4. undefined       undefined => NaN
    5. {}        {} => NaN
    6. []        [1]=>1,[]=>0,[1,2]=>NaN
    7. function        Number(function(){}) => NaN

    例子:

    //计算器
    //第1步让用户先输入第1个数字
    var a = prompt("请输入第1个数字啊");
    //第2步让用户先输入第2个数字
    var b = prompt("请输入第2个数字啊啊");
    //第3步求和
    var sum = Number(a) + Number(b);
    //第4步弹出结果
    alert(sum);
    


  • parseInt方法

parseInt就是将一个string转为一个整数,不四舍五入,直接截取整数部分。如果这个string有乱七八糟的东西,那么就截取前面数字部分。

所以使用这个方法可能会丢失小数部分

var a = "678";
var b = parseInt(a);    //parseInt就把字符串678转为数字678了
console.log(b);         //678
console.log(typeof b);  //number

下面的实例结果都是250,最后一个是-250:

parseInt("250") //250
parseInt("250.666")  //250
parseInt("250年都会很爱你们")   //250
parseInt("250年零个3月又11天")        //250
parseInt("250px")       //250
parseInt("-250.99999999") //-250

parseInt()不仅仅能够转为整数,还可以进行进制的转换,把任何进制的数字,都换为10进制。

进制转换的字符串,用逗号隔开。

下面的运算结果都是15:

parseInt(15,10)
parseInt(17,8)
parseInt(1111,2)
parseInt("0xf",16)
parseInt("f",16)
parseInt(16,9)
parseInt("15e6",10)
parseInt("15*6",10)

parseInt如果不能转,那么就返回NaN

1parseInt("Hello", 8);   //NaN
parseInt("五百年");    //NaN


  • parseFloat方法

parseFloat就是将字符串转为浮点数

尽可能的将一个字符串转为浮点数,浮点数之后如果有乱七八糟的内容,直接舍弃。

var a = "123.456.888";
var b = parseFloat(a);
console.log(b);      //123.456

console.log(parseFloat("123.67年"));     //123.67
console.log(parseFloat("哈哈123.67年"));   //NaN

也就是说,数字类型都是number,不分整数和浮点数,但是转换的时候分。


  • isNaN()方法

作用:判断一个数字是不是NaN
如果是,则结果是true;如果不是,则结果是false

isNaN()方法的作用是判断数字是不是NaN,那它能判断其他数据类型吗??

isNaN(true) ==> false
isNaN(’12.5px’) ==> true
isNaN(null) ==> false
isNaN(undefined) ==> true

结论:

isNaN()这个方法会先把其他类型数据转化成数字类型,之后判断是不是NaN


2. 转 string

将一个数字,与一个空字符串进行连字符运算,那么就是自动转为字符串了。

var a = 123;
var b = a + "";
console.log(b);
console.log(typeof b);


3. 转 boolean
  • Boolean() 方法

    只有六种情况Boolean(被转换的数据)的结果是false,其余全是true

    1. 0 数字0
    2. NaN 数字NaN
    3. "" 空字符串
    4. false 布尔值false
    5. undefined undefined类型
    6. null null类型

    用的不多了解几个,大多用隐式转换,这个后面会将,先了解

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342