js對象屬性 通過點(.) 和 方括號([]) 的不同之處

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
</body>
</html>
<script>
 
 
 
//    js對象屬性 通過點(.) 和 方括號([]) 的不同之處
//    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"]
 
 
</script>

轉載:https://www.cnblogs.com/ljt1412451704/p/8683158.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章