加法操作符( 使用 + 注意 )

学习总结自沙翼老师的前端音频教程#陪你读书(JavaScript WEB前端)#（喜马拉雅）

1. toString 和 valueOf 两者的区别：

toString：返回对象的字符串表示

valueOf：返回对象的原始值

返回值：

• toString 一定会将所有内容都转成字符串
• valueOf 则是取出对象内部的值，不进行类型转换

用途上：

• toString 专门用于输出字符串【侧重于转换】
• valueOf专门用于算数计算和关系运算【侧重于运算】

2. 原始对象的应用情况

汇总

原始对象	toString（字符串表示）	valueOf（原始值）
数组对象Array[a, b, c]	“a, b, c”（string）	数组对象本身（object）
布尔对象new Boolean(true)	“true”（string）	true（boolean）
日期对象new Date()	“Sat Jun 06 2020 16:55:43 GMT+0800 (中国标准时间)”（string）	1591433770854（毫秒数）
错误对象new Error()	“Error”（string）	错误对象本身（object）
函数对象new Function()	函数本身的字符串表示（string）	函数对象本身（object）
数值对象new Number(123456)	“123456”（string）	123456（基本类型number）
字符对象new String('KKKK')	“KKKK”（string）	“KKKK”（string）
对象new Object()	“[object Object]”（string）	对象本身（object）

总结

基本上分三种情况：

• valueOf()返回其自身：数组、错误、函数、对象
  • 数组对象Array（“a,b,c”）、错误对象Error(“Error”)、函数对象Function([原函数的字符串表示])、对象（"[object object]"）
• valueOf返回原始值（基本类型）：布尔、数值、字符
  • 布尔对象Boolean、数值对象Number、字符对象String
• 特殊：日期对象的 toString()返回日期的文字表示，valueOf返回 毫秒数

① 数组对象Array

var a = [1, 2, 3, 4, 5]
a.toString() // 数组元素转化成字符串，用逗号连接 => "1,2,3,4,5" (string类型)
a.valueOf() // 返回数组对象的原始值：数组本身 => [1, 2, 3, 4, 5] (object类型)

② 布尔对象Boolean

var a = new Boolean('true')
a.toString() // 返回true的字符串表示 'true' (string类型)
a.valueOf() // 返回其基本数据类型：true (boolean类型，非object)

③ Date日期对象

var a = new Date()
a.toString() // 返回日期的字符串表示 (string类型)
a.valueOf() // 返回自1970年1月1日午时自现在的毫秒数 (number类型)

④ Error错误对象

var a = new Error()
a.toString() // "Error" (string类型)
a.valueOf() // Error [\r] at <anonymous>:1:9 (object类型)

⑤ Function函数对象

var a = new Function() // (function类型)
a.toString() // 函数的字符串表示(string类型)
a.valueOf() // 函数本身(function)

⑥Number数值对象

var a = new Number(123456) // (object类型)
a.toString() // "123456" (string类型)
a.valueOf() // 123456 (number类型)

⑦ String字符串对象

var a = String('Just Do It') // (object类型)
a.toString() // "Just Do It" (string类型)
a.valueOf() // "Just Do It" (string类型)

⑧ Object对象

var a = new Object() // (object类型)
a.toString() // “[object object]”(string类型)
a.valueOf() // a本身 (object类型)

3. 对象转其他

① 明确其他

分两种情况：

• 对象转字符：先toString后valueof
• 对象转数字：先valueOf后toString

② 不明确

即对象转原始值：先valueOf后toString（日期对象例外：先 toString后 valueof）

4. 加法操作符

规则

1. 加法操作符是一个二元操作符

2. 如果有一个操作数是字符串，另一个操作数也要转换成字符串

3. 如果只含有undefined、null、number、boolean，全部转换成数字

   • undefined + undefined => NaN + NaN => NaN

   • null + null => 0 + 0 => 0

   • undefined + null => NaN + 0 => NaN

4. 对象转字符：toString - valueOf

5. 对象转数字：valueOf - toString

6. 对象转原始值：valueOf - toString（日期对象例外 toString - valueOf）

案例

var a = []
var b = a + a
// 对象 + 对象 => 不明确 => 对象转原始值 => valueOf - toString
// [].valueOf() => [].toString() => ''
// b = '' + '' => ''

var a = {}
var b = a + a
// {} + {} => 不明确 => valueOf - toString
// {}.valueOf() => {}.toString() => '[object object]'

var a = []
var b = {}
var c = a + b
// [] + {} => 不明确 => valueOf - toString
// [].valueOf() => [].toString() => ''
// {}.valueOf() => {}.toString() => '[object object]'
// c = [] + {} => '' + '[object object]' => '[object object]'

var a = '123456'
var b = true
var c = a + b
// 含字符串，则全部转换成字符串
// true => 'true'
// c = '123456' + 'true' => '123456true'

var a
var b = true
var c = a + b
// 符合只含有undefined、null、Boolean、number，全部转换成数字
// Number(undefined) => NaN
// Number(true) => 1
// c = NaN + 1 => NaN

var a = null
var b = {}
var c = a + b
// 不明确 => valueOf - toString
// {}.valueOf() => {}.toString() => '[object object]'
// c = null + '[object object]' 
		=> 'null' + '[object object]' 
			=> 'null[object object0]'

特殊情况(空对象被当做块级作用域)

js解释器会将 {}当做一个块级作用域，不参与运算，由此，加法运算变成了一元加

=========== 情况一 ===============
{} + null // 只含有null，转数字 => Number(null) => 0，因此结果为0
=========== 情况二 ===============
var a = {}
var b = null
var c = a + b
// 用变量存储对象，确保js解释器不会将{}当成一个块级作用域 
// {} => '[object object]'
// c = {} + null => '[object object]' + 'null' => '[object object]null'

============ 情况一 =================
{} + []  => + [] => (一元加：转数字) Number([]) => 0
============ 情况二 =================
var a = {}
var b = []
var c = a + b
// 变量存储 空对象{}，确保了js解释器不会将 {} 当做一个块级作用域
// {} + [] => 不明确 => valueOf - toString
// {}.valueOf() + [].valueOf()
		=> {}.toString() + [].toString()
            => '[object object]' + ''
            	=> '[object object]'

总结

加法运算中：

1. 如果操作数有一个是字符串，另一个操作数也转换成字符串

2. 如果操作数只含有 undefined、null、boolean、number，全部转成数字

3. 如果操作数中有对象

   • 对象有明确转换方向
     • 对象转字符（先 valueOf 后 toString）
     • 对象转数字（先 toString 后 valueOf）
   • 对象没有明确的转换方向
     • 对象转原始值 （除了日期对象，其他先valueOf后toString）

4. 如果出现空对象没有存储在变量中就与其他操作数进行加法运算，会被当做一个独立的作用域，加法运算会被当做一元加处理

   ================== 空对象没有存储在变量中 ============

   {} + ‘abc’ => NaN (被当做一元加处理：转换成数字)

   ================== 空对象存储在变量中 ============

   var a = {}

   var b = ‘abc’

   var c = a + b => ‘[object object]abc’