2013-07-05 65 views
2

的區別是什麼,如果有的話,這兩個任務之間:JavaScript對象 - [] VS點

var foo = {}; 
foo['bar'] = "some value"; 
foo.baz = "some other value"; 

console.log(foo.bar) 
=> "some value" 
console.log(foo.baz) 
=> "some other value" 

是他們的代名詞?我注意到你可以使用不是有效屬性名稱的[]語法添加鍵。

foo['a space'] = "does not work"; 
console.log(foo.a space); 
=> SyntaxError: Unexpected identifier 

我的理由是我已經爲僞命名空間編寫了一個小JS庫。它是在假設上述賦值相同(忽略使用[]語法時允許的超集)的情況下編寫的。

+5

第一個例子中,沒有技術差異。正如你所說的,'[]'語法允許什麼是無效的標識符。 –

+0

...注意,所有的JavaScript屬性都是字符串,所以無論表達式給了什麼'[]',它最終都會得到'toString()'處理。 –

回答

6

foo["bar"]相當於foo.bar,雖然foo.bar在我看來更容易閱讀。正如您已經注意到前一種語法(foo["bar"])允許您使用不是有效標識符的屬性名稱。它還允許您使用動態屬性名稱:

var name = "bar"; 

foo[name] = 1; 

console.log(foo["bar"]); 

將輸出1

2

當您使用.時,屬性名稱是文字標識符。當你在程序中使用它時,你必須硬編碼屬性名稱。

當您使用[]時,屬性名稱是一個被評估的表達式。它通常不用於引號中的簡單字符串,因爲這是.表示法的用途。但是當你需要計算屬性時它很有用,例如

console.log(foo["item"+i]); 

後一種表示法也是訪問非標識符屬性的唯一方法。您可以使用任何字符串作爲屬性名稱。

2

他們絕對當量,除了可以多用[]可能性語法例如

var bar = 'text'; 
foo[bar] = 'baz'; 
1

他們是等價的,但是當屬性名包含空格,則不能使用點號(或其他非-alphanumeric字符):

foo.a space // doesn't work 
foo['a space'] // does 
1

唯一的區別是,你可以在第二個例子中使用變量但是它始終是更好地使用點表示法這樣

someObject.hello = ' hello john'; 

我用的是另一種方式的唯一情況是如果我需要使用一個變量這樣

var msg = 'goodbye'; 

someObject[msg] = 'goodbye john'; 

這將是結果

// someObject.hello => 'hello john' 
// someObject.goodbye => 'goodbye john' 

所以用點符號像obj.some和使用obj[myVar]作爲變量

所以區別在於您可以使用第二個示例中的變量

另外,如果我做到了這一點

var myVar = 'test'; 

someObj.myVar = ' Hello Test '; 

那麼這將是這個結果

// someObj.test => doesnt work - undefined 
// someObj.myVar => ' Hello Test '