深入了解JS中通過[]和.獲取對象屬性的區別

一般來說，'.'運算符和[]可以相互替代,比如

let obj = { 2     name : 'sena'
}; 4 
console.log(obj.name)     // 'sena'
console.log(obj[name])   // 'sena'

在這之上,我們需要了解關於他們的一些限制

.運算符:  右側必須是一個屬性名稱命名的簡單標識符

[] :  右側必須是一個計算結果為字符串的表達式

 

先復習一下JS中的標識符:

/* 標識符 - 在JS中所有的可以由我們自主命名的都可以稱為是標識符 - 例如：變量名、函數名、屬性名都屬於標識符 - 命名一個標識符時需要遵守如下的規則： 　　1.標識符中可以含有字母 、數字 、下划線_ 、$符號 　　2.標識符不能以數字開頭 　　3.標識符不能是ES中的關鍵字或保留字 　　4.標識符一般都采用駝峰命名法 - JS底層保存標識符時實際上是采用的Unicode編碼， 所以理論上講，所有的utf-8中含有的內容都可以作為標識符 */

 

嗯,這里就可以看出.的缺陷了,如果對象中的屬性剛好不符合標識符的規范,就不能用.來訪問

比如說:

let obj = {"1" : 123} console.log(obj.1);        // Uncaught SyntaxError: Unexpected number

let obj1 = {"star gf" : 'sion'}; 
console.log(obj1.star gf);　　//Uncaught SyntaxError

所以這里只能用[]

let obj = {"1" : 123}

obj["1"]　　　　　　　　　　// 123

let obj1 = {"star gf" : 'sion'};   
console.log(obj1['star gf']);　　　// sion

 

然后我們再來看看[]

[]右邊必須是一個計算結果為字符串的表達式,這給了[]非常強大的功能

let target = 'name'; let obj3 = { name : 'sena' }; //使用變量
console.log(obj3[target]);        //sena //使用字符串拼接
console.log('na' + 'me');         //sena

如果[]里面不是一個表達式,而是一個原始值或者對象,事情就開始變得有意思起來了,總結了一下規律大概就是下面兩個

1. 如果里面的是一個原始值,那么就直接把原始值變成相應的字符串(0 -> '0' , true -> 'true' ,  null -> 'null',  undefined -> 'undefined')(值得注意的是不是調用相應包裝類原型上的toString(),而且undefined和null也沒有包裝類)

2.如果里面的不是一個原始值,那么就調用toString變成字符串

/*調用toString的情況*/
let obj1 = { 'name' : 'sena', 'true' : 'sion', }; let obj2 = { toString(){ return 'name'; } }; let arr5 = []; arr5.toString = function(){ return 'name'; }; function fun() { return 'name'; } fun.toString = function () { return 'name'; }; console.log(obj1[obj2]); //sena
console.log(obj1[fun]);      //sena 
console.log(obj1[arr5]);    //sena

/*直接轉化的情況*/
let obj3 = { "undefined" : 1, "null" : 2, "true" : 3, "1" : 4, 'name' : 'sena' }; /*重寫了包裝類的原型toString*/ Boolean.prototype.toString = function(){ return 'name'; }; console.log(obj3[1]);         //4
console.log(obj3[true]);     //3　　　　這里可以證明沒有調用包裝類上的toString
console.log(obj3[null]);     //2
console.log(obj3[undefined]);   //1