前言

最近和大创扯淡时说到了[] == false,从结果上来看我俩都答错了,从气势上来说我俩的歪理都能出书了(恩,程序猿的骄傲),但是这其实背后隐藏了一潭很深的水,对,很深。。。

隐式类型转换

JS的数据类型

首先,回想一下JS的类型都有什么。

原始值(primitives): undefined, null, booleans, numbers,strings, symbol(es6)

对象值(objects): Object

ok, 这就是全部了,我们接下来看看到底发生了什么导致隐式转换如此不可捉摸。

ToPrimitive

在发生转换的时候,js其实都是会将操作对象转化为原始的对象,这也是最为诟病的地方,因为js很难直接抛出错误,她会用一套自己的方法去理解我们的错误,并做相应的调整,哪怕这些错误我们是无意识的。所以我们要知道她的转换方式,才能做到知己知彼,对代码的控制更为精准。

签名:ToPrimitive(input, PreferredType?) //PreferredType: Number 或者 String

流程如下:

  1. input为原始值,直接返回;
  2. 不是原始值,调用该对象的valueOf()方法,如果结果是原始值,返回原始值;
  3. 调用valueOf()不是原始值,调用此对象的toString()方法,如果结果为原始值,返回原始值;
  4. 如果返回的不是原始值,抛出异常TypeError。

其中PreferredType控制线调取valueOf()还是toString()。

ps: Date类型按照String去调用。

ok,通过这个隐式装箱,我们得到了操作数的原始值。接下来,我们根据不同情况,看看发生了什么呢~

数学运算

想必大家用过以下做法去完成类型转换吧

var str = '1';
var num = str - 0; var num = 2;
var str = num + '';

这种类似的数学运算会做类型转换,*/-操作符都是数字运算专用的。当这些运算符与字符串一起使用时,会强制转换字符串为数字类型的值。但是‘+’尤为致命,为啥捏?

当'+'作为双目运算符时,如a+b。

它的运行如下:

  1. 计算两个操作数的原始值: prima = ToPrimitive(a), prima = ToPrimitive(b);
  2. 如果原始值有String,全部转换为String,返回String相加后的结果;
  3. 如果原始值没有String,全部转换为Number, 返回Number相加后的结果;

当'+'作为单目运算符时, 例如 +a.

流程是这样的:

  1. 将a转换为Number,Number(a);

举个栗子:

[] + []

1. 转换为原始类型 toPrimitive([]);

[].valueOf();//[],不是原始类型

[].toString();//"",真是令人发指的转换

2. 都为string,所以返回字符串想家的结果

return "" + "";

{} + [] 与 [] + {}

{} + []
1. 在浏览器中,JS引擎认为第一个{}为空代码块,所以 这里的 '+'是单目运算符(node中认为是对象,解析为"[object Object]") ToPrimitive([]); //"" 2. Number("");// [] + {}
1. ToPrimitive([]); //""
ToPrimitive({}); //"[object Object]" 2. 都为string
return "" + "[object Object]";//"[object Object]"

PS: [].valueOf 为[], 但在ES6中JS会优先调用[Symbol ToPrimitive]来转换为原始类型。

比较运算

首先,比较运算分为2种, 一种为严格比较(===),只有类型相等,值也一致时才会为true,否则为false, 另一种为抽象相等也叫宽松相等(==),先将运算数转化为相同类型,再做比较,具体过程见 Abstract Equality Comparison Algorithm

这个算法大致说了这么几个情况,x == y

  • xy都为Null或undefined,return true;
  • x或y为NaN, return false;
  • 如果x和y为String,Number,Boolean并且类型不一致,都转为Number再进行比较
  • 如果存在Object,转换为原始值,比较

回到这篇文章的导火索,[] == false

1.存在object, 转化为原始值
ToPrimitive([]); // '' 2.一个string, 另外为boolean,都转为number
Number('');//
Number(false);// 3.return 0 == 0;/true

备注

ToPrimitive

 value toNumber  toString  toBoolean 
 NaN  NaN  "NaN"  false
 Infinity  Infinity  "Infinity"  true
 []  0  '""  true
 [1]  1  "1"  true
null 0 "null" false
undefined NaN "undefined" false
{} NaN "[object Object]" true
function() NaN "function" true

ToNumber

ToString

2017/12/05

winking说了一个简便的方法去理解[] toPrimitive = ‘’ , 想成join()就好了 (*^▽^*)

