本篇內(nèi)容主要講解“JS語(yǔ)法中由 ++[[]][+[]]+[+[]] = 10引發(fā)的問(wèn)題分析”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“JS語(yǔ)法中由 ++[[]][+[]]+[+[]] = 10引發(fā)的問(wèn)題分析”吧!

成都創(chuàng)新互聯(lián)公司是專業(yè)的寧津網(wǎng)站建設(shè)公司，寧津接單;提供成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行寧津網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

解釋:為什么 ++[[]][+[]]+[+[]] = 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í)，先拋出類(lèi)型錯(cuò)誤:

[] = {}; [] = undefined; [] = null;

***的，[] = '1'不會(huì)有錯(cuò)誤，是因?yàn)樽址菍儆趇terable(可迭代的)。

JS的{} + {}與{} + []的結(jié)果是什么?

ToPrimitive內(nèi)部運(yùn)算

因此，加號(hào)運(yùn)算符只能使用于原始數(shù)據(jù)類(lèi)型，那么對(duì)于對(duì)象類(lèi)型的值，要如何轉(zhuǎn)換為原始數(shù)據(jù)類(lèi)型?下面說(shuō)明是如何轉(zhuǎn)換為原始數(shù)據(jù)類(lèi)型的。

在ECMAScript 6th Edition  #7.1.1，有一個(gè)抽象的ToPrimitive運(yùn)算，它會(huì)用于對(duì)象轉(zhuǎn)換為原始數(shù)據(jù)類(lèi)型，這個(gè)運(yùn)算不只會(huì)用在加號(hào)運(yùn)算符，也會(huì)用在關(guān)系比較或值相等比較的運(yùn)算中。下面有關(guān)于ToPrimitive的說(shuō)明語(yǔ)法:

ToPrimitive(input,  PreferredType?)input代表代入的值，而PreferredType可以是數(shù)字(Number)或字符串(String)其中一種，這會(huì)代表”優(yōu)先的”、”***的”的要進(jìn)行轉(zhuǎn)換到哪一種原始類(lèi)型，轉(zhuǎn)換的步驟會(huì)依這里的值而有所不同。但如果沒(méi)有提供這個(gè)值也就是預(yù)設(shè)情況，則會(huì)設(shè)置轉(zhuǎn)換的hint值為”default”。這個(gè)***的轉(zhuǎn)換原始類(lèi)型的指示(hint值)，是在作內(nèi)部轉(zhuǎn)換時(shí)由JS視情況自動(dòng)加上的，一般情況就是預(yù)設(shè)值。

而在JS的Object原型的設(shè)計(jì)中，都一定會(huì)有兩個(gè)valueOf與toString方法，所以這兩個(gè)方法在所有對(duì)象里面都會(huì)有，不過(guò)它們?cè)谵D(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值的步驟:

1. 如果input是原始數(shù)據(jù)類(lèi)型，則直接返回input。

2. 否則，如果input是個(gè)對(duì)象時(shí)，則調(diào)用對(duì)象的valueOf()方法，如果能得到原始數(shù)據(jù)類(lèi)型的值，則返回這個(gè)值。

3. 否則，如果input是個(gè)對(duì)象時(shí)，調(diào)用對(duì)象的toString()方法，如果能得到原始數(shù)據(jù)類(lèi)型的值，則返回這個(gè)值。

4. 否則，拋出TypeError錯(cuò)誤。

當(dāng)PreferredType為字符串(String)時(shí)

上面的步驟2與3對(duì)調(diào).

PreferredType沒(méi)提供時(shí)，也就是hint為”default”時(shí)

與PreferredType為數(shù)字(Number)時(shí)的步驟相同。

數(shù)字其實(shí)是預(yù)設(shè)的***類(lèi)型，也就是說(shuō)在一般情況下，加號(hào)運(yùn)算中的對(duì)象要作轉(zhuǎn)型時(shí)，都是先調(diào)用valueOf再調(diào)用toString。

但這有兩個(gè)異常，一個(gè)是Date對(duì)象，另一是Symbol對(duì)象，它們覆蓋了原來(lái)的PreferredType行為，Date對(duì)象的預(yù)設(shè)***類(lèi)型是字符串(String)。

因此你會(huì)看到在一些教程文件上會(huì)區(qū)分為兩大類(lèi)對(duì)象，一類(lèi)是 Date 對(duì)象，另一類(lèi)叫 非Date(non-date)  對(duì)象。因?yàn)檫@兩大類(lèi)的對(duì)象在進(jìn)行轉(zhuǎn)換為原始數(shù)據(jù)類(lèi)型時(shí)，***類(lèi)型恰好相反。

模擬代碼說(shuō)明

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對(duì)于Object與Array的設(shè)計(jì)

在JS中所設(shè)計(jì)的Object純對(duì)象類(lèi)型的valueOf與toString方法，它們的返回如下:

valueOf方法返回值: 對(duì)象本身。(所以ToPrimitive***要返回toString的值了)

toString方法返回值: “[object Object]”字符串值，不同的內(nèi)建對(duì)象的返回值是”[object  type]”字符串，”type”指的是對(duì)象本身的類(lèi)型識(shí)別，例如Math對(duì)象是返回”[object  Math]”字符串。但有些內(nèi)建對(duì)象因?yàn)楦采w了這個(gè)方法，所以直接調(diào)用時(shí)不是這種值。(注意:  這個(gè)返回字符串的前面的”object”開(kāi)頭英文是小寫(xiě)，后面開(kāi)頭英文是大寫(xiě))

一元正號(hào)(+)，具有讓***類(lèi)型(也就是hint)設(shè)置為數(shù)字(Number)的功能，所以可以強(qiáng)制讓對(duì)象轉(zhuǎn)為數(shù)字類(lèi)型，一般的對(duì)象會(huì)轉(zhuǎn)為:

