js date转成 时间字符串_秋招快要开始了,前端笔试中的坑位-JS隐式转换问题

2f0543767e95be1ac0270c45e4cd57c5.png

我们在写笔试题的时候,经常碰到涉及隐式转换的题目,例如

"1" + 2
obj + 1
[] == ![] 
[null] == false

=== 和 ==

=== 叫做严格运算符,对象类型指向地址相同或原始类型( 数值、字符串、布尔值)值相同;==叫做相等运算符,类型不同会进行转化再比较,undefined、null相等,对象类型还是比较引用。==运算符将原始值和其包装对象视为相等,但===运算符将它们视为不等。 所有obj.a==null(相当于obj.a=== null || obj.a ===undefined)。

相等运算符就是常常引起JS隐式转换的坑货,它也常常出现在我们的面试题中,不过我们在现实开发中,为了避免不必要的问题要求使用严格运算符,但是了解还是很有必要的。

想要了解JS隐式转换,就要先从三个知识点下手。

原始类型

原始类型(基本类型、基本数据类型、原始数据类型)是一种既非对象也无方法的数据。在 JavaScript 中,共有7种:string,number,bigint,boolean,null,undefined,symbol (ECMAScript 2016新增)

falsy 值 (虚值)

falsy 值 (虚值) 是在 Boolean 上下文中认定为 false 的值,在JavaScript只有 七个 falsy 值。

  1. false false 关键字
  2. 0 数值 zero
  3. 0n 当 BigInt 作为布尔值使用时, 遵从其作为数值的规则. 0n 是 falsy 值.
  4. 一个空字符串 (字符串的长度为零). JavaScript 中的字符串可用双引号 "", 单引号 '', 或 模板字面量 `` 定义。
  5. null null - 缺少值
  6. undefined undefined - 原始值
  7. NaN NaN - 非数值

特别要说明的是,除了这七个对象全是真值,如new Number 和new Boolean 都是真值。

let b = new Boolean(false);i
f(b){
//会执行到这里。
}

四大转换规则

  • toString规则:其他类型的值转换为字符串类型的操作
    • null => "null"
    • undefined => "undefined"
    • true => "true" false=>"false"
    • 10 => "10" "1e21"=>"1e+21"
    • [1,2,3] => "1,2,3"
    • Object对象 => "[Object Object]" 其实是调用toString方法
  • ToPrimitive规则:对象类型数组转为原始类型的操作
    • 当对象类型需要被转为原始类型时,它会先查找对象的valueOf方法,如果valueOf方法返回原始类型的值,则ToPrimitive的结果就是这个值
    • 如果valueOf不存在或者valueOf方法返回的不是原始类型的值,就会尝试调用对象的toString方法,也就是会遵循对象的ToString规则,然后使用toString的返回值作为ToPrimitive的结果
    • Date 是先toString再ValueOf
    • 如果在toString再ValueOf后都不能拿到原始类型,再判断相等、加减时就抛出Uncaught TypeError: Cannot convert object to primitive value
  • ToNumber规则
    • null=> 0
    • undefined => NaN
    • "123"=>123 "12ssd"=>NaN ""=>0
    • false => 0 true=>1
    • 数组、对象ToPrimitive
  • ToBoolean规则
    • js中七个falsy 值 (虚值) 为false,其他都为true

隐式转换

有了对上面知识点的认识,我们可以来一举拿下JS隐式转换了。

  • == 的过程(优先换成数字、字符串)
  1. 首先看==前后有没有NaN,有的话都是返回false。NaN不等于任何值,包括其本身
  2. 布尔值会转成数字类型,true转成1,false转成0
  3. 数字和字符串比较,字符串会转成数字
  4. undefined和null除了和undefined或null相等,和其他相比都是false
  5. 数字或者字符串和对象相比,对象使用ToPrimitive规则转换。
  6. 当两个操作数都是对象时,JavaScript会比较其内部引用,当且仅当他们的引用指向内存中的相同对象(区域)时才相等,即他们在栈内存中的引用地址相同。
  • +的过程(优先换成字符串、数字)
  1. 如果至少有一个操作数是对象,它会被转换成原始值(字符串,数字或布尔);
  2. 转换之后,如果至少有一个操作数是字符串类型,第二个操作数会被转换成字符串,并且会执行连接。
  3. 在其他的情况下,两个操作数都会转换成数字并执行算数加法运算。
  • -的过程(转换成数字) 这个就很简单了,全部用ToNumber规则转换成数字

检测学习成果

我们根据以上所学看几个笔试题。如果你都知道结果,就不用看我的废解释了。

[] == [] 
[] == ![] 
[null] == false

