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

2、[]中括号法–可以用数字作为属性名,而点语法不可以;

   var obj={};
   //obj.1=1; //Unexpected number
   obj[2]=2;
   //console.log(obj.1)
   console.log(obj[2]);//2
   //console.log(obj.2)
   console.log(obj)//{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';  //for 是关键字
   person.if ='gogo_if';  //if是关键字
   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"]

四、总结

概括
1、变量；数字；动态访问、创建、修改；—用[]
2、简单标识符—[]和点都可
具体
1、[]–可以用变量作为属性名或访问,而点方法不可以;
2、[]中括号法–可以用数字作为属性名,而点语法不可以;
3、[] 可以动态访问的属性名，在程序运行时创建和修改属性，点操作符不行！
4、如果属性名中包含会导致语法错误的字符（比如：‘first name’，点方法书写报错，[]方法可以），或者属性名是关键字或者保留字（点方法、[]方法都可以）。

总而言之，用[]准没错！

参考：https://www.cnblogs.com/ljt1412451704/p/8683158.html