【学习笔记】JS 的 {} + {} 与 {} + [] 的结果是什么？

2220

前言

在 JS 中，+ 符号是很常见的一种，它有以下的使用情况

  • 数字的加法运算，二元运算
  • 字符串的连接运算，二元运算，优先级最高
  • 正号，一元运算，可延伸为强制转换其他类型的运算元为数字类型

另一个常见的是花括号 {}，它有两个用途也很常见

  • 对象的字面定义
  • 区块语句

加号运算符 +

除了上面说明的常见情况外，在标准中转换的规则还有以下几个，要注意它的顺序：operand + operand = result

  • 使用 ToPrimitive 运算转换左与右运算元为原始数据类型值(primitive)
  • 在第 1 步转换后，若有运算元出现原始数据类型是”字符串”类型值时，则另一运算元作强制转换为字符串，然后作字符串的连接运算(concatenation)
  • 其他情况时，所有运算元都会转换为原始数据类型的”数字”类型，然后作数学的相加运算(addition)

ToPrimitive 内部运算

因此，加号运算符只能使用于原始数据类型，那么对于对象类型的值要如何转换为原始数据类型？

JavaScript 对象转换到基本类型值时，会使用 ToPrimitive 算法，这是一个内部算法，是编程语言在内部执行时遵循的一套规则

在 ECMAScript 6th Edition #7.1.1，有一个抽象的 ToPrimitive 运算，它会用于对象转换为原始数据类型，这个运算不只会用在加号运算符也会用在关系比较或值相等比较的运算中，下面是有关 ToPrimitive 的说明语法

ToPrimitive(input, PreferredType?)
input 代表代入的值，而 PreferredType 可以是数字(Number)或字符串(String)其中一种，这会代表”优先的”、”首选的”的要进行转换到哪一种原始类型，转换的步骤会依这里的值而有所不同

但若没有提供这个值也就是预设情况，则会设置转换的 hint 值为 default，这个首选的转换原始类型的指示(hint 值)，是在作内部转换时由 JS 视情况自动加上的，一般情况就是预设值

转换算法

当对象发生到基本类型值的转换时，会按照下面的逻辑调用对象上的方法：

  • 如果存在 obj[Symbol.toPrimitive]，则先调用 objSymbol.toPrimitive

  • 否则按下面规则来：
    PreferredType 为数字 Number

    • 当 PreferredType 为数字 Number 时，input 为要被转换的值，以下是转换这个 input 值的步骤
    • 若 input 是原始数据类型，则直接返回 input
    • 否则，若 input 是个对象时则调用对象的 valueOf() 方法，若能得到原始数据类型的值，则返回这个值
    • 否则，若 input 是个对象时则调用对象的 toString() 方法，若能得到原始数据类型的值，则返回这个值
    • 否则，抛出 TypeError 错误

    PreferredType 为字符串 String

    • 当 PreferredType 为字符串 String 时，input 为要被转换的值，以下是转换这个 input 值的步骤:
    • input 是原始数据类型，则直接返回 input
    • 否则，若 input 是个对象时则调用对象的 toString() 方法，若能得到原始数据类型的值，则返回这个值
    • 否则，若 input 是个对象时则调用对象的 valueOf() 方法，若能得到原始数据类型的值，则返回这个值
    • 否则，抛出 TypeError 错误

    PreferredType 没提供时即 hint 为 default 时

    • 此时与 PreferredType 为数字 Number 时的步骤相同

Symbol.toPrimitive

  • Symbol.toPrimitive 是一个内置的 Symbol 值，它是作为对象的函数值属性存在的，当一个对象转换为对应的原始值时，会调用此函数
  • 该函数被调用时会被传递一个字符串参数 hint ，表示要转换到的原始值的预期类型。hint 参数的取值是 "number"、"string" 和 "default" 中的任意一个
  • Symbol.toPrimitive 在类型转换方面优，先级是最高的
let ab = {
    valueOf() {
        return 0;
    },
    toString() {
        return '1';
    },
    [Symbol.toPrimitive]() {
        return 2;
    }
}
console.log(1+ab); // 3
console.log('1'+ab); // 12
复制代码

例子