第一个,==左右都是对象,比较引用地址,这个两个不同的实例,肯定不相等啊。 第二个,!的优先级高于==,所以先 [] 是真值,求非当让是false了,转成数字0,==左是对象右是数字,对象使用ToPrimitive规则转换成"",再用ToNumber规则就转成0了,判断为相等。 第三个,[null]ToPrimitive再ToNumber规则就转成0,false也转成0。

var a = 1;
var b = "3";var obj1 = {i:1,toString:function() {return "1";},valueOf:function() {return 1;}
};
var obj2 = {i:1,toString:function() {return "2";}
};
var obj3 = {i:1,valueOf:function() {return 3;}
};
var obj = {i:1,
};
var objE = {i:1,valueOf:function() {return [];},toString:function() {return {};}
};a+b  
a + obj  
a + objE a+obj1  
a+obj2  
a+obj3  b+obj1  
b+obj2  
b+obj3  a==obj2  
a==obj1

这道题比较简单你只要熟练掌握我上面说的那几个知识点可以了。下面直接写出结果啦。

a + b    //"13"
a + obj  //"1[object Object]"
a + objE //Uncaught TypeError: Cannot convert object to primitive valuea+obj1  //2
a+obj2  //"12"
a+obj3  // 4b+obj1  //"31"
b+obj2  //"32"
b+obj3  //“33”a==obj2  //false
a==obj1  //true

最后提一个比较奇葩的题目。

定义一个变量a,使得下面的表达式结果为true
a == 1 && a == 2 && a == 3

这里我简单提示下,a要是一个对象,重写valueOf方法,让它每次隐式转换的时候,调用时i++。

6dbc05f18f0b62995044f21d0997587d.png

valueOf()在Object上默认返回的是对象不是原始类型,它会再调用toString。所以只要重写toString也可以。

如果还是没有思路,你们可以去看下这道题的文章原文从一道面试题说起—js隐式转换踩坑合集。

更多学习内容观看我的知乎

程序员的一切:打造全网web高级前端工程师资料库(总目录)看完学的更加快,知识更牢固。你值得拥有(持续更新)~​zhuanlan.zhihu.com
18e2e428fa61a177ab358f372dc1581d.png

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

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

相关文章

Java中快速处理集合_简洁又快速地处理集合——Java8 Stream(上)

作者:Howie_Y,系原创投稿主页:www.jianshu.com/u/79638e5f0743Java 8 发布至今也已经好几年过去,如今 Java 也已经向 11 迈去,但是 Java 8 作出的改变可以说是革命性的,影响足够深远,学习 Java …

eclipse编译java项目class文件_动态编译 Java 代码以及生成 Jar 文件

导读: 最近在看 Flink 源码的时候发现到一段实用的代码,该代码实现了 java 动态编译以及生成 jar 文件。将其进行改进后可以应用到我们的平台上,实现在平台页面上编写 java 代码语句,提交后由后台进行编译和打成 Jar 包再上传到指…

Dx11DemoBase 基类(三) 实例应用 【已实现】【附带源码】

现在我已经到哪了? 读书时,尤其是技术知识书籍, 我一般会担忧自己是否陷得太深, 细节关注得太多, 而忘了整体的过程; 一直以来对Direct3D 很畏惧, 因为太多函数和细节;现在我必须暂缓下&#x…

修改 decimal 默认值为0.00 sql_被经理邀请去“爬山”,只是因为我写错了一条SQL语句?...

作者:isysc1链接:https://juejin.im/post/5f06a2156fb9a07e5f5180df来源:掘金前戏SQL 写的妙,涨薪呱呱叫!新来的实习生小杨写了一条 SQL 语句SELECT wx_id from user WHERE wx_id 2当小杨迫不及待准备下班回家的时候&…

JS中关于clientWidth、offsetWidth、scrollWidth

网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线的宽);网页正文全…

shell 执行失败重试_Uipath 机器人总是运行失败怎么办?

要知道为什么RPA机器人容易失败,首先了解下它和常规的应用系统有哪些区别。常规应用系统,就像程序员自己创造了一个世界、一个域,在这个世界里创造它的人就是主宰。出现BUG的风险是相对可控的,顶多是功能用不了。而RPA项目&#x…

c mysql安装教程视频_MySQL安装教程 - Windows安装MySQL教程 - 小白式安装MySQL教程 - 青衫慧博客...

版权声明本文转发自旧站点萧瑟云日志,近期考虑准备将旧站进行关闭(没有精力维护),部分文章将会迁移至本站。文章发表于:2017-10-28 12:32:03前言上次给大家带来了SQL Server的小白式安装教程,这次再次带来一个MySQL的小白式安装教…

