美文网首页让前端飞JavaScript < ES5、ES6、ES7、… >
【JS基础】(三)JavaScript数据类型

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

作者: 虹猫1992 | 来源:发表于2018-12-16 00:52 被阅读1次

    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()方法的返回值相同。

    相关文章

      网友评论

        本文标题:【JS基础】(三)JavaScript数据类型

        本文链接:https://www.haomeiwen.com/subject/fqozhqtx.html