JS的隐式转换 从 [] ==false 说起的更多相关文章

  1. js数据类型隐式转换问题

    js数据类型隐式转换 ![] == false //true 空数组和基本类型转换,会先[].toString() 再继续比较 ![] == [] //true ![] //false [] == [ ...

  2. js 的隐式转换与显式转换

    隐式转换   1.undefined与null相等,但不恒等(===) 2.一个是number一个是string时,会尝试将string转换为number 3.隐式转换将boolean转换为numbe ...

  3. JS的类型转换,强制转换和隐式转换

    JS的类型转换 1.强制转换 通过String(),Number(),Boolean()函数强制转换 var str=123; var str1='123'; console.log(typeof s ...

  4. js学习日记-隐式转换相关的坑及知识

    隐式转换比较是js中绕不过去的坎,就算有几年经验的工程师也很有可能对这块知识不够熟悉.就算你知道使用===比较从而避免踩坑,但是团队其它成员不一定知道有这样或那样的坑,有后端语言经验的人常常会形成一个 ...

  5. js中的一些隐式转换和总结

    js中的不同的数据类型之间的比较转换规则如下: 1. 对象和布尔值比较 对象和布尔值进行比较时,对象先转换为字符串,然后再转换为数字,布尔值直接转换为数字 [] == true; //false [] ...

  6. Js 中那些 隐式转换

    曾经看到过这样一个代码:  (!(~+[])+{})[--[~+""][+[]]*[~+[]]+~~!+[]]+({}+[])[[~!+[]*~+[]]] = sb , 你敢相信, ...

  7. js中的数据类型隐式转换的三种情况

    js的数据类型隐式转换主要分为三种情况: 1. 转换为boolean类型 2. 转换为number类型 3. 转换为string类型 转换为boolean类型 数据在 逻辑判断 和 逻辑运算 之中会隐 ...

  8. ECMAScript1.1 js书写位置 | 声明变量 | 基本数据类型 | 数据类型转换 | 操作符 | 布尔类型的隐式转换

    js书写位置 由于在写css样式时使用的时双引号,所以我们在写js代码时建议使用单引号(‘’)! 行内式 <input type="button" value="点 ...

  9. js隐式转换

    JavaScript的数据类型分为六种,分别为null,undefined,boolean,string,number,object.object是引用类型,其它的五种是基本类型或者是原始类型.我们可 ...

随机推荐

  1. hbase-1.2.5完全分布式部署

    详细配置参考http://abloz.com/hbase/book.html#distributed ,2.2.2.2小节 1.修改hbase-site.xml文件.添加如下配置 cluster为ha ...

  2. Python 抽象篇:面向对象之类的方法与属性

    概览:类成员之字段:-普通字段,保存在对象中,执行职能通过对象访问-静态字段,保存在类中,执行可以通过对象访问,也可以通过类访问类成员之方法:-普通方法,保存在类中,由对象来调用,self->对 ...

  3. 套接字(linux相关)

    前言:略 一.前因 一切从tcp.udp开始. 众所周知,网络模型一般有两种模型,一种为OSI概念模型(七层),另一种为tcp/ip网络模型(四层). tcp/ip应用层对应OSI的应用层.显示层.会 ...

  4. Windows Nodejs 安装教程

    Windows Nodejs 安装教程 1: 访问官方地址 https://nodejs.org/en/download/ 2: 解压压缩包文件到指定目录 我直接把压缩包解压到C盘根目录下,并将文件夹 ...

  5. 使用Identity Server 4建立Authorization Server (3)

    预备知识: http://www.cnblogs.com/cgzl/p/7746496.html 第一部分: http://www.cnblogs.com/cgzl/p/7780559.html 第二 ...

  6. java线程池ThreadPool

    package com.java.concurrent; import java.util.concurrent.ExecutorService; import java.util.concurren ...

  7. Oracle - java创建Oracle 的触发器

    Oracle - java创建Oracle 的触发器 今天碰到这个问题,遇到点问题,到这来 总结一下解决的办法, 需求,为一个用户当中的表增加一个自动增长列,我还没有学Oracle 的这部分,只是简单 ...

  8. 微软Connect(); 2017大会梳理:Azure、数据、AI开发工具

    在今天召开的 Connect(); 2017 开发者大会上,微软宣布了 Azure.数据.AI 开发工具的内容.这是第一天的 Connect(); 2017 的主题演讲. 在开场视频中霍金又来了.你记 ...

  9. C#抓取和分析网页的类

    抓取和分析网页的类. 主要功能有: Ontology 1.提取网页的纯文本,去所有html标签和javascript代码 2.提取网页的链接,包括href和frame及iframe 3.提取网页的ti ...

  10. Angular 5和ASP.NET Core入门

    我希望你们都知道Angular 5已经发布了.在本文中,我们将看到如何使用Angular5TemplateCore开始使用Angular 5和ASP.NET Core. 使用Angular5Templ ...