PJSIP UA分析(1)--PJSUA主函数

1 intmain(intargc, char*argv[])2 {3 do{4 app_restart PJ_FALSE; //PJ_FALSE是一个宏,一旦用户调用pjsua可执行文件进入该循环,那么默认只执行一次退出5 //如果需要再次循环,那么在下面函数中…

锁定表头和固定列(Fixed table head and columns)

前段时间需要这个功能,但是找了很多都不能完美的实现,不是只能锁定表头,就是浏览器兼容问题什么的,在此就自己做了一个锁定表头和列的js方法,依赖于JQuery。 因为方法很简单,就未封装成插件的形式&#xff…

游戏详细设计说明书_宜家的说明书设计脑洞太大了!

平常我们看到的说明书是像这样纯文字解说的或者是规范的文字配图这些说明书一般都是注重文字的上表达而大家熟悉的家居品牌宜家将说明书创意玩出了新境界!↓↓↓这不,最近由于全球疫情严峻期间宜家的全新说明书手册搜罗了各种纸上游戏意为帮助大家打发无…

centos删除php_centos如何卸载php

查看php版本php -v查看php相关软件包#rpm -qa|grep php(视频教程推荐:linux视频教程)提示如下:#php-pdo-5.1.6-27.el5_5.3#php-mysql-5.1.6-27.el5_5.3#php-xml-5.1.6-27.el5_5.3#php-cli-5.1.6-27.el5_5.3#php-common-5.1.6-27.el5_5.3#php-gd-5.1.6-27…

cgblib 代理接口原理_Java开发者你还不知道?告诉你Dubbo 的底层原理,面试不再怕...

前言平常我们在构建分布式系统的时候,一般都是基于 Dubbo 技术栈或者是SpringCloud 技术栈来做。早期其实最先比较流行的是Dubbo,我记得我们当时有个部分的老大就是用的是Dubbo 来构建的一个系统,到后面才出来的 SpringCloud,由于…

包含对流环热,热流边界,等温边界的稳态热传导方程的FEM求解。

以下面的问题为例:对于如图所示的平面传热问题, 若上端有给定的热流-2W/m2,即从下往上传输热量,结构下端有确定的温度100,周围介质温度为20,在两侧有换热,换热系数为α100W/㎡/K,热导…

python生成动态二维码实例_python生成动态个性二维码(示例代码)

1 安装工具 2 生成普通二维码 3 带图片的二维码 4 动态 GIF 二维码 5 在Python程序中使用 一、安装 首先在python环境下运行, 打开cmd进入python27 进入scripts 然后在scripts输入命令:pip install myqr二、 生成普通二维码 安装了 myqr 之后&#xff0c…

matlab武汉理工大学数值分析线性函数拟合实验_「首席架构师推荐」数值计算库精选...

这是一个著名的数值库列表,这些库用于软件开发中执行数值计算。它不是一个完整的列表,而是一个包含Wikipedia上文章的数字库列表,很少有例外。典型库的选择取决于一系列不同的需求,例如:期望的特性(例如:大维线性代数、并行计算、…

JSONP跨域原理和jQuery.getJSON用法

JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。本文主要介绍JSONP跨域原理,一起来看。 JSONP是一个非官方的协议&…

串口输出5v电压_为什么RS485比串口速度快距离远?--谈单端信号与差分信号之差异...

嵌入式系统中,串口、RS485、CAN、网络和USB等都是非常常用的通信方式。但是串口通信速度慢,距离近,为什么转换成RS485后,通信距离和速度都大幅提高了呢?USB也是近距离,为什么速度可以这么快?原因…

IIS7.0站点/虚拟目录中访问共享

目的:实现一个2008serve的IIS的虚拟目录(通过网络路径(UNC)的形式,共享在另外一个2008服务器上) 准备工作1.运行组策略编辑器(gpedit.msc);找到本地安全策略-本地策略-安…

易语言操作php文本文件,易语言对文本操作的步骤教学

在易语言编程中,我们往往需要对一些文字进行截取或分割出来,如何准确、快速的实现这一目标呢?下面笔者来为大家演示1、首先,我们打开易语言编程软件,点击左上角,新建一个文件,如图所示2、我们点…

xxl-job 执行结果是空_xxljob dotnet core executor执行器开源

DotXxlJob[(github)https://github.com/xuanye/DotXxlJob][https://github.com/xuanye/DotXxlJob] xxl-job的dotnet core 执行器实现,支持XXL-JOB 2.01 XXL-JOB概述[XXL-JOB][1]是一个轻量级分布式任务调度平台,其核心设计目标是开发迅速、学习简单、轻量…