js 简单数据类型

数据类型

简单数据类型 : Undefined , Null , Boolean, Number, String, Symbol

Undefined 类型

只有一个值 undefined , 变量声明未赋值默认取undefined

Null 类型

只有一个值 null , null表示一个空对象指针

console.log(typeof null === 'object'); // true
console.log(null == undefined); // true

Boolean 类型

有两个值 true false

转型函数 Boolean () 可以将任意值转为布尔值

    console.log(Boolean(1)); // true
    console.log(Boolean('1'));  // true
    console.log(Boolean([])); // true
    console.log(Boolean({}));// true
    console.log(Boolean(Infinity));// true

Number 类型

Number 类型使用 IEEE 754 格式表示整数和浮点数 所以会有 0.1 + 0.2 !== 0.3 的问题

数组字面量 ( 可以表示为十进制, 八进制 , 十六进制) 见以下代码

    console.log(55);  // 十进制就是普通的数字
    console.log(070); // 八进制以0开头
    console.log(0xA); // 十六进制以0x开头

浮点值

1. 定义浮点值必须包含小数点,且小数点后至少有一位

2. 浮点值内存的占比为整数的两倍

3. 1.0 或 1. 会被转换成整数 1

4. 浮点值的精度最高可达17位小数

5. 一个值超出了js可以表示的范围, 会被转换为infinity(无穷)

小知识点: 确定一个值是不是无限大 可以使用 isFinite() 函数

NaN 代表非数字

1. isNaN () 检测一个目标是不是NaN 返回布尔值

2. NaN 不等于任何值

3. isNaN 可以测试对象 调用对象的valueOf方法

    console.log(0 / 0); // NaN
    console.log(5 / 0); // 分母为0 分子不为0的正数 Infinity
    console.log(-5 / 0);// 分母为0 分子不为0的负数 Infinity

数值转换

Number () 可以转换任意数据类型

Number 的转型规则

    const obj = {}
    obj.valueOf = () => {
      return '1'
    }
    Number(obj); // 转对象 调用对象的 valueOf 方法拿到对应的值再按照转型规则来转  --- 1
    Number(true); // 转布尔值 true为1 false为0
    Number(1); // 转数字 直接转 去掉前面的0 --- 1
    Number(01); // 1
    Number(1.2222); // 1.2222
    Number(null); // 转null返回0
    Number(undefined); // 转undefined为NaN
    Number('01');// 转字符串 转成数字再去掉前面的0 --- 1
    Number("abc");  // 转字符串 --- NaN
    Number("");  // 转字符串 --- 0 

Number() 转字符串的转换规则特别说明一下

1. 如果字符串开头是数字 会将后面的非数字去掉 , 如果开头前有0则省略0

2. 转(字符串)浮点值也一样 将后面的非数字去掉 留下开头的数字转成数字 如果开头前有0则省略0

3. 转十六进制格式的字面量 转换为十六进制对应的数值

4. 转空字符串返回0

5. 转其余的字符串(开头不为数字的字符串)返回NaN

+ 操作符的底层原理也是调用了 Number() 函数 例如 +"" 得到 0

parseInt() 转型函数 转成整数 规则和 Number () 函数稍有不同

可以传递第二个参数 用于指定进制数

parseInt 的转型规则

1. 不能转对象 返回NaN

2. 忽略字符串数字或数字开头的0

3. 转成整数

    const obj = {}
    obj.valueOf = () => {
      return '1'
    }    
    console.log(parseInt(obj));      //  NaN
    console.log(parseInt(true));     //    NaN
    console.log(parseInt(0xA)) === console.log(parseInt(0xA),16);      //   10
    console.log(parseInt('01'));     //    1
    console.log(parseInt(01));       //  1
    console.log(parseInt(1.2222));   //      1
    console.log(parseInt(null));     //    NaN
    console.log(parseInt(undefined));//         NaN
    console.log(parseInt('1a'));     //    1
    console.log(parseInt(''));       //  NaN

parseFloat 的转型规则

1. 转十六进制的字符串返回0

2. 不能转对象 布尔值 空字符串 null undefined 会返回NaN

3. 忽略字符串数字或数字开头的0

4. 转成整数或浮点数

    console.log(parseFloat(obj));      //  NaN
    console.log(parseFloat(true));     //  NaN
    console.log(parseFloat(0xA));      //  10
    console.log(parseFloat('0xA'));      //  0
    console.log(parseFloat('01'));     //  1
    console.log(parseFloat(01));       //  1
    console.log(parseFloat(1.2222));   //  1.2222
    console.log(parseFloat(null));     //  NaN
    console.log(parseFloat(undefined));//  NaN NaN
    console.log(parseFloat('1a'));     //  1
    console.log(parseFloat(''));       //  NaN

String 类型

1. 字符字面量

\n 换行
\t 制表
\b 退格
\r 回车
\f 换页
\\ 反斜杠(\)
\' 单引号
\" 双引
\` 反引号    

2. 字符串的创建流程

1. 栈内存中分配对应字符长度的空间

2. 将值填充进去

如果对变量重新赋值为一个新的字符串是怎么执行的 ?

1. 栈内存中分配对应字符长度的空间

2. 将值填充进去

3. 销毁原来的字符串

3. 转型函数 toString () 方法

几乎所有的值都有 toString 方法 使用 toString 方法会返回对应的字符串等价物

null 和 undefined 没有 toString 方法

数值使用 toString 方法可以传一个底数参数(2,8,10,16) , 指定以什么进制进行转换输出

4. 转型函数 String() 方法

使用 String() 方法对某个值进行转型 , 如果该值有toString方法, 则按照此方法转型并返回

null 和 undefined 没有 toString 方法 , 使用 String() 函数转型得到 " null " 和 " undefined "

5. 模板字符串

模板字符串保留空格和换行及跨行 , 控制台输出时可以查看结果

模板字符串中可以使用 js 变量 通过 ${} 支持表达式和函数调用 不支持语句

在使用${}插入js变量时, 会调用该变量的 toString 方法转换成字符串

    const a = 'aaa'
    const str = `  
    123
    ${a && a.toUpperCase()}
    `
    console.log(str); // 以下是输出结果  
  
    123
    aaa

插入之前的值

在多次调用函数 使用模板字符串修改某个变量时, 会保存上一次修改的结果

    let a = 'aaa'
    const fn = () => {
      a = `${a}bbb`
      console.log(a);
    }
    fn()  //  aaabbb
    fn()  //  aaabbbbbb
    fn()  //  aaabbbbbbbbb

6. 标签函数

函数调用竟然可以通过模板字符串的形式, 不需要加(), 直接使用模板字符串即可

第一个参数是原始的字符串数组

第二个参数就是你传入的模板表达式了

    // 标签函数
    const fn = (strArr, ...rest) => {
      console.log(strArr);
      console.log(rest);
      for (const expression of rest) {
        console.log(expression);
      }
    };
    const a = 1;
    const b = 2;
    fn`${a}+${b}=${a + b}`;