這里***類(lèi)型其實(shí)本身就是數(shù)字，+讓toString輸出的字符串再?gòu)?qiáng)轉(zhuǎn)了一次。

> +{} //相當(dāng)于 +"[object Object]" NaN

當(dāng)然，對(duì)象的這兩個(gè)方法都可以被覆蓋，你可以用下面的代碼來(lái)觀察這兩個(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í)例

基本類(lèi)型間運(yùn)算

字符串 + 其他原始類(lèi)型字符串在加號(hào)運(yùn)算有***的優(yōu)先運(yùn)算

> '1' + 123 "1123"   > '1' + false "1false"   > '1' + null "1null"   > '1' + undefined "1undefined"

數(shù)字 + 其他的非字符串的原始數(shù)據(jù)類(lèi)型數(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ù)類(lèi)型作加法運(yùn)算就是轉(zhuǎn)為數(shù)字再運(yùn)算

> true + true 2   > true + null 1   > undefined + null NaN

對(duì)象類(lèi)型間運(yùn)算

• 空數(shù)組 + 空數(shù)組

> [] + []  ""

兩個(gè)數(shù)組相加，依然按照valueOf ->  toString的順序，但因?yàn)関alueOf是數(shù)組本身，所以會(huì)以toString的返回值才是原始數(shù)據(jù)類(lèi)型，也就是空字符串，所以這個(gè)運(yùn)算相當(dāng)于兩個(gè)空字符串在相加，依照加法運(yùn)算規(guī)則第2步驟，是字符串連接運(yùn)算(concatenation)，兩個(gè)空字符串連接***得出一個(gè)空字符串。

• 空對(duì)象 + 空對(duì)象

特別注意: {} + {}在不同的瀏覽器有不同結(jié)果

如果在***個(gè)(前面)的空對(duì)象加上圓括號(hào)(())，這樣JS就會(huì)認(rèn)為前面是個(gè)對(duì)象，就可以得出同樣的結(jié)果:

> ({}) + {} "[object Object][object Object]"

注: 上面說(shuō)的行為這與加號(hào)運(yùn)算的***個(gè)(前面)的對(duì)象字面值是不是個(gè)空對(duì)象無(wú)關(guān)，就算是里面有值的對(duì)象字面，例如{a:1, b:2}，也是同樣的結(jié)果。

• Date對(duì)象

> 1 + (new Date())  > "1Sun Nov 27 2016 01:09:03 GMT+0800 (CST)"

要得出Date對(duì)象中的valueOf返回值，需要使用一元加號(hào)(+)，來(lái)強(qiáng)制轉(zhuǎn)換它為數(shù)字類(lèi)型，例如以下的代碼:

> +new Date()  1480180751492

總結(jié)

解構(gòu)賦值產(chǎn)生的問(wè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)賦值成功。

{}問(wèn)題

> var name = 'test' > {[name]:1} Object {1: 1} > {[name]:1};[name] = '1' VM174:1 Uncaught SyntaxError: Unexpected token :

上述錯(cuò)誤其實(shí)是由于，{[name]:1}中{}是表達(dá)式，返回對(duì)象;{[name]:1};[name] =  ‘1’中{}是語(yǔ)句，語(yǔ)句中不允許”[name]:1“，換而言之語(yǔ)句中允許”{name: 1}”寫(xiě)法。

{} + {}

{} + {}的結(jié)果是會(huì)因?yàn)g覽器而有不同結(jié)果，Chrome(v55)中是object  Object字符串連接，但其它的瀏覽器則是認(rèn)為相當(dāng)于+{}運(yùn)算，得出NaN數(shù)字類(lèi)型。

{} + []的結(jié)果是相當(dāng)于+[]，結(jié)果是0數(shù)字類(lèi)型。

Date對(duì)象

Date對(duì)象上面有提及是***類(lèi)型為”字符串”的一種異常的對(duì)象，這與其他的對(duì)象的行為不同(一般對(duì)象會(huì)先調(diào)用valueOf再調(diào)用toString)，在進(jìn)行加號(hào)運(yùn)算時(shí)時(shí)，它會(huì)優(yōu)先使用toString來(lái)進(jìn)行轉(zhuǎn)換，***必定是字符串連接運(yùn)算(concatenation)

> 1 + (new Date()) > "1Sun Nov 27 2016 01:09:03 GMT+0800 (CST)"

toString()

Object.prototype.toString()才是用來(lái)檢測(cè)變量本身的類(lèi)型，typeof是檢測(cè)基本類(lèi)型，instanceof是檢測(cè)是否在原型鏈上。(注意一下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)建對(duì)象的返回值是”[object  type]”字符串，”type”指的是對(duì)象本身的類(lèi)型識(shí)別，例如Math對(duì)象是返回”[object  Math]”字符串。但有些內(nèi)建對(duì)象因?yàn)楦采w了這個(gè)方法，所以直接調(diào)用時(shí)不是這種值。(注意:  這個(gè)返回字符串的前面的”object”開(kāi)頭英文是小寫(xiě)，后面開(kāi)頭英文是大寫(xiě)。

> 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ù)的用法，這與包裝對(duì)象的用法不同，包裝對(duì)象是必須使用new關(guān)鍵字進(jìn)行對(duì)象實(shí)例化的，例如new  Number(123)，而Number(‘123’)則是強(qiáng)制轉(zhuǎn)換其他類(lèi)型為數(shù)字類(lèi)型的函數(shù)。

到此，相信大家對(duì)“JS語(yǔ)法中由 ++[[]][+[]]+[+[]] = 10引發(fā)的問(wèn)題分析”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！