【JavaScript】面试准备必练的关于JS值的显式类型转换/隐式类型转换

greenyiscoding
99 阅读4分钟

关于JS值的显式类型转换/隐式类型转换

显式类型转换

Number() 当( )内需转换的值不同时：

  • 值是“123”或“3.14159”这种以数字组成的字符串时，返回数字类型的123，3.14159
  • 值是“abc”或“23a”，有字符组成的字符串，或 undefined 时，返回数字类型的NaN
  • 值是true、false、null（不是字符串）的关键字时，返回1,0,0

parseInt()： 只能转换成整型，从第一位开始判断是否为数字

parseInt(value,radix)：

  • radix 是进制，可以是按不同进制转换，ES5规定如果省略就代表用十进制解析

    当( )内需转换的值不同时：

    • 值是“123”/“3.14159”这种以数字组成的字符串时，返回小数点前面的数字，不会四舍五入；
    • 值是true、false、null、undefined、NaN（不是字符串）的关键字时，返回NaN；
    • 值是数字开头的，且有字符组成的字符串如“123ab11”时，返回字符前的数字；
    • 值是以字符开头，且有数字组成的字符串如“fff88”时，返回NaN；

parseFloat() 只接受一个参数，只能使用十进制去解析

  • 会把有小数点的数字字符串转换出来
  • 若想保留几位小数，使用.toFixed()方法，( )里填需要保留几位，此方法返回的值会四舍五入

String() 转换为字符串

  • 平时更多使用 值+"" （引号）去进行字符串的转换
  • toString(value,radix) 也可以填radix 几进制的转换

Boolean()

  • undefined | null | NaN | "" | 0 转换的值都为 false
  • 其余都是true

隐式类型转换

  • 自增/自减

    var a = '123'; 
a++; // 先将a隐式转换了，Number(a)再进行自增； 
console.log(a);

  • “+” 号拼接

    var a = 'a' + 1; 
 // 先将数字1隐式转换了，Number(1)，再进行拼接； 
console.log(a); // a1

  • "*  /  -" 号 数学运算：有对象时，对象先转换为字符串再转换为数字进行计算

    var a = "3" * 2; // 先把string隐式转换为number Number(3)
console.log(a); // 6

// 在字符串前面加上正负号，也会使得字符串转换为Number
var num = "123";
console.log(typeof(+ num)) // number 负号也是如此 不过是负的
var n = "abc";
console.log(typeof(+ n)+":" + + n ); // number:NaN 负号也是如此

  • ">  <  >=  <=" 的使用

    var a = '1' > 2; // 先Number(1) -> 再与数字2作比较
console.log(a); // false
// 补充： 两个字符串的比较
var b = 'a' > 'c'; // 根据ascii码值进行比较
console.log(b); 

var a1 = 2 > 1 > 3; // 注意，这里有中间有一次转换！！
//1) 2>1 -> true 
//2) true->1 先隐式转换为数字1，Number(true)再比较
//3) 1>3 -> false
var a2 = 2 > 1 == 1; // 2>1 -> true true == 1 -> true
console.log(a1,a1); // false true

一些浏览器的运算 | 比较 | 转换规律

“ == ” 相等 and “ === ” 绝对相等的区分 🤷‍♀️

  1. == 相等的比较规律/转换规则（含隐式转换）：

    1. 对象 == 字符串：其中的对象会先转换为字符串（aka：执行了对象.toString()），再比较

      eg.  [10] == '10';// true

    2. null == undefined：结果为 true（===时不等）

      0 == null：结果为 false（与底层机制的转换不同有关）

      ❗注意：他们俩兄弟(null和undefined)，既不大于0，也不小于0，更不等于0

      且 null & undefined 和其它值都不相等 （0 是有自己的内存空间的值，而null是没有自己的内存空间的）

    3. NaN 和任何类型的值相比较都不相等（包括它自己）

    4. 剩下的两边不同时都是转换为数字进行比较【对象转数字：Number(对象.toString())】

    练习题1：

    [] == false;
// [] -> [].toString() -> '' -> Number('') -> 0
// false -> 0
// true

    练习题2：

    ![] == false;
// 涉及运算符优先级：
// 		先进行![]，再进行 == 比较

// ![] -> !true -> false
// false == false 

// 结果 true
!![] //true

!!NaN //false

  2. === 绝对相等的比较规律/转换规则：

    两边的类型、值都一致才相等，类型不同时，直接不对等，不会进行隐式转换；项目中用它更好👏

以上两个相等的区别，只要掌握了隐式转换就不难理解和区分啦~

isNaN()的判断规则

  • 先把其它类型值进行Number()的转换为数字再检测是否为非数NaN，返回true 或 false

  • 检测步骤总结：Number(值) --> 判断是否为NaN --> 返回Boolean值

  • 也就是说，我们能根据Number() 的转换规律即可自行判断其返回值：

代码输出一下来验证：

console.log(isNaN(123)); // false 本身就不是非数
console.log(isNaN("123")); // false 在Number("123")转换后 不是非数
console.log(isNaN("a")); // true Number("a")后，是NaN
console.log(isNaN(null));// false Number(null)后，是0
console.log(isNaN(undefined)); // true Number(undefined)后，是NaN

typeof 😎

  • 可能返回的值

    object(null)/boolean/number/string/undefined/function

  • 检测特点

    • 返回的结果都是字符串
    • 因为返回的都是字符串，所以两个及以上的typeof一起使用时得出的结果都是"string"!!!

  • 局限性

    （所有的值在内存中都是按照二进制存储的，当检测的数据类型为null时，对应的二进制编码是000，typeof会把所有二进制码为0的数据显示为object，所以其对null的检测结果是 object ）

    • typeof null => "object"
    • typeof 不能细分对象类型(检测普通对象或者数组对象等都是"object")

在 Chrome 浏览器中，可以通过控制台显示的字体与颜色直观判断出数据类型

avatar
文章
阅读
粉丝