资讯专栏INFORMATION COLUMN

JavaScript 实现a 可以同时 == 1 && == 2 &&

khs1994 / 1912人阅读

摘要:先测试得到以下结果可看到正则进行全局搜索判断返回一个数据数组的首元素为成功匹配的文本因此每次进行时都会返回数组的首元素也就是匹配的文本由此实现这个功能参考自微信公众号鱼头的海洋

参考自 微信公众号 鱼头的Web海洋

关于这道题目:

var a = ?;
if (a == 1 && b == 2 && c == 3) {
    console.log("yes");
}

学习了网上的几种解法,如下:

首先,JS中类型转化只有三种情况:

转换为布尔值

转换为数字

转换为字符串

对象在转换类型的时候,会执行原生方法ToPrimitive
其算法如下:
1.如果已经是原始类型,则返回当前值;
2.如果需要转字符串则先调用toString方法,如果此时是原始类型则直接返回,否则再调用valueOf方法并返回结果;
3.如果不是字符串,则先调用valueOf方法,如果此时是原始类型则直接返回,否则再调用toString方法并返回结果;
4.如果都没有原始类型返回,则跑出TypeError类型错误.

解法如下:
1.

var a = {
  arr: [3, 2, 1],
  valueOf () {
    console.group("valueOf");
    console.log(this.arr);
    console.groupEnd("valueOf");
    return this.arr.pop();
  }
}
if (a == 1 && a == 2 && a == 3) {
  console.log("yes");
}

执行结果:

解析:

1.运行时会先判断 a 的类型,此时typeof a === "object",不是原始类型,也不是字符串,因此会先执行a.valueOf()
2.由于valueOf()被覆盖了,因此执行覆盖后的valueOf(),每一次都会返回a.arr的尾元素,并更新a.arr
3.得出三次执行结果为 1, 2, 3, 实现了这个功能

2.

var b = {
  arr: [3, 2, 1],
  toString () {
    console.group("toString");
    console.log(this.arr);
    console.groupEnd("toString");
    return this.arr.pop();
  }
}
if (b == 1 && b == 2 && b == 3) {
  console.log("yes");
}

执行结果:

解析:

1.运行时会先判断 b 的类型,此时typeof a === "object",不是原始类型,也不是字符串,因此会先执行b.valueOf()
2.b.valueOf()得到的结果是 {arr: Array(3), toString: ƒ}, 不是原始类型. 不是字符串, 因此执行b.toString()
3.由于toString()被覆盖了,因此执行覆盖后的toString(),每一次都会返回b.arr的尾元素,并更新b.arr
3.得出三次执行结果为 1, 2, 3, 实现了这个功能

3.

var c = {
  arr: [3, 2, 1],
  [Symbol.toPrimitive] () {
    console.group("Symbol.toPrimitive");
    console.log(this.arr);
    console.group("Symbol.toPrimitive");
    return this.arr.pop();
  }
}
if (c == 1 && c == 2 && c == 3) {
  console.log("yes");
}

执行结果:

解析:
先把上面的方法合并,测试优先级:

var d = {
  arr: [3, 2, 1],
  valueOf () {
    console.group("valueOf");
    console.log(this.arr);
    console.groupEnd("valueOf");
    return this.arr.pop();
  },
  toString () {
    console.group("toString");
    console.log(this.arr);
    console.groupEnd("toString");
    return this.arr.pop();
  },
  [Symbol.toPrimitive] () {
    console.group("Symbol.toPrimitive");
    console.log(this.arr);
    console.group("Symbol.toPrimitive");
    return this.arr.pop();
  }
}
if (d == 1 && d == 2 && d == 3) {
  console.log("yes");
}

执行结果:


可以看出会先执行toPrimitive这个原生方法,但是被覆盖了,所以执行覆盖后的toPrimitive()

4.

var f = {
    reg: /d/g,
    valueOf() { return this.reg.exec(123)[0] }
}
if (f == 1 && f == 2 && f == 3) {
  console.log("yes");
}

执行结果:


解析:

1.exec() 方法在一个指定字符串中执行一个搜索匹配。返回一个结果数组或 null。
2.如果匹配成功,exec() 方法返回一个数组,并更新正则表达式对象的属性。返回的数组将完全匹配成功的文本作为第一项,将正则括号里匹配成功的作为数组填充到后面。如果匹配失败,exec() 方法返回 null。
3.先测试 var reg=/d/g; reg.exec(123);得到以下结果:


可看到正则进行全局搜索,判断返回一个数据,数组的首元素为成功匹配的文本
4.因此每次进行 f == 1, f == 2, f == 3 时都会返回数组的首元素,也就是匹配的文本.由此实现这个功能

参考自 微信公众号 鱼头的Web海洋

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105774.html

相关文章

  • JavaScript中让x==1&&x==2&&x==3等式成立演示

      要是别人问您:如何让 x 等于 1 且让 x 等于 2 且让 x 等于 3 的等式成立?  咋地,知道如何实现?想骂人有不  现在我们一起来分解思路:  我们先来讲讲宽松相等== 和严格相等 ===,这两个都能用来判断两个值是否相等,但们明确上文提到的等于指的是哪一种,二者的区别看下:  (1) 这两个基础直接的区别:  (1.1) 不同类型间比较,== 比较转化成同一类型后的值看值是否相等,...

    3403771864 评论0 收藏0
  • js实现音乐播放器

      这篇文章为大家讲如何用JSd代码实现音乐播放。  音乐播放的主要js代码  音乐数据的数组对象  这里不仅有前端网页提供数据,还有为后面的js代码提供了音乐路径,分享给大家。  {   ablum:"海阔天空",   artist:"Beyond",   id:1,   name:"大地",   path:"musics/1...

    3403771864 评论0 收藏0
  • JavaScript数组的9个方法示例

      今天主要就是汇总JavaScript数组的9中不同方法汇总,也将详细示例展示给大家。  如果你还不知道数组实例中迭代方法有什么区别,可以看下面这张图:  map  代表返回一个新的数组,且数组中的每一项都是执行过map提供的回调函数结果。  实现代码如下:  constmap=(array,fun)=>{   //类型约束   if(Object.prototype.toString.c...

    3403771864 评论0 收藏0
  • JavaScript树结构深度优先算法

      什么是树  现实中树随处可见;在计算机世界,树就是一种分层结构的抽象模型。  如下图所示:  树结构的可以用在很多情景,就如下图公司的组织架构,用树就可以表达出来,如下图:  组织架构只是其中之一,比如族谱、省市等用树的结构形式展现是完全可以。  树的术语  树有很多的术语,如下图:  树:n(n≥0)个节点所构成的有限集合,当n=0时,称为空树;  节点的度:节点的子树个数,例如B节点的度就...

    3403771864 评论0 收藏0
  • 通过JavaScript实现扑克牌游戏的示例代码

      我们说下想要实现,一副牌里有54张,我们可以知道 3 - 2 的牌总共有13张,这分为4个花色是 ♠️ ♥️ ♣️ ♦️ 另外加上2个大小王!第一步:形成一个数组, 就要写一个函数,利用牌数量和花色,这样可以用来形成一个双重循环将 number 里面的内容 和 flower 里面的内容 进行一个循环嵌入?最后在用 push 生成一个对象放到数组的后面?再到最后放入 大小王 。  constnu...

    3403771864 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<