使 a === 1 a === 2 a === 3 为 true 的几种“下毒“方法

news2025/1/16 15:02:24

前言

这算得上是近些年的前端网红题了,曾经对这种网红题非常抵触,认为非常没有意义。

看到了不少人有做分享,有各种各样的方案,有涉及到 JS 非常基础的知识点,也不得不感叹解题者的脑洞之大。

但是,拿来做面试题为难没有看过的面试者,就非常非常不地道了。

鹤顶红

鹤顶红是武侠剧中出现最多的毒药,真的是江湖出行必备的毒药。

正常情况下,如果 let a = 1; 则,表达式的后半段必不成立。但是容易想到如果在每个阶段自增后,表达式是可能成立的。

let a = 1;  
a++ === 1 && a++ === 2 && a++ === 3; // true  

可是这就属于把题改了,我们需要把自增的逻辑藏起来。由于 a 是基础类型,我们基本上不可能对其做什么改造了。

但是我们如果把 a 定义到 window 上,再加上诸如 Object.defineProperty 的 api,是能够做到的。

let tmp = 1;  
Object.defineProperty(window, 'a', {  
    get: function () {  
        return tmp++;  
    },  
})  
a === 1 && a === 2 && a === 3; // true  

由于 defineProperty 的限制,我们不能把 1 作为 value, 设置在属性描述符号内部,不得不外部定义一个变量。

defineProperty 在诸如 Vue2 的框架中,用的非常多,几乎是面试高频会被问到的,所以这种“毒药”是你行走前端江湖必备的。

曼陀罗

曼陀罗这个名字颇具异域风情、《神雕侠侣》中杨过就是中了此毒。

说到这里我是要将此题改为另一道类似的题目:使 a == 1 && a == 2 && a == 3 返回 true

将严格相等改为了普通的相等,因为通常代码规范中要求使用严格相等,导致 == 不常写,故将此命名为这个异域的名字。

正因为是不严格相等,我们可以利用 JS 中的类型转换机制来下毒。

这个机制是这样的:

  • 如果两个值类型相同,则之间进行比较,和全等是一样的。
  • 如果一个是 null,另一个是 undefined,则相等。
  • 如果一个是数值,另一个是字符串,把字符串转换为数值,再比较转换后的数值。
  • 如果一个是 true,把它转成 1,再比较。
  • 如果一个是 false,把它转成 0,再比较。
  • 如果一个是对象,另一个是数值或字符串,会将对象转换为原始值,再比较。用到的是 valueOf() 和 toString() 方法。

我们可以利用最后一点解这个题:

const a = {  
    value: 1,  
    valueOf: function () {  
        return this.value++;  
    },  
}  
a == 1 && a == 2 && a == 3;  

先前提到的那种解法必然也可以解这道题,但是这个写法不能用于上一道题,因为全等不会触发类型转换。

十香软筋散

此毒无色无香,药性一发作便全身筋骨酸软,数日后虽行动如常,内力半点发挥不出。毒药和解药表面无异,若中毒者再服毒药则气绝身亡。

const a‌ = 1;  
const a‍ = 2;  
const a = 3;  
a‌ === 1 && a‍ === 2 && a === 3  

你可能会说:“这段代码应该是会报错的!”。但是相信我,你复制到控制台执行一下试试。注意我这里有一个 a 是正常的 a,如果你有执行过上面别的方法,注意先刷新一下窗口。

是的 const 声明的是常量,理应抛出错误:Identifier 'haha' has already been declared

实际上,我这里定义的三个 a 是不同的变量,有一个是 a, 一个是 ax, 一个是 ay,其中 x, y 是被我替换为 unicode 里不可见的字符,所以在上面的代码里看到的都是 a 的形式。

我目前正在使用 webstorm 编辑这篇文章,我也发现了这些不可见字符会在编辑器里显示出来“怪怪的”,如果你也打开这篇 markdown,你会发现:

构造变量名称(唯一标识符)的通用规则是:

  • 名称可包含字母、数字、下划线和美元符号
  • 名称必须以字母开头
  • 名称也可以 $ 和 _ 开头
  • 名称对大小写敏感(y 和 Y 是不同的变量)
  • 保留字(比如 JavaScript 的关键词)无法用作变量名称

实际上,使用中文,甚至是 emoji 表情作为变量名称都是合法的,所以这里可以使用不可见的 unicode 字符作为变量名。

当然,如果想要运行正确,我们得偷偷的把题改了,使用我们新声明的变量,虽然它们看起来一摸一样。

这种“下毒”,真是无色无味,正像软筋散一样。

总结

这边汇总了二个针对原题的解法:通过使用 Object.defineProperty 和利用变量名称的规则的方法;

以及对它的变种题目:通过对象类型转化时默认调用 valueOf 函数的机制。

这道题至少也算给我们带来了三个 JS 基础知识点,好了,你(这道题)可以毒发身亡了。

前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1400891.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

30、WEB攻防——通用漏洞SQL注入CTF二次堆叠DNS带外

文章目录 堆叠注入二次注入DNS注入 堆叠注入 堆叠注入:根据数据库类型决定是否支持多条语句执行,用分号隔开。堆叠注入在代码中被执行是一方面,是否被执行成功又是另一方面。支持数据库类型:Mysql、Mssql等。 在mysql中&#xf…

react 页签(自行封装)

思路:封装一个页签组件,包裹页面组件,页面渲染之后把数据缓存到全局状态实现页面缓存。 浏览本博客之前先看一下我的博客实现的功能是否满足需求,实现功能: - 页面缓存 - 关闭当前页 - 鼠标右键>关闭当前 - 鼠标右…

【rust/bevy】使用points构造ConvexMesh

