JavaScript基本数据类型

yizhiyang
90 阅读8分钟

一、JavaScript中数据

  1. 数据类型

    • 数据在计算机内存中存储方式不同
    • 按照不同的存储方式，将数据进行分类，不同存储方式的数据分类不同，称为数据的数据类型(存储方式)

  2. JavaScript数据类型

    • 基本数据类型

      • 布尔类型
      • 数值类型
        • 整数类型
        • 浮点数类型
        • NaN
      • 字符串类型
      • null类型
      • undefined类型

    • 引用数据类型/复杂数据类型

      • 函数
      • 数组
      • 对象

二、基本数据类型

  • 布尔类型
  • 数值类型
    • 整数类型
    • 浮点数类型
    • NaN
  • 字符串类型
  • null类型
  • undefined类型

1. 布尔类型 boolean

  • 布尔类型只有两个数值，true:表示真/正确，false:表示假/错误
  • 布尔类型往往是用来比较判断的执行结果 
        var b = 50 > 60 ;
    console.log( b );    //false

    var c = 50 < 60 ;
    console.log( c );  //true
    • true / false 是JavaScript中的关键词
    • 对于计算机程序来说 ，true / false 就是类似于100、50这样的数值数据，可以直接赋值给变量存储
    • true / false 作为关键词必须要小写
  • 补充知识：在html中有一些属性成为布尔属性
    • 常见的布尔属性reversed、checked、selected、multiple、 readonly、disabled等等
        <ol reversed>
      <li>列表</li>
      <li>列表</li>
    </ol>

    <input type="radio" checked> 
    <input type="checkbox" checked> 

    <select name="" id="">
      <option value="">北京1</option>
      <option value="">北京2</option>
      <option value="" selected>北京5</option>
    </select>

    <input type="file" multiple>
    <input type="text" readonly>
    <button disabled>按钮</button>

2. 字符串类型 string

  • 一串由字符、数字、符号等等内容组成的数据
  • 字符串类型的表示必须有定界符，定界符中定义的内容就是字符串的内容
  • 实际项目中推荐使用的定界符，执行效率更高 
      // 使用定界符包裹的内容就是字符串内容
  var str = "我是js程序的字符串";
  console.log(str);

  // 输出的是 字符串类型数据
  console.log("true");
  console.log("100");
  console.log("100");

  //模板字符串
  console.log(`100`);
  • 总结
    • 只要是定界符包裹的就是串
    • 只要是没有定界符包裹的就是值

3. null 和 undefined

  • null表示空值，是正确赋值，但是赋值的数据是一个空值

  • undefined表示应该赋值,没有正确赋值

    • 在定义变量时，应该给变量赋值存储的数据
    • 如果只是定义变量，没有赋值存储的数据; JavaScript程序，会给没有赋值数据的变量存储 undefined 数据
      // 给变量a赋值存储空值
  var a = null;
  console.log("a的值为：", a);

  // 定义变量b，但是没有赋值存储的数据
  var b;
  console.log("b的值为：", b);
    image.png

  • 总结

    • null：是正确赋值，赋值的是 '空'
    • undefined：是应该赋值，没有赋值
    • null和undefined都可以作为数值，直接赋值给变量 ，必须都是小写字符

4. 数值类型（整数integer）

  • 整数分为负整数、0 、正整数
  • 其他进制整数的存储语法
    1. JavaScript中数值的存储输出，默认都是按照十进制数值进行的
    2. 其他进制的数值，必须要定义标识符
    3. JavaScript程序才会按照指定的进制，进行数据的存储

  1. 二进制

    • 0 1
    • 在数值前添加0b或者0B
    • 在存储时，定义的数值按照二进制数值存储
      // JavaScript默认的十进制数值存储
  var res1 = 100;
  console.log(res1);

  // 在数值前添加标识符0b,JavaScript按照指定的二进制数值存储
  var res2 = 0b100;
  // 输出时自动转化为十进制数值输出
  console.log(res2); //4

  1. 八进制

    • 0 1 2 3 4 5 6 7
    • 在数值前添加0o或者0O
    • 在存储时，定义的数值按照八进制数值存储
      // 在数值前添加标识符0o, JavaScript按照指定的八进制数值存储
  var res = 0o100;
  
  // 输出时自动转化为十进制数值输出
  console.log(res); // 64
  • 特别注意：
    1. 有的语法说可以添加标识符0，也会按照八进制数值存储
    2. 但是在实际项目的严格模式中，这样的语法形式会报错

  1. 十进制

    • 0 1 2 3 4 5 6 7 8 9
    // JavaScript默认的十进制数值存储 
