JavaScript中类型的强制转换与隐式转换详解

目录
  • 一、隐式转换
    • 双等号里的转换
    • Boolean 类型转换
    • "+" 与 "-"
  • 二、强制类型转换
    • new String 与 ' '
  • 总结

一、隐式转换

以下语句的执行结果是什么?

A. undefined == null
B. isNaN("100")
C. parseInt("1a") === 1
D. [ ] instanceof Array

答案:

A. undefined == null 为 true; undefined === null 为 false

B. 当传入 NaN 或能被转换成 NaN 的值,isNaN 返回 true,"100"会被先转成 Number–>100,不为 NaN,因此返回 false

C. parseInt("1a")只会解析前面是数字的部分,即只解析"1",parseInt("1a1”) === 1 也为 true

D. [ ]是个空数组,返回 true

双等号里的转换

热身完毕再来看一段代码:

if ([]) {
  console.log(true);
}

结果输出了 true。

其实 [] 为 false,因为在等号比较时,如果有一边是 Boolean 值,会优先将左右两边的数据转为 Number,
即:

Number([]); // 0
Number(false); // 0

因此[] 为 false。

但是,但是,进行 if 判断时,会将数据转为 Boolean 类型,

即:

Boolean([]); // true

所以可以输出 true。

总结一些双等号判断时的技巧:

  1. 如果双等号前后有 NaN,一律返回 false;
  2. 如果双等号前后有布尔值(0,1 也算),一律转成数字再比较,(false 为 0,true 为 1);
  3. 如果双等号前后有字符串,分为三种情况:
    1. 另一端是对象,则对象使用 toString 或者 ValueOf 进行转换;
    2. 另一端是数字,字符串转数字;
    3. 另一端是字符串,直接比较;
    4. 其他一律返回 false。
  4. 如果一端是数字,另一端是字符串如 '3'则参考第三条。另一端是对象,取对象的 toString 或 ValueOf 结果进行比较,其他一律返回 false;
  5. null 和 undefined 不进行类型转换,但是它们俩相等;

Boolean 类型转换

var test = new Boolean();
console.log(test);

var test = new Boolean(0);
console.log(test.valueOf());

var test = new Boolean(null);
console.log(test.valueOf());

var test = new Boolean("");
console.log(test.valueOf());

var test = new Boolean(NaN);
console.log(test.valueOf());

答案为:

false false false false false

原理如下:

  1. 当作为一个构造函数(带有运算符 new)调用时,Boolean() 将把它的参数转换成一个布尔值,并且返回一个包含该值的 Boolean 对象,注意这里返回的是 Boolean 对象,可以通过 toString 或者 valueOf 取值;
  2. 如果作为一个函数(不带有运算符 new)调用时,Boolean() 只将把它的参数转换成一个原始的布尔值,并且返回这个值——强制类型转换;
  3. 如果省略 value 参数,或者设置为 0、-0、null、""、false、undefined 或 NaN,则该对象设置为 false。否则设置为 true(即使 value 参数是字符串 "false”)。

"+" 与 "-"

console.log(1 + "2" + "2");
console.log(1 + +"2" + "2");
console.log("A" - "B" + "2");
console.log("A" - "B" + 2);

输出结果如何?

结果为:122 32 NaN2 NaN

解析:

  1. 数字和字符串相加,会将数字转为字符串,所以结果是字符串拼接,第一句输出"122";
  2. +"2”,这里的一元运算符+,会将字符串转为数字,于是 1+ +"2” = 1+2 = 3,再与后面的字符串合并,所以第二句输出”32";
  3. 减号会将减号两边都先转化成数字,而 Number("A”)、Number("B”)结果是 NaN,减法操作中,只要有一方为 NaN,结果都是 NaN,因此第三句是 NaN 和"2"的拼接,结果为 NaN2(第 4.1 点中提到,双等号其中一方为 NaN,结果为 false);
  4. 根据前一句的解析,"A”-"B"结果为 NaN,与数字 2 相加,结果还是 NaN

二、强制类型转换

对于代码 var a = 10.42; 取出 a 的整数部分,以下代码哪些是正确的?

A. parseInt( a );
B. Math.floor( a );
C. Math.ceil( a );
D. a.split('.')[0];

答案:AB

很多人看一眼就会选择ABC

解析:

A. parseInt 转换为整数,默认为 10 进制,结果为 10;

B. floor 向下取整,结果为 10 —— floor 是地板的意思,向下取整,辅助记忆;

C. ceil 向上取整,结果为 11;

D. split 操作数必须是正则或字符串,结果为 TypeError。

new String 与 ' '

下面哪些执行结果为 true?

A. 'foo' == new function(){ return String('foo'); };
B. 'foo' == new function(){ return new String('foo'); };
C. [] == 0
D. ![]
E: !0

答案:

A:下面细说;

B:下面细说;
C:Number([])结果是 0,因此 C 选项正确;
D:对象总等于真,但是为什么在判断一个空对象 == true 或者 === true 得到的结果都是 false 呢?

根据我们在双等号那里的总结可知,双等号有一方为布尔值时,两边都会转换为 Number 类型,所以控制台测试空对象== true 或者 === true,实际上都是在执行 空对象==1 或者 === 1,所以才会返回 false,因此,如果你想验证对象总等于真,应该使用!{} 和 !!{}  !{}; // false;   !!{}; // true

E:由于 Boolean(0) == false,因此!0=true,正确。

说说 AB 选项,由于使用 new 关键字,调用 function 构造函数,结果变得出乎我们的意料。

首先我们要知道,当使用 new 调用一个构造函数时,如果内部返回了一个引用对象(数组,对象,函数等)都将覆盖 new 创建的匿名对象。

如果返回一个原始类型(无显式 return 时,其实是返回了一个 undefined),那么就返回了 new 创建的匿名对象。

如此看来,

A 选项中,构造函数内返回的是一个字符串,那么最终构造函数返回的是 new 创建的匿名对象,也就是一个空对象。

B 选项中,构造函数内部返回的是一个字符串对象,那么最终构造函数返回的是这个对象。

总结

到此这篇关于JavaScript中类型的强制转换与隐式转换的文章就介绍到这了,更多相关JavaScript类型强制转换与隐式转换内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 跟我学习javascript的隐式强制转换

    JavaScript的数据类型分为六种,分别为null,undefined,boolean,string,number,object. object是引用类型,其它的五种是基本类型或者是原始类型.我们可以用typeof方法打印来某个是属于哪个类型的.不同类型的变量比较要先转类型,叫做类型转换,类型转换也叫隐式转换.隐式转换通常发生在运算符加减乘除,等于,还有小于,大于等.. typeof '11' //string typeof(11) //number '11' < 4 //false 一.基

  • JavaScript强制类型转换和隐式类型转换操作示例

    本文实例讲述了JavaScript强制类型转换和隐式类型转换.分享给大家供大家参考,具体如下: 在JavaScript中声明变量不需指定类型, 对变量赋值也没有类型检查,同时JavaScript允许隐式类型转换.这些特征说明JavaScript属于弱类型的语言. (1).转换为字符串 转换为字符串是应用程序中的常见操作,javascript提供了toString方法.多数的JavaScript宿主环境(比如Node.js和Chrome)都提供了全局函数toString: 与此同时Object.p

  • Scala隐式转换和隐式参数详解

    目录 Scala隐式转换和隐式参数 隐式转换 隐式参数 隐式类 隐式转换和隐式参数的导入 总结 Scala隐式转换和隐式参数 隐式转换 隐式转换是指在Scala编译器进行类型匹配时,如果找不到合适的类型,那么隐式转换会让编译器在作用范围内自动推导出来合适的类型.隐式转换的作用是可以对类的方法进行增强,丰富现有类库的功能,或者让不同类型之间可以相互转换.隐式转换的定义是使用关键字implicit修饰的函数,函数的参数类型和返回类型决定了转换的方向. 例如,下面定义了一个隐式转换函数,可以把Int类

  • JavaScript中类型的强制转换与隐式转换详解

    目录 一.隐式转换 双等号里的转换 Boolean 类型转换 "+" 与 "-" 二.强制类型转换 new String 与 ' ' 总结 一.隐式转换 以下语句的执行结果是什么? A. undefined == null B. isNaN("100") C. parseInt("1a") === 1 D. [ ] instanceof Array 答案: A. undefined == null 为 true: undefi

  • 一文详解JS 类型转换方法以及如何避免隐式转换

    目录 前言 类型转换的概念 5 种转换方法 1. 字符串转换为数字 2. 数字转换为字符串 3. 布尔值转换为字符串或数字 4. 对象转换为原始值 5. 空值和未定义值转换为数字或字符串 隐式转换 总结 前言 当我们使用JavaScript编写代码时,类型转换是一个非常重要的概念.JavaScript是一种弱类型语言,这意味着变量可以自动转换为另一种类型,而不需要我们明确地指定.在这篇文章中,我们将探讨JavaScript类型转换的概念.转换方法,并针对隐式转换进行分析. 类型转换的概念 Jav

  • JavaScript中十种一步拷贝数组的方法实例详解

    JavaScript中我们经常会遇到拷贝数组的场景,但是都有哪些方式能够来实现呢,我们不妨来梳理一下. 1.扩展运算符(浅拷贝) 自从ES6出现以来,这已经成为最流行的方法.它是一个很简单的语法,但是当你在使用类似于React和Redux这类库时,你会发现它是非常非常有用的. numbers = [1, 2, 3]; numbersCopy = [...numbers]; 这个方法不能有效的拷贝多维数组.数组/对象值的拷贝是通过引用而不是值复制. // numbersCopy.push(4);

  • Javascript中判断一个值是否为undefined的方法详解

    前言 相信大家都知道当声明一个变量,并且没有给赋值的情况下,它的初始值是undefined.但是在javascript中,怎么检查一个值是否为undefined呢? 简单来说,在现代浏览器中,你可以安全的比较变量是否为undefined if (name === undefined) {...} 一些人反对直接使用undefined变量进行比较,因为在旧的浏览器中允许它的值被重新赋值,比如下面这样: undefined = "test" 在被重新赋值后,使用undefined指令将不能

  • JavaScript中style.left与offsetLeft的使用及区别详解

    如果父div的position定义为relative,子div的position定义为absolute,那么子div的style.left的值是相对于父div的值, 这同offsetLeft是相同的,区别在于: 1. style.left 返回的是字符串,如28px,offsetLeft返回的是数值28,如果需要对取得的值进行计算,还用offsetLeft比较方便. 2. style.left是读写的,offsetLeft是只读的,所以要改变div的位置,只能修改style.left. 3. s

  • javascript 中iframe高度自适应(同域)实例详解

    javascript 中iframe高度自适应(同域) 今天解决了iframe高度自适应的问题,不过这只是同域下的页面嵌入,以下是代码: function SetCwinHeight(){ var iframeid = document.getElementById("frame"); //frame是iframe的id if (document.getElementById) { if (iframeid && !window.opera) { if (iframei

  • JavaScript中html画布的使用与页面存储技术详解

    目录 一.JavaScript使用html中的画布 二.页面存储技术 一.JavaScript使用html中的画布 1.画布:页面中用于绘制图形的特殊区域 2.绘制图形的过程 (1)创建画布:使用html5中画布标签 <canvas id="id" width="宽度" height="高度"> </canvas> (2)JavaScript中获取画布 document.getElementById('id') (3)准备

  • JavaScript中isPrototypeOf、instanceof和hasOwnProperty函数的用法详解

    isPrototypeOf 作用:检测一个对象是否是另一个对象的原型.或者说一个对象是否被包含在另一个对象的原型链中 var p = {x:1};//定义一个原型对象 var o = Object.create(p);//使用这个原型创建一个对象 p.isPrototypeOf(o);//=>true:o继承p Object.prototype.isPrototypeOf(p);//=> true p继承自Object.prototype 以上实例来自与<JavaScript权威指南&g

  • 谈谈MySQL中的隐式转换

    工作过程中会遇到比较多关于隐式转换的案例,隐式转换除了会导致慢查询,还会导致数据不准.本文通过几个生产中遇到的案例来. 基础知识 关于比较运算的原则,MySQL官方文档的描述: https://dev.mysql.com/doc/refman/5.6/en/type-conversion.html 如果 判断符号左右两边有一个为NULL,结果就是null,除非使用安全的等值判断 <=> (none) 05:17:16 >select  null = null; +------------

随机推荐