// 拥有 Symbol.toPrimitive 属性的对象
var obj2 = {
  [Symbol.toPrimitive](hint) {
    if(hint == "number"){
        return 10;
    }
    if(hint == "string"){
        return "hello";
    }
    return true;
  }
}
 
console.log(+obj2);     //10    --hint in "number"
console.log(`${obj2}`); //hello --hint is "string"
console.log(obj2 + ""); //"true"

let obj = {
  [Symbol.toPrimitive](hint) {
    if(hint === 'number'){
      console.log('Number场景');
      return 123;
    }
    if(hint === 'string'){
      console.log('String场景');
      return 'str';
    }
    if(hint === 'default'){
      console.log('Default 场景');
      return 'default';
    }
  }
}
console.log(2*obj); // Number场景 246
console.log(3 + obj); // Default 场景 3default
console.log(obj + "");  // Default场景 default
console.log(String(obj)); //String场景 str
复制代码

valueOf 与 toString 方法

而在 JS 的 Object 原型的设计中，都一定会有两个 valueOf 与 toString 方法，所以这两个方法在所有对象里面都会有，不过它们在转换过程中有可能会交换被调用的顺序

对于原始类型数据，toString 及 valueOf 方法的使用

const str = "hello", n = 123, bool = true;
console.log(typeof(str.toString()) + "_" + str.toString()) // string_hello
console.log(typeof(n.toString()) + "_" + n.toString())  // string_123
console.log(typeof(bool.toString()) + "_" + bool.toString()) //string_true


console.log(typeof(str.valueOf()) + "_" + str.valueOf()) //string_hello
console.log(typeof(n.valueOf()) + "_" + n.valueOf()) //string_123
console.log(typeof(bool.valueOf()) + "_" + bool.valueOf()) //string_true

console.log(str.valueOf === str) // true
console.log(n.valueOf === n) // true
console.log(bool.valueOf() === bool) // true
复制代码

toString 方法对于原始类型数据而言，其效果相当于类型转换，将原类型转为字符串；valueOf 方法对于原始类型数据而言，其效果将相当于返回原数据

复合对象类型数据使用 toString 及 valueOf 方法

var obj = {};
console.log(obj.toString());    // [object Object] 返回对象类型
console.log(obj.valueOf());     // {} 返回对象本身
复制代码

综合案例

const test = { 
 i: 10, 
 toString: function() { 
    console.log('toString'); 
    return this.i; 
 }, 
 valueOf: function() { 
    console.log('valueOf'); 
    return this.i; 
 } 
} 
alert(test); // 10 toString 
alert(+test); // 10 valueOf 
alert(''+test); // 10 valueOf 
alert(String(test)); // 10 toString 
alert(Number(test)); // 10 valueOf 
alert(test == '10'); // true valueOf 
alert(test === '10'); // false
复制代码

补充 toString() 和 String() 的区别

  • toString() 和 String() 方法都可以转换为字符串类型
  • toString()
    • toString() 可以将所有的数据都转换为字符串，但要排除 null 和 undefined，null 和 undefined 调用 toString() 方法会报错
    • 若当前数据为数字类型，则 toString() 括号中可以写一个数字代表进制，可以将数字转化为对应进制字符串
    var num = 123;
console.log(num.toString() + '_' + typeof(num.toString()));   // 123_string   
console.log(num.toString(2) + '_' + typeof(num.toString()));    // 1111011_string
console.log(num.toString(8) + '_' + typeof(num.toString()));    // 173_string
console.log(num.toString(16) + '_' + typeof(num.toString()));   //7b_string
复制代码
  • String()
    String() 可以将 null 和 undefined 转换为字符串，但是没法转进制字符串

注意下面两点：
Symbol.toPrimitive 和 toString 方法的返回值必须是基本类型值
valueOf 方法除了可以返回基本类型值，也可以返回其他类型值

数字其实是预设的首选类型，即在一般情况下加号运算中的对象要作转型时，都是先调用 valueOf 再调用 toString

注意：Date 对象的预设首选类型是字符串 String

JS 对于 Object 与 Array 的设计