var res1 = 100; 
console.log(res1);

  1. 十六进制

    • 0 1 2 3 4 5 6 7 8 9 a b c d e f
    • 在数值前添加 0x或者0X
    • 在存储时定义的数值按照十六进制数值存储
      // 在数值前添加标识符0x, JavaScript按照指定的十六进制数值存储
  var res = 0x100;
  
  // 输出时 自动转化为 十进制数值 输出
  console.log(res); //256
  • 注意
    • 实际项目中 js程序运行结果，不会生成二进制、八进制、十六进制的数据
    • 往往是数据库中存储的数据，有可能是二进制、八进制、十六进制的数据
    • 前端程序员需要做的就是正确的按照进制存储数据，按照需要的进制输出数据

  1. 按照指定进制输出

    • 变量.toString( 进制 );
    • 将变量中存储的数据转化为指定的进制
      // 在变量中存储十进制数值100
  var a = 100;

  // 默认按照十进制输出
  console.log("默认十进制：", a);

  // 将存储的数据转化为二进制数值输出
  console.log("二进制：", a.toString(2));

  // 将存储的数据转化为八进制数值输出
  console.log("八进制：", a.toString(8));

  // 将存储的数据转化为十六进制数值输出
  console.log("十六进制：", a.toString(16));

  // 存储二进制的数值100100,按照二进制数值输出,存储时数值前添加0b
  var a = 0b100100;
  console.log("二进制：", a.toString(2));
    image.png

5. 数值类型（浮点数float）

  • 核心问题1：有效数值

    • 在计算机程序中，不会允许小数的位数是无穷多位
    • 在JavaScript程序中，浮点数的有效数值最多17位
    • 从左起第一个非0的数字开始计算有效数值的位数，也就是所有的有效数值最多17个
      // 左起第一个非0数字开始计算,所有的数字最多17位
  console.log(123.456789012345678901234567890123456789);
  //123.45678901234568
  console.log(0.000123456789012345678901234567890123456789);
  //0.00012345678901234567

  • 核心问题2：溢出/精度丢失/误差

    • 在算机程序中，浮点数的存储形式是以近似值的形式存储数据
      • 也就是 0.1 存储的数据是 0.100000000000001
      • 也就是 0.2 存储的数据是 0.200000000000003
    • 在浮点数直接运算或者比较时，一定会出现浮点数的误差/溢出/精度丢失
    • 这样的情况，在特殊时会表现出来，大部分不情况程序执行是正确的
      // 精度丢失/溢出/误差
  console.log(0.1 * 0.1); //0.010000000000000002
  console.log(0.1 * 0.3); //0.03

  // 如果正常计算 (0.1 + 0.7) * 10 就是8
  // 但是现在有浮点数的精度丢失/溢出/误差
  // 判断的结果是false
  console.log((0.1 + 0.7) * 10 === 8); //false

  // 大部分情况下运算结果是正确的
  // 特殊情况下运算结果是错误的
  console.log((0.2 + 0.6) * 10 === 8); //true
  console.log((0.4 + 0.4) * 10 === 8); //true

  • 核心问题3：科学计数法

    • 科学计数法是数值的一种表现形式表示语法
      • 2e3 2乘以10的3次方 结果是2000,本质上是浮点数类型
      • 2e-3 2乘以10的-3次方 也就是2除以10的3次方，结果是0.002
        • 科学计数法表达式的一切数值都是浮点数类型
    • 科学计数法不算整数的语法形式
      // 虽然输出的数值是2000，但是科学计数法表达式的数值都是按照浮点数类型计算
  console.log(2e3);

  // 输出结果也是2000 但是数值类型是浮点数类型
  console.log(2000.0);

6. NaN（not a number）

  • 表达式运算结果是数值类型，但是不是一个具体的数字
  • 往往是有非数字参与运算的结果
  • NaN 可以作为数据数值直接赋值给变量，赋值时一定是严格遵守大小写 
          var a = 100 - 60;
      console.log(a); //40

      var b = 100 - "贵阳";
      console.log(b); //NaN
  • 有NaN参与的运算结果一定还是NaN 
      console.log(100 + NaN); //NaN
  console.log(100 - NaN); //NaN
  console.log(100 * NaN); //NaN
  console.log(100 / NaN); //NaN
    image.png

  • 两个NaN比较是不是相等，结果是 false

    • NaN不是一个具体的数值数据
    • JavaScript在比较判断时, 就不能判断，是不是具体的数值相同
    • 比较判断的结果就是false
      // === 判断符号两侧的表达式
  console.log(10 === 10); //true
  console.log(10 === 9); //false

  // NaN不是一个具体的数值数据
  console.log(NaN === NaN); //false

  // 执行结果都是NaN 比较判断的结果也是false
  console.log(100 - "北京" === 100 - "上海"); //false

三、isNaN( )

  • isNaN()的原理：判断输入数据的数据类型( 判断数据是不是NaN)

    • 如果是NaN，返回值是true
    • 如果不是NaN，返回值是false
      // 如果输入的数据不是NaN, 返回值是false
  console.log(isNaN(100)); //false

  // 如果输入的数据结果是NaN,返回值是true
  console.log(isNaN(100 - "北京")); //true

  • isNaN() 的执行原理

    • 判断输入数据的数据类型
    • 如果是数值类型，直接判断输的数据是不是 NaN
    • 如果不是数值类型，会先自动转化为数值类型，再判断是不是 NaN
      // 1, 输入的内容是字符串'北京'，不是数值类型
  // 2, 自动将字符串'北京'转化为数值类型，转化结果是NaN
  // 3, isNaN() 根据字符串'北京'，自动转化的结果NaN执行判断
  // 4, 判断结果是 true
  console.log(isNaN("北京"));
avatar
文章
阅读
粉丝