博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
关于js类型转换骚操作
阅读量:6720 次
发布时间:2019-06-25

本文共 3596 字,大约阅读时间需要 11 分钟。

原文来源于我的

0.前言

js身为一种弱类型的语言,不用像c语言那样要定义int、float、double、string等等数据类型,因为允许变量类型的隐式转换和允许强制类型转换。我们在定义一个变量的时候,就一个var、let、const搞定,不用担心数据的类型。比如常见的字符串拼接,用+号可以实现变量和字符串的拼接。

总的来说,一般的规则是

  • !后面的字符会被转为换布尔
  • +后面的字符会被转换为数值(-也是差不多)
  • []+后面的字符会被转换为字符串

对于object和number、string、boolean之间的转换关系,这里偷网上一幅图

1

  • Object 与Primitive,需要Object转为Primitive
  • String 与 Boolean,需要两个操作数同时转为Number。
  • String/Boolean 与 Number,需要String/Boolean转为Number。
  • undefined 与 null ,和所有其他值比较的结果都是false,他们之间==成立

ToPrimitive是指转换为js内部的原始值,如果是非原始值则转为原始值,调用valueOf()和obj.toString()来实现。valueOf返回对象的值:在控制台,当你定义一个对象按回车,控制台打印的是Object{...},obj.toString()返回对象转字符串的形式,打印的是"[object Object]"

  • 如果参数是Date对象的实例,那么先toString()如果是原始值则返回,否则再valueOf(),如果是原始值则返回,否则报错。
  • 如果参数不是Date对象的实例,同理,不过先valueOf再obj.toString()。

1.奇葩例子

![] //false;  +[]  // 0 +![]  // 0[]+[] // ""{}+{}//"[object Object][object Object]"{}+[]//0{a:0}+1 // 1[]+{}//"[object Object]"[]+![]//"false"{}+[]//0![]+[] // "false"''+{} //"[object Object]"{}+'' //0[]["map"]+[] //"function map() { }"[]["a"]+[] // "undefined"[][[]] + []// "undefined"+!![]+[] //"1"+!![] //11-{} //NaN1-[] //1true-1 //0{}-1 //-1[]==![] //true

2.从[]==![]开始

大家也可能听说过[]!=[],主要是因为他们是引用类型,内存地址不同所以不相等。那么为什么加了一个!就能等于了?不是内存地址还是不一样吗?

这又引出一个问题,符号的优先度

1 . [] ()
2 ++ — ~ !
3 * / %
4 + - +
5 << >>
4 + - +
5 < <= > >=
4 + - +
6 == != === !==

可以看见,!优先度是第二,所以先判断!再判断=

给[]取反,会是布尔值,[]的取反的布尔值就是false

2.1 []的反就是false?

ECMA规范:

非布尔类型转布尔类型:undefined、null 、0、±0、NaN、0长度的字符串=》false,对象=》true

非数字类型转数字类型:undefined=》NaN,null=》0,true=》1,false=》0,字符串:字符串数字直接转数字类型、字符串非数字=》NaN

[]也是对象类型(typeof [] == "object"),转为布尔类型的![]就是false

2.2 等号两边对比

我们知道,在比较类型的时候,先会进行各种各样的类型转换。

从开头的表格可以看见,他们比较的时候都是先转换为数字类型。右边是布尔值false,左边为一个空数组对象,对于左边,先进行P操作(ToPrimitive([])),先执行valueOf([])返回的是[],非原始类型,再
[].toString(),返回的是"",那P操作之后,结果就是""了
最后,左边""和右边false对比,他们再转换为数字,就是0==0的问题了

3.从已有的得到想不到的

3.1 间接获取数组方法

我们知道,数组有自己的一套方法,比如var arr = [1,2];arr.push(1),我们可以写成[1,2].push(1),还可以写成[1,2]['push'](1),那么前面抛出的问题就解决了

[]['push'](1) //[1][]["map"] //function map() { [native code] }[]["map"]+[] // "function map() { [native code] }"

3.2 间接进行下标操作

3.2.1数字的获取

