JavaScript中物件屬性通過點(.)和方括號([])取值的不同之處

1、點操作符: 靜態的。右側必須是一個以屬性名稱命名的簡單識別符號。屬性名用一個識別符號來表示。識別符號必須直接出現再js程式中，它們不是資料型別，因此程式無法修改它們。

2、中括號操作符: 動態的。方括號裡必須是一個計算結果為字串的表示式，屬性名通過字串表示。字串是js的資料型別
再程式執行時可以修改和建立它們。

主要有以下區別：

1、[]中括號法–可以用變數作為屬性名或訪問,而點方法不可以;

  var obj = {};
    obj.name = '張三';
    var myName = 'name';
    console.log(obj.myName);//undefined,訪問不到對應的屬性
    console.log(obj[myName]);//張三
 
    var person = {
        name:'gogo'
    };
    console.log(person["name"]);//gogo
    console.log(person.name); //gogo
    //    優點：1,可以通過變數來訪問屬性
    var propertyName = 'name';
    console.log(person[propertyName]);  //gogo
    var propertyName2 = 'name2';
    console.log(person[propertyName2]);  //undefined
 

2、[]中括號法–可以用數字作為屬性名,而點語法不可以;

    var obj1={};
//    obj1.1=1;//Unexpected number
    obj1[2]=2;
//    console.log(obj1.1)
    console.log(obj1[2]);//2
//    console.log(obj1.2)
    console.log(obj1)//{2: 2}

3、 []中括號法-- 可以動態訪問的屬性名，可以在程式執行時建立和修改屬性，點操作符就不行！

// （ 即 []--可以動態設定和獲取)
var customer={};
var addr=['北京','上海','廣州','深圳'];
for(i=0;i<4;i++){
   customer["address"+i]=addr[i];
}
console.log(addr);
console.log(customer);
var str = "";
for(i=0;i<4;i++){
    str += customer["address" + i] + "\t";
}
console.log(str);
 

4、如果屬性名中包含會導致語法錯誤的字元，或者屬性名是關鍵字或者保留字，也可以使用方括號表示法。

//如：(屬性名是關鍵字或者保留字–都可以點語法不嚴密，不報錯，寫法提示有錯)

    person['first name'] ='gogo2';  //first name包含一個空格
    console.log(person['first name']);
//    console.log(person.first name)//書寫都通不過
    person['for'] ='gogo_for';  //first name包含一個空格
    person.if ='gogo_if';  //first name包含一個空格
    console.log(person['for']);//gogo_for
    console.log(person.for);//gogo_for
    console.log(person['if']);//gogo_if
    console.log(person.if);//gogo_if
 

//簡單利用：在陣列原型鏈上增加一個去重得的方法，並能實現鏈式寫法。

    Array.prototype.myDistinct=function () {
        var obj={};
        for(var i=0;i<this.length;i++){
            var cur=this[i];
            if(obj[cur]==cur){//物件的屬性名不能重複，重複就是修改；讓物件的屬性名和屬性值相同，藉以儲存不重複的陣列元素
//--中括號法可以用數字作為屬性名,而點語法不可以;
                this[i]=this[this.length-1];
                this.length--;
                i--;
                continue;
            }
            obj[cur]=cur;
        }
//        console.log(obj);//{2: 2, 3: 3, 4: 4, 5: 5}
        obj=null;
        return this;
 
    };
    var arr=[5,3,3,4,5,4,2];
    arr.myDistinct().sort().pop();
    console.log(arr);//[2, 3, 4]
    var arr1=[3,'a',4,5,4,'b','a'];
    console.log(arr1.myDistinct());//[3, "a", 4, 5, "b"]

參考原文