浅析JavaScript对象转换成原始值
发布时间:2023-08-05 02:09:11
前言
首先抛出几个问题:
console.log(Boolean({}));
console.log(Number([]));
console.log(Number([6]));
console.log(([] + []).length);
console.log(({} + {}).length);
打印结果都是啥?不知道各位能答对几题。文章末尾,我们会揭晓答案。这篇文章建议大家耐心阅读,相对来说比较绕而且乏味 - -。
三种算法
JavaScript 将对象转换为原始值时遵循的算法规则比较复杂,这些规则冗长、晦涩,我们先简单了解一下,具体实现后面再详细展开。
对象转换成原始值有三种基本算法:
偏字符串算法。该算法返回原始值,而且只要可能就返回字符串。
偏数值算法。该算法返回原始值,而且只要可能就返回数值。
无偏好算法。该算法不倾向于任何原始值类型,而是由类定义自己的转换规则。JavaScript 内置类除了 Date 类,其他都实现了偏数值算法。Date 类实现了偏字符串算法。
对象转换成布尔值
对象到布尔值的转换最简单:所有对象都转换为true
。这个转换不需要使用前面介绍的转换算法,直接适用于所有对象,包括空数组、包装对象:
console.log(Boolean([])); // => true
const wrapperObject = new Boolean(false); // 这是一个对象,而不是原始值
console.log(Boolean(wrapperObject)); // => true
对象转换成字符串
在将对象转换成字符串时,首先使用偏字符串算法将它转换为一个原始值,然后将得到的原始值再转换为字符串。
这种转换会发生在把对象传给一个接收字符串参数的内置函数时,比如将String()
作为转换函数,或者将对象插入模板字面量中时就会发生这种转换:
console.log(String({})); // => '[object Object]'
console.log(String([])); // => ''
console.log(String(function () {})); // => 'function () {}'
对象转换成数值
当需要把对象转换为数值时,首先使用偏数值算法将它转换为一个原始值,然后将得到的原始值再转换为数值。
接收数值参数的内置函数和方法都以这种方式将对象转换为数值,除数值操作符之外的多数操作符也按照这种方式把对象转换为数值:
console.log(Number([])); // => 0
console.log(Number({})); // => NaN
console.log(+[]); // => 0
上面的栗子了解一下即可,具体的转换算法后面会详细解释。
转换时使用的方法
toString()
、valueOf()
,所有对象都会继承这两个在对象到原始值转换时使用的方法,在接下来解释偏字符串、偏数值、无偏好转换算法之前,我们必须先了解这两个方法。
toString()
toString()
的任务是返回对象的字符串表示。
默认情况下,toString()
方法会返回特殊值:
const obj = {
x: 1,
y: 2,
}
obj.toString(); // => '[object Object]'
但是很多类都定义了自己特有的toString()
版本。
比如,Array
类的toString()
方法会将数组的每个元素转换为字符串,然后再使用逗号作为分隔符将它们拼接起来:
const array = [1, 2, 3];
array.toString(); // => '1', '2', '3'
Function
类的toString()
方法会将用户定义的函数转换为 JavaScript 源代码的字符串:
const f = function () {};
f.toString() // => 'function () {}'
Date
类定义的toString()
方法返回一个对人类友好的日期和时间字符串。
RegExp
类定义的toString()
方法会将RegExp
对象转换为一个看起来像RegExp
字面量的字符串。
valueOf()
valueOf()
方法的设计意图是返回对象的原始值表示。
然而大多数对象都没有缺省的原始值表示,为此valueOf()
的默认实现是返回对象本身,内置的函数、数组等类型都是如此:
const obj = {x: 666};
const arr = [1, 2, 3];
const fn = function () {};
obj.valueOf(); // => {x: 666}
arr.valueOf(); // => [1, 2, 3]
fn.valueOf(); // => ƒ () {}
极少数对象才具有有意义的原始值表示,比如String
、Number
、Boolean
这样的包装类定义的valueOf()
方法会简单地返回被包装的原始值:
const wrapperObj1 = new String(666);
const wrapperObj2 = new Number(888);
const wrapperObj3 = new Boolean(false);
wrapperObj1.toString(); // => '666'
wrapperObj2.toString(); // => '888'
wrapperObj3.toString(); // => 'false'
还有Date
对象定义的valueOf()
方法返回时间戳:
const d = new Date(2022, 6, 24);
d.valueOf(); // => 1658592000000
了解完toString()
和valueOf()
方法后,接下来我们看看转换算法是如何实现的。
转换算法
偏字符串算法
偏字符串算法首先尝试toString()
方法。如果这个方法有定义且返回原始值,则使用这个原始值,即使这个值不是字符串。如果toString()
方法不存在,或者存在但返回对象,则尝试valueOf()
方法。如果valueOf()
方法存在且返回原始值,就使用该值。否则,转换失败,报 TypeError。
偏数值算法
偏数值算法与偏字符串算法类似,只不过是先尝试valueOf()
方法,再尝试toString()
方法。
无偏好算法
无偏好算法取决于被转换的对象。如果是一个Date
对象,则使用偏字符串算法。如果是其他类型的对象,就使用偏数值算法。
以上规则适用于所有的内置 JavaScript 类型。
练习题
文章开头列举的五个问题,下面我们逐一揭晓答案。
console.log(Boolean({}))
:对象转换成布尔值时,所有对象都转换为true
,所以打印true
。
console.log(Number([]))
:对象转换成数值,首先使用偏数值算法把对象转换为一个原始值,然后再把得到的原始值转换为数值。偏数值算法会先尝试valueOf()
,将toString()
作为备用。Array
类继承了默认的valueOf()
方法,所以不会返回原始值,因此最终会调用toString()
方法。空数组会被转换成空字符串,而空字符串转换成数值为 0,所以打印 0。
console.log(Number([6]))
:同样,使用偏数值算法,最终会调用toString()
方法。因为数组中只包含一个数值,所以该数值首先会被转换成字符串 '6',再转换回数值 6,打印结果为 6。
console.log(([] + []).length)
:两个数组相加,首先会将数组转换为字符串,使用偏字符串算法,空数组会转换为空字符串,空字符串相加还是空字符串,长度为 0,打印结果为 0。
console.log(({} + {}).length)
:两个对象相加,首先会将对象转换成字符串,使用偏字符串算法,对象转换成字符串后是'[object Object]'
,两个'[object Object]'
拼接后的长度是 30,打印结果为 30。
来源:https://juejin.cn/post/7123780785097670686
猜你喜欢
- 所谓产品其实最终展现在用户面前的只是界面而已,所谓界面绝大多数时候只包括两个部分:图片、文字。重视界面上的每一个像素和每一个文字是UED的基
- 一、首先从SQLServer中Error讲起,SQL中错误处理有些怪辟 错误级别同是16但结果都不同。select *
- 一直以来,jQuery是我最喜欢的框架之一。1月14号 1.4 Released版本发布后,就迫不及待去了解了一下1.4版本对比以往1.3.
- 很有趣的招聘方式和题目:以下是该次招聘前端开发工程师的聘题解答:小贤是一条可爱的小狗(Dog),它的叫声很好听(wow),每次看到主人的时候
- 阅读上一章:Chapter 14 图片替换Chapter 15 为<body>指定样式把内容与显示效果分开设定的好处之一就是灵活
- 有时候要用Javascript输常用的字符,比如每个页面都要有的脚注。这里提供一个转换脚本:将HTML自动转为JS代码<script&
- 本文实例为大家分享了Virginia无密钥解密的具体代码,供大家参考,具体内容如下加密virginia加密是一种多表替换加密方法,通过这种方
- 你用过css么?当然,我是指你喜欢做网页的话,用过?很好,那你用过它的特效么?没有?那请跟我来。让我先
- 前言React核心的单向数据流、一切皆数据的state、不会改变的props,以及状态提升等等经常使用便不多总结,需要的看官方文档。JSXJ
- <html><head><title>不刷新页面查询的方法</title><meta
- 简单的说,一个数据库管理系统应该的提供的基本服务有两种:1.数据访问。对每个数据库管理系,数据访问服务都包含一下几种(1)插入--向数据库中
- 【基本介绍】【格式】:pivot(聚合函数 for 需要转为列的字段名 in(需要转为列的字段值))【说明】:实现将指定字段的字段值转换为列
- 有些朋友看到这个标题可能会有疑问,难道在视图中使用*符号还有何要注意的地方吗?对于这个问题,我们先不必回答,先看一下例子吧。 我这里,使用的
- defer介绍defer是golang的一个特色功能,被称为“延迟调用函数”。当外部函数返回后执行defer。类似于其他语言的 try… c
- write2vin 的 PPT原文路宛兮写的简介:本文解释了以下问题: 1.什么是用户体验? 2.谁发明了这个术语?他想表达什么意思? 3.
- 如何在ADO中使用存储查询?对于使用参数存贮查询,我们可用下面的代码进行示例:Private cn As Ne
- 一、引言Server端的脚本运行环境,它简单易用,不需要编译和连接,脚本可以在 Server端直接运行,并且它支持多用户、多线程,因为 AS
- 举例如下,一个服务器端的form 代码自动被解释成客户端代码:服务器端代码: &l
- 在DreamWeaver中编写CSS,这种编写习惯并不提倡,不过由于"可视化"和操作简便,使用的朋友依然很多,今天罗列一
- PHP mysqli_thread_id() 函数返回当前连接的线程 ID,然后杀死连接:<?php// 假定数据库用户名:root,