在 JS 中所设计的 Object 纯对象类型的 valueOf 与 toString 方法，它们的返回如下:

  • valueOf 方法返回值: 对象本身
  • toString 方法返回值: "[object Object]" 字符串值，不同的内建对象的返回值是 "[object type]" 字符串
    • type 指的是对象本身的类型识别，例如 Math 对象是返回 "[object Math]" 字符串
    • 但有些内置对象因为覆盖了这个方法，所以直接调用时不是这种值（注意: 这个返回字符串的前面的 "object" 开头英文是小写，后面开头英文是大写）

因此可以利用 Object 中的 toString 来进行各种不同对象进行判断，这在以前 JS 能用的函数库或方法不多的年代经常看到，不过它需要配合使用函数中的 call 方法，才能输出正确的对象类型值，例如:

Object.prototype.toString.call([])  // "[object Array]"
Object.prototype.toString.call(new Date) // "[object Date]"
复制代码

对象的这两个方法都可被覆盖，可用下面的代码来观察这两个方法的运行顺序，下面这个都是先调用 valueOf 的情况:

let obj = {
  valueOf: function () {
      console.log('valueOf');
      return {}; // object
  },
  toString: function () {
      console.log('toString');
      return 'obj'; // string
  }
}
console.log(1 + obj);  //valueOf -> toString -> '1obj'
console.log(+obj); // // valueOf -> toString -> NaN
console.log('' + obj); // valueOf -> toString -> 'obj'
复制代码

先调用 toString 的情况比较少见，大概只有 Date 对象或强制要转换为字符串时才会看到

let obj = {
  valueOf: function () {
      console.log('valueOf');
      return 1; // number
  },
  toString: function () {
      console.log('toString');
      return {}; // object
  }
}
alert(obj); // toString -> valueOf -> alert("1");
String(obj); // toString -> valueOf -> "1";
复制代码

而下面这个例子会造成错误，因为不论顺序是如何都得不到原始数据类型的值，错误消息是”TypeError: Cannot convert object to primitive value”，从这个消息中可以得知它这里面会需要转换对象到原始数据类型:

let obj = {
  valueOf: function () {
      console.log('valueOf');
      return {}; // object
  },
  toString: function () {
      console.log('toString');
      return {}; // object
  }
}
console.log(obj + obj); // valueOf -> toString -> error!
复制代码

数组 Array 很常用，虽然它是个对象类型，但它与 Object 的设计不同，它的 toString 有覆盖，说明一下数组的 valueOf 与 toString 的两个方法的返回值：

  • valueOf 方法返回值：对象本身（与Object一样）
  • toString 方法返回值：相当于用数组值调用 join(‘,’) 所返回的字符串，即 [1,2,3].toString() 会是 “1,2,3”，这点要特别注意

Function 对象很少会用到，它的 toString 也有被覆盖，所以并不是 Object 中的那个 toString，Function 对象的 valueOf 与 toString 的两个方法的返回值：

  • valueOf 方法返回值：对象本身（与Object一样）
  • toString 方法返回值：函数中包含的代码转为字符串值

Number、String、Boolean 三个包装对象

包装对象是 JS 为原始数据类型数字、字符串、布尔专门设计的对象，所有的这三种原始数据类型所使用到的属性与方法，都是在这上面提供的

包装对象的 valueOf 与 toString 的两个方法在原型上有经过覆盖，所以它们的返回值与一般的 Object 的设计不同：

  • valueOf 方法返回值：对应的原始数据类型值
  • toString 方法返回值：对应的原始数据类型值，转换为字符串类型时的字符串值

toString 方法会比较特别，这三个包装对象里的 toString 的细部说明如下：

  • Number 包装对象的 toString 方法：可以有一个传参，可以决定转换为字符串时的进位(2、8、16)
  • String 包装对象的 toString 方法：与 String 包装对象中的 valueOf 相同返回结果
  • Boolean 包装对象的 toString 方法：返回 "true" 或 "false" 字符串

注意，常被搞混的是直接使用 Number()、String() 与 Boolean() 三个强制转换函数的用法，这与包装对象的用法不同，包装对象是必须使用 new 关键字进行对象实例化的，如 new Number(123)，而 Number(‘123’) 则是强制转换其他类型为数字类型的函数

Number()、String() 与 Boolean() 三个强制转换函数所对应的就是在 ECMAScript 标准中的 ToNumber、ToString、ToBoolean 三个内部运算转换的对照表，而当它们要转换对象类型前，会先用上面说的 ToPrimitive 先将对象为原始数据类型再进行转换到所要的类型值