目录 说在前面问题提出Rapier具体实现参考 说在前面 操作系统:win11rust版本:rustc 1.77.0-nightlybevy版本:0.12github:这里 问题提出 在three.js中,可以通过使用ConvexGeometry从给定的三维点集合生成凸包(Convex Hu…

【软考中级-软件设计师】day9:进程资源图、信号量PV操作、死锁和银行家算法

大纲 概述 进程的组成和状态 前趋图 进程资源图 真题 同步与互斥 信号量 生产者和消费者 真题 死锁 线程

【C++第二课 - 类和对象上 - 入门知识】struct类、class类、访问限定符、this指针

目录 面向过程与面向对象初步认识类的定义struct定义类class定义类 类的访问限定符及封装访问限定符 声明与定义分离this指针类成员的命名问题this 类的实例化类的对象大小的计算成员函数为何不在对象里面类对象大小计算 面向过程与面向对象初步认识 C语言是面向过程的&#x…

基于Elasticsearch+Logstash+Kibana+Filebeat的日志收集分析及可视化

sudo rm /var/lib/dpkg/lock* sudo dpkg --configure -a apt update tail -f /var/log/car.log 1.1、项目概述 海量的业务应用,也带来了海量的日志数据,给业务应用的运维带来了新的挑战。例如,我们常用的网约车应用,单个平台…

六、数组(1)二维数组

一、二维数组定义方式 1、数据类型 数组名[行数][列数]; 2、数据类型 数组名[行数][列数]{{数据1,数据2},{数据3,数据4}}; 3、数据类型 数组名[行数][列数]{数据1,数据2,数据3,数据4}; 4、数据类型 数组名[][列数]{数据1,数据2,数据3,数据4}; 注:第二种定义方式更…

S32K3系列 --- 硬件I2C Mcal配置

前言 网上看到很多I2C的教程,基本都是模拟I2C,现在S32K3的芯片支持硬件I2C,我想着就配一个硬件的出来吧,这边记录一下,供大家学习。 一、I2C原理 这里主要教大家如何去配置,去使用。 原理的话可以参考这篇文章: 一文搞懂I2C通信总线_i2c通信的详细讲解-CSDN博客 I2…

生信人 RNA-seq

RNA-seq:6-qc-2 #先跑一个综合的 Multiqc 报告 #将fastqc生成的多个报告整合成一个报告,方便查看所有测序数据的质量。 conda install multiqc -c https://mirrors.tuna.tsinghua.edu.cn/anaconda/cloud/bioconda cd /home/yinwen/RNA-seq_report/ mult…

【算法与数据结构】474、LeetCode一和零

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引,可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析:本题要找strs数组的最大子集,这个子集最多含有 m m m个0和 n n n个1。本题也可以抽象成一个…

【LeetCode每日一题】2809. 使数组和小于等于 x 的最少时间

2024-1-19 文章目录 [2809. 使数组和小于等于 x 的最少时间](https://leetcode.cn/problems/minimum-time-to-make-array-sum-at-most-x/)思路: 2809. 使数组和小于等于 x 的最少时间 思路: 获取两个列表的长度n,并初始化一个二维数组f&…

Spring Boot整合Redis的高效数据缓存实践

引言 在现代Web应用开发中,数据缓存是提高系统性能和响应速度的关键。Redis作为一种高性能的缓存和数据存储解决方案,被广泛应用于各种场景。本文将研究如何使用Spring Boot整合Redis,通过这个强大的缓存工具提高应用的性能和可伸缩性。 整合…

从零开始c++精讲:第四篇——模板初阶

文章目录 一、泛型编程二、函数模板2.1函数模板概念2.2函数模板格式2.3函数模板原理2.4函数模板实例化2.5函数模板匹配原则 三、类模板3.1类模板的定义格式3.2类模板的实例化 一、泛型编程 如何实现一个通用的交换函数呢? void Swap(int& left, int& righ…

TCP/IP协议及配置、IP地址、子网掩码、网关地址、DNS与DHCP介绍

一、什么是服务器 能够为其他计算机提供服务的更高级的电脑 尺寸:Unit 1u1.75英寸44.45mm4.445cm IDC(机房) C/S结构 Client/Server客户端和服务端 二、TCP/IP协议 计算机与计算机之间通信的协议 三要素: IP地址 子网掩码 IP路由 I…

C++设计模式之 模板方法模式

【声明】本题目来源于卡码网(题目页面 (kamacoder.com)) 【提示:如果不想看文字介绍,可以直接跳转到C编码部分】 【设计模式大纲】 【简介】 --什么是模板方法模式(第18种设计模式) 模板方法模式&#xff0…

大数据安全 | 期末复习(上)| 补档

文章目录 📚概述⭐️🐇大数据的定义、来源、特点🐇大数据安全的含义🐇大数据安全威胁🐇保障大数据安全🐇采集、存储、挖掘环节的安全技术🐇大数据用于安全🐇隐私的定义、属性、分类、…

Transformer 可解释性论文整理(超级详细)

Transformer 可解释性论文整理 前段时间想进一步的了解transformer的工作原理,于是找到了几篇可解释性的文章进行阅读,发现了许多比较有趣的现象和结论,对每篇文章都有自己的深度思考和理解,在此记录,欢迎交流。 1. …

「优选算法刷题」:二分查找

一、题目 给定一个 n 个元素有序的(升序)整型数组 nums 和一个目标值 target ,写一个函数搜索 nums 中的 target,如果目标值存在返回下标,否则返回 -1。 示例 1: 输入: nums [-1,0,3,5,9,12], target 9 输出: 4 …

【JavaEE进阶】实现验证码

文章目录 🌲实现说明🍃Kaptcha插件介绍🚩插件原理🚩引入依赖🚩⽣成验证码🚩Kaptcha详细配置 🍀准备⼯作🌴约定前后端交互接⼝🚩需求分析🚩接⼝定义&#x1f6…

力扣 第 122 场双周赛 解题报告 | 珂学家 | 脑筋急转弯 + 滑窗反悔堆

前言 整体评价 倒开差点崩盘,T4这个反悔堆写吐了,T3往众数上去猜了,幸好case良心。 T1. 将数组分成最小总代价的子数组 I 思路: 取 nums[1:] 的最小2个值 可以部分排序,这样更快捷 class Solution {public int minimumCost(in…