我们可以通过类型转换,获得0和1两个数字,既然能得到这两个数字,那么也可以得到其他的一切数字了:

+[] === 0; +!![] === 1
那么, +!![]+!![] ===2,+((+![])+(+!![])+[]+(+![]))===10(注意:中间没[]的话,就是数字的1+0,结果就是1了,有的话就是'1'+''+'0')
+((+![])+(+!![])+[]+(+![]))-!![] ===9
简直就是无所不能

3.2.2 字符串下标

(![]+[])[+[]] //"f"(![]+[])[+!![]] // "a"

(![]+[])是"false",其实(![]+[])[+[]] 就相当于"false"[0],第一个字母,就是f

我们就可以从上面的那些获得单词的字符串获得其中的字母了
好了,说道这里,要是谁说前端简单,那就给他一个(![]+[])[+!![]+!![]+!![]] +([]+{})[+!![]+!![]]

4.关于(a==1 && a==2 && a==3)

4.1 ==

近来有人问这个问题(a==1 && a==2 && a==3) 或者(a===1 && a===2 && a===3) 能不能为true?

事实上是可以的,就是因为在==比较的情况下,会进行类型的隐式转换。前面已经说过,如果参数不是Date对象的实例,就会进行类型转换,先valueOf再obj.toString()
所以,我们只要改变原生的valueOf或者tostring方法就可以达到效果:

var a = {  num: 0,  valueOf: function() {    return this.num += 1  }};var eq = (a==1 && a==2 && a==3);console.log(eq);//或者改写他的tostring方法 var num = 0;Function.prototype.toString = function(){    return ++num;}function a(){}//还可以改写ES6的symbol类型的toP的方法var  a = {[Symbol.toPrimitive]: (function (i) { return function(){return  ++i } }) (0)};

每一次进行等号的比较,就会调用一次valueOf方法,自增1,所以能成立。当然,如果换个位置就不行了,var eq = (a==2 && a==1 && a==3);

另外,减法也是同理:

var a = {  num: 4,  valueOf: function() {    return this.num -= 1  }};var eq = (a==3 && a==2 && a==1);console.log(eq);

4.2 ===

如果没有类型转换,===的情况,还是可以的。跑题...

在vue源码实现双向数据绑定中,就利用了defineProperty方法进行观察,观察到视图层的变化并实时反映到model层。
每一次访问对象中的某一个属性的时候,就会调用这个方法定义的对象里面的get方法。每一次改变对象属性的值,就会访问set方法
在这里,我们自己定义自己的get方法:

var b = 1Object.defineProperty(window, 'a', {  get:function() { return b++; }})var s = (a===1 && a===2 && a === 3 )console.log(s)

每一次访问a属性,a的属性值就会+1,当然还是交换位置就不能为TRUE了

转载地址:http://rdjmo.baihongyu.com/

你可能感兴趣的文章
php正则表达式-元字符
查看>>
第十四的周学习进度条
查看>>
Linux之特殊的环境变量IFS以及如何删除带有空格的目录
查看>>
(转)获取手机的IMEI号
查看>>
以太坊linux挖矿应用
查看>>
c#dev tabcontrol 切换页面时注意的问题
查看>>
2015.1.4 判断鼠标点击DataGridView的第几行还是空白处
查看>>
Android4.1.2系统编译全过程
查看>>
python3登录极路由并读取宽带帐号帐号密码.py
查看>>
iPhone使用第三方字体
查看>>
端口号的分类
查看>>
EL表达式
查看>>
配置PL/SQL DEVELOPER远程访问oracle数据库
查看>>
Centos linux php扩展安装步骤
查看>>
C#后台调用oracle存储过程,参数传入的是clob字段,怎样处理
查看>>
Vue.js报错Failed to resolve filter问题原因
查看>>
IDEA的maven项目中静态文件编译的路径问题(未测试)
查看>>
【软件工程】 第1次个人作业
查看>>
ActiveMQ学习总结(9)——Linux中安装ActiveMQ
查看>>
Json学习总结(2)——Java 下的 JSON库性能比较:JSON.simple vs. GSON vs. Jackson vs. JSONP...
查看>>