实例

字符串 + 其他原始类型

字符串在加号运算中有最高的优先运算，与字符串相加必定是字符串连接运算(concatenation)。所有的其他原始数据类型转为字符串，可以参考 ECMAScript 标准中的 ToString 对照表，以下为一些简单的例子

'1' + 123 // "1123"
'1' + false // "1false"
'1' + null // "1null"
1' + undefined // "1undefined"
复制代码

数字 + 其他的非字符串的原始数据类型

数字与其他类型作相加时，除了字符串会优先使用字符串连接运算(concatenation)以外，其他都要依照数字为优先，所以除了字符串之外的其他原始数据类型都要转换为数字来进行数学的相加运算

1 + true // true 转为1, false 转为 0 -> 2
1 + null // null 转化为 0 -> 1
1 + undefined // undefined 转为NaN -> NaN
复制代码

数字/字符串以外的原始数据类型作加法运算

当数字与字符串以外的其他原始数据类型直接使用加号运算时，就是转为数字再运算，这与字符串完全无关

true + true // 2
true + null // 1
undefined + null // NaN
复制代码

[] + []

[] + [] // ""
复制代码
  • 两个数组相加，依然按照 valueOf -> toString 的顺序
  • valueOf 返回数组本身，所以会以 toString 的返回值才是原始数据类型，而 [] 转化为字符串为 ""
  • 所以最后这个运算相当于两个空字符串在相加，依照加法运算规则第2步骤是字符串连接运算(concatenation)，两个空字符串连接最后得出一个空字符串

{} + {}

{} + {} // "[object Object][object Object]"
复制代码
  • 两个空对象相加，依然按照 valueOf -> toString 的顺序
  • valueOf 返回对象本身，所以会以 toString 的返回值才是原始数据类型，即 {} 转化为字符串为 "[object Object]"
  • 所以最后这个运算相当于两个 "[object Object]" 字符串相加，依照加法运算规则第2步骤，是字符串连接运算(concatenation)

