JS語法： 由 ++[[]][+[]]+[+[]] = 10引發(fā)的問題
解釋:為什么 ++[[]][+[]]+[+[]] = 10
[0]是一個(gè)帶有0成員的數(shù)組，[0][0]是取它的第1個(gè)成員，所以必是0。
用了[0][0] = '1'雖然改了第1成員的值，但下一個(gè)[0][0]是獨(dú)立的取成員值的表達(dá)式，所以得到0數(shù)字值。
[] = 1是右值不是iterable(可迭代的)造成的錯(cuò)誤，這應(yīng)該是”解構(gòu)賦值”造成的錯(cuò)誤，以不同的瀏覽器調(diào)試:
- // Chrome
- TypeError: undefined is not a function
- // Firefox
- TypeError: 1 is not iterable
- // Safari
- TypeError: [] is not a function. (In '[]', '[]' is undefined)
數(shù)組解構(gòu)賦值的話，右值必需是iterable(可迭代的)，下面的例子的錯(cuò)誤與[] = 1是一樣錯(cuò)誤，所以應(yīng)該會(huì)先檢查右值是否為iterable時(shí)，先拋出類型錯(cuò)誤:
- [] = {};
- [] = undefined;
- [] = null;
***的，[] = '1'不會(huì)有錯(cuò)誤，是因?yàn)樽址菍儆趇terable(可迭代的)。
JS的{} + {}與{} + []的結(jié)果是什么?
ToPrimitive內(nèi)部運(yùn)算
因此，加號(hào)運(yùn)算符只能使用于原始數(shù)據(jù)類型，那么對于對象類型的值，要如何轉(zhuǎn)換為原始數(shù)據(jù)類型?下面說明是如何轉(zhuǎn)換為原始數(shù)據(jù)類型的。
在ECMAScript 6th Edition #7.1.1，有一個(gè)抽象的ToPrimitive運(yùn)算，它會(huì)用于對象轉(zhuǎn)換為原始數(shù)據(jù)類型，這個(gè)運(yùn)算不只會(huì)用在加號(hào)運(yùn)算符，也會(huì)用在關(guān)系比較或值相等比較的運(yùn)算中。下面有關(guān)于ToPrimitive的說明語法:
ToPrimitive(input, PreferredType?)input代表代入的值，而PreferredType可以是數(shù)字(Number)或字符串(String)其中一種，這會(huì)代表”優(yōu)先的”、”***的”的要進(jìn)行轉(zhuǎn)換到哪一種原始類型，轉(zhuǎn)換的步驟會(huì)依這里的值而有所不同。但如果沒有提供這個(gè)值也就是預(yù)設(shè)情況，則會(huì)設(shè)置轉(zhuǎn)換的hint值為”default”。這個(gè)***的轉(zhuǎn)換原始類型的指示(hint值)，是在作內(nèi)部轉(zhuǎn)換時(shí)由JS視情況自動(dòng)加上的，一般情況就是預(yù)設(shè)值。
而在JS的Object原型的設(shè)計(jì)中，都一定會(huì)有兩個(gè)valueOf與toString方法，所以這兩個(gè)方法在所有對象里面都會(huì)有，不過它們在轉(zhuǎn)換e有可能會(huì)交換被調(diào)用的順序。
當(dāng)PreferredType為數(shù)字(Number)時(shí)
當(dāng)PreferredType為數(shù)字(Number)時(shí)，input為要被轉(zhuǎn)換的值，以下是轉(zhuǎn)換這個(gè)input值的步驟:
- 如果input是原始數(shù)據(jù)類型，則直接返回input。
- 否則，如果input是個(gè)對象時(shí)，則調(diào)用對象的valueOf()方法，如果能得到原始數(shù)據(jù)類型的值，則返回這個(gè)值。
- 否則，如果input是個(gè)對象時(shí)，調(diào)用對象的toString()方法，如果能得到原始數(shù)據(jù)類型的值，則返回這個(gè)值。
- 否則，拋出TypeError錯(cuò)誤。
當(dāng)PreferredType為字符串(String)時(shí)
上面的步驟2與3對調(diào).
PreferredType沒提供時(shí)，也就是hint為”default”時(shí)
與PreferredType為數(shù)字(Number)時(shí)的步驟相同。
數(shù)字其實(shí)是預(yù)設(shè)的***類型，也就是說在一般情況下，加號(hào)運(yùn)算中的對象要作轉(zhuǎn)型時(shí)，都是先調(diào)用valueOf再調(diào)用toString。
但這有兩個(gè)異常，一個(gè)是Date對象，另一是Symbol對象，它們覆蓋了原來的PreferredType行為，Date對象的預(yù)設(shè)***類型是字符串(String)。
因此你會(huì)看到在一些教程文件上會(huì)區(qū)分為兩大類對象，一類是 Date 對象，另一類叫 非Date(non-date) 對象。因?yàn)檫@兩大類的對象在進(jìn)行轉(zhuǎn)換為原始數(shù)據(jù)類型時(shí)，***類型恰好相反。
模擬代碼說明
- a + b:
- pa = ToPrimitive(a)
- pb = ToPrimitive(b)
- if(pa is string || pb is string)
- return concat(ToString(pa), ToString(pb))
- else
- return add(ToNumber(pa), ToNumber(pb))
JS對于Object與Array的設(shè)計(jì)
在JS中所設(shè)計(jì)的Object純對象類型的valueOf與toString方法，它們的返回如下:
valueOf方法返回值: 對象本身。(所以ToPrimitive***要返回toString的值了)
toString方法返回值: “[object Object]”字符串值，不同的內(nèi)建對象的返回值是”[object type]”字符串，”type”指的是對象本身的類型識(shí)別，例如Math對象是返回”[object Math]”字符串。但有些內(nèi)建對象因?yàn)楦采w了這個(gè)方法，所以直接調(diào)用時(shí)不是這種值。(注意: 這個(gè)返回字符串的前面的”object”開頭英文是小寫，后面開頭英文是大寫)
一元正號(hào)(+)，具有讓***類型(也就是hint)設(shè)置為數(shù)字(Number)的功能，所以可以強(qiáng)制讓對象轉(zhuǎn)為數(shù)字類型，一般的對象會(huì)轉(zhuǎn)為:
這里***類型其實(shí)本身就是數(shù)字，+讓toString輸出的字符串再強(qiáng)轉(zhuǎn)了一次。
- > +{} //相當(dāng)于 +"[object Object]"
- NaN
當(dāng)然，對象的這兩個(gè)方法都可以被覆蓋，你可以用下面的代碼來觀察這兩個(gè)方法的運(yùn)行順序，下面這個(gè)都是先調(diào)用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'
實(shí)例
基本類型間運(yùn)算
字符串 + 其他原始類型字符串在加號(hào)運(yùn)算有***的優(yōu)先運(yùn)算
- > '1' + 123
- "1123"
- > '1' + false
- "1false"
- > '1' + null
- "1null"
- > '1' + undefined
- "1undefined"
數(shù)字 + 其他的非字符串的原始數(shù)據(jù)類型數(shù)字為優(yōu)先
- > 1 + true //true轉(zhuǎn)為1, false轉(zhuǎn)為0
- 2
- > 1 + null //null轉(zhuǎn)為0
- 1
- > 1 + undefined //null轉(zhuǎn)為NaN
- NaN
數(shù)字/字符串以外的原始數(shù)據(jù)類型作加法運(yùn)算就是轉(zhuǎn)為數(shù)字再運(yùn)算
- > true + true
- 2
- > true + null
- 1
- > undefined + null
- NaN
對象類型間運(yùn)算
- 空數(shù)組 + 空數(shù)組
- > [] + []
- ""
兩個(gè)數(shù)組相加，依然按照valueOf -> toString的順序，但因?yàn)関alueOf是數(shù)組本身，所以會(huì)以toString的返回值才是原始數(shù)據(jù)類型，也就是空字符串，所以這個(gè)運(yùn)算相當(dāng)于兩個(gè)空字符串在相加，依照加法運(yùn)算規(guī)則第2步驟，是字符串連接運(yùn)算(concatenation)，兩個(gè)空字符串連接***得出一個(gè)空字符串。
- 空對象 + 空對象
特別注意: {} + {}在不同的瀏覽器有不同結(jié)果
如果在***個(gè)(前面)的空對象加上圓括號(hào)(())，這樣JS就會(huì)認(rèn)為前面是個(gè)對象，就可以得出同樣的結(jié)果:
- > ({}) + {}
- "[object Object][object Object]"
注: 上面說的行為這與加號(hào)運(yùn)算的***個(gè)(前面)的對象字面值是不是個(gè)空對象無關(guān)，就算是里面有值的對象字面，例如{a:1, b:2}，也是同樣的結(jié)果。
- Date對象
- > 1 + (new Date())
- > "1Sun Nov 27 2016 01:09:03 GMT+0800 (CST)"
要得出Date對象中的valueOf返回值，需要使用一元加號(hào)(+)，來強(qiáng)制轉(zhuǎn)換它為數(shù)字類型，例如以下的代碼:
- > +new Date()
- 1480180751492
總結(jié)
解構(gòu)賦值產(chǎn)生的問題
- > {name: 1}['name'] = '2'
- {name: 1}['name'] = '2'
- ^^^^^^
- SyntaxError: Invalid destructuring assignment target
上述錯(cuò)誤。
- > {name: 1}[name] = '2'
- '2'
{name: 1}[name]相當(dāng)于{name: 1};[name]。解構(gòu)賦值成功。
{}問題
- > var name = 'test'
- > {[name]:1}
- Object {1: 1}
- > {[name]:1};[name] = '1'
- VM174:1 Uncaught SyntaxError: Unexpected token :
上述錯(cuò)誤其實(shí)是由于，{[name]:1}中{}是表達(dá)式，返回對象;{[name]:1};[name] = ‘1’中{}是語句，語句中不允許”[name]:1“，換而言之語句中允許”{name: 1}”寫法。
{} + {}
{} + {}的結(jié)果是會(huì)因?yàn)g覽器而有不同結(jié)果，Chrome(v55)中是object Object字符串連接，但其它的瀏覽器則是認(rèn)為相當(dāng)于+{}運(yùn)算，得出NaN數(shù)字類型。
{} + []的結(jié)果是相當(dāng)于+[]，結(jié)果是0數(shù)字類型。
Date對象
Date對象上面有提及是***類型為”字符串”的一種異常的對象，這與其他的對象的行為不同(一般對象會(huì)先調(diào)用valueOf再調(diào)用toString)，在進(jìn)行加號(hào)運(yùn)算時(shí)時(shí)，它會(huì)優(yōu)先使用toString來進(jìn)行轉(zhuǎn)換，***必定是字符串連接運(yùn)算(concatenation)
- > 1 + (new Date())
- > "1Sun Nov 27 2016 01:09:03 GMT+0800 (CST)"
toString()
Object.prototype.toString()才是用來檢測變量本身的類型，typeof是檢測基本類型，instanceof是檢測是否在原型鏈上。(注意一下Object.prototype.toString與Number.prototype.toString、Array.prototype.toString不同)
- > var a = 1
- undefined
- > a.toString()
- '1'
- > Number.prototype.toString.call(a)
- '1'
- > Object.prototype.toString.call([1, 2])
- '[object Array]'
- > Array.prototype.toString.call([1, 2])
- '1,2'
- > [1, 2].join()
- '1,2'
toString方法返回值: “[object Object]”字符串值，不同的內(nèi)建對象的返回值是”[object type]”字符串，”type”指的是對象本身的類型識(shí)別，例如Math對象是返回”[object Math]”字符串。但有些內(nèi)建對象因?yàn)楦采w了這個(gè)方法，所以直接調(diào)用時(shí)不是這種值。(注意: 這個(gè)返回字符串的前面的”object”開頭英文是小寫，后面開頭英文是大寫。
- > Object.prototype.toString.call(null)
- '[object Null]'
- > typeof null
- 'object'
- > Object.prototype.toString.call(1)
- '[object Number]'
Number()、String()與Boolean()
常被搞混的是直接使用Number()、String()與Boolean()三個(gè)強(qiáng)制轉(zhuǎn)換函數(shù)的用法，這與包裝對象的用法不同，包裝對象是必須使用new關(guān)鍵字進(jìn)行對象實(shí)例化的，例如new Number(123)，而Number(‘123’)則是強(qiáng)制轉(zhuǎn)換其他類型為數(shù)字類型的函數(shù)。