特别注意: {} + {} 在不同的浏览器有不同结果

  • 有些浏览器如 Firefox、Edge 浏览器会把 {} + {} 直译为相当于 +{} 语句，因为它们会认为以花括号开头 ({) 的是一个区块语句的开头而不是一个对象字面量，所以会略过第一个{}，把整个语句认为是个 +{} 的语句
  • 相当于强制求出数字值的 Number({}) 函数调用运算，即 Number("[object Object]")，最后得出的是 NaN

若在第一个空对象加上圆括号 (())，这样 JS 就会认为前面是个对象，就可以得出同样的结果：

({}) + {} // "[object Object][object Object]"
复制代码

或是分开来先声明对象的变量值也可以得出同样的结果，像下面这样：

let foo = {}, bar = {};
foo + bar;
复制代码

注: 上面说的行为与加号运算的对象字面值是不是个空对象无关，就算是里面有值的对象，如 {a:1, b:2} 也是同样的结果

{} + []

上面所述的把 {} 当作区块语句的情况在此也会发生，不过这次所有的浏览器都会有一致结果，若 {} 在前面，而 [] 在后面，则前面(左边)那个运算元会被认为是区块语句而不是对象字面量

所以 {} + [] 相当于 +[] 语句，即相当于强制求出数字值的 Number([]) 运算，即 Number("") 运算，最后得出的是 0数字

{} + [] // 0
{a: 1} + [1,2] // +"1,2" -> NaN
复制代码

特别注意：若第一个是 {} 时，后面加上其他的像 数组、数字或字符串，这时加号运算会直接变为一元正号运算，也就是强制转为数字的运算，这是个陷阱要小心

[] + {}

[] + {} // "" + "[object Object]" -> "[object Object]"
[1, 2] + {a:1}  // "1,2[object Object]"
复制代码

Date 对象

Date 对象的 valueOf 与 toString 的两个方法的返回值：

  • valueOf 方法返回值：给定的时间转为 UNIX 时间(自 1 January 1970 00:00:00 UTC 起算)，但是以微秒计算的数字值
  • toString 方法返回值：本地化时间的字符串

Date 对象上面有提及是首选类型为”字符串”的一种异常的对象，这与其他的对象的行为不同(一般对象会先调用 valueOf 再调用 toString )，在进行加号运算时它会优先使用 toString 来进行转换，最后必定是字符串连接运算(concatenation)，如以下的结果：

1 + (new Date()) // "1Mon May 17 2021 02:06:39 GMT+0800 (中国标准时间)"
复制代码

要得出 Date 对象中的 valueOf 返回值，需要使用一元加号 + 来强制转换它为数字类型，如以下的代码：

+new Date() // 1621188445596
复制代码

Symbol 类型

ES6 中新加入的 Symbol 数据类型，它不算是一般的值也不是对象，它并没有内部自动转型的设计，所以完全不能直接用于加法运算，使用时会报错

© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
前端
喜欢就支持一下吧
点赞0 分享
AI-robot的头像-一一网
asgbookphp ‘index.php’ 跨站脚本攻击漏洞-一一网
asgbookphp ‘index.php’ 跨站脚本攻击漏洞
asgbookphp ‘index.php’ 跨站脚本攻击漏洞
14年前 2.6W+
机器学习之随机森林回归篇（RandomForestRegressor）-一一网
机器学习之随机森林回归篇（RandomForestRegressor）
机器学习之随机森林回归篇（RandomForestRegressor）
4年前 4202
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS-一一网
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS
详解数仓中的数据分层：ODS、DWD、DWM、DWS、ADS
4年前 3895
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞-一一网
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞
DZCP Clanportal ＇Index.PHP＇任意文件上载漏洞
19年前 3842
Wireshark之抓包文件保存-一一网
Wireshark之抓包文件保存
Wireshark之抓包文件保存
4年前 3406
支付宝生活号H5接入支付宝支付流程-一一网
支付宝生活号H5接入支付宝支付流程
支付宝生活号H5接入支付宝支付流程
3年前 3135
相关推荐
支付宝生活号H5接入支付宝支付流程-一一网
支付宝生活号H5接入支付宝支付流程
支付宝生活号H5接入支付宝支付流程
3年前 3135
手摸手教你实现vue的动态路由（addRoute版）-一一网
手摸手教你实现vue的动态路由（addRoute版）
手摸手教你实现vue的动态路由（addRoute版）
4年前 3118
Unity实用功能之使用TextMeshPro组件-一一网
Unity实用功能之使用TextMeshPro组件
Unity实用功能之使用TextMeshPro组件
4年前 3062
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …-一一网
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …
vue 项目运行报错：npm ERR! This is probably not a problem with npm. There is likely …...
4年前 2847
Windi CSS 在 Vue3 + Vite 项目中的使用-一一网
Windi CSS 在 Vue3 + Vite 项目中的使用
Windi CSS 在 Vue3 + Vite 项目中的使用
3年前 2728
vue3 使用 qrcode.vue 生成二维码-一一网
vue3 使用 qrcode.vue 生成二维码
vue3 使用 qrcode.vue 生成二维码
4年前 2621
搜索
开启精彩搜索
世界，您好！-一一网
3.7W+人已阅读
世界，您好！
TOP1
番茄社区无限观看+付费视频破解教程-一一网
番茄社区无限观看+付费视频破解教程
5年前3.2W+人已阅读
TOP2
香蕉视频v3.8.3_VIP会员破解教程-一一网
香蕉视频v3.8.3_VIP会员破解教程
5年前3.1W+人已阅读
TOP3
[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网
密码保护：[桜井宁宁]COS和泉纱雾超可爱写真福利集
5年前2.8W+人已阅读
TOP4
[桜井宁宁] 爆乳奶牛少女cos写真-一一网
密码保护：[桜井宁宁] 爆乳奶牛少女cos写真
5年前2.8W+人已阅读
TOP5
快猫v1.1.7会员破解版_最新快猫vip破解教程大全-一一网
快猫v1.1.7会员破解版_最新快猫vip破解教程大全
5年前2.7W+人已阅读
TOP6
标签云
默认路由黑裙黑群晖麦克风车机鸿蒙系统鸿蒙系统鸿蒙OS鸿蒙驱动软件驱动题库音频剪辑音乐剪辑面板面具静态雷石集群随机阿里云