JS中对象用点(.)和方括号([])的区别

       在JS中，我们取对象的属性值一般都是用点（.）表示，如Person.name，Person.age，但是有时候也会遇到Person[name]这种，那么他们具体有什么区别呢？

用例子展示：

1、中括号语法可以用变量作为属性名或者访问，而点语法不可以;

    // 例1
    var obj = {};
    obj.name = '小王';
    var MyName = 'name';
    console.log(obj.name); //小王
    console.log(obj["name"]); //小王
    console.log(obj.MyName); //undefined
    console.log(obj[MyName]); //小王
    var MyName = 'name2';
    console.log(obj[MyName]); //undefined
    // 例2
    var person = {
      name: '哆啦'
    };
    console.log(person.name); //哆啦
    console.log(person["name"]); //哆啦

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

 var obj = {};
    // obj.1=1;//语法不允许，会报错
    obj[2] = 2;
    // console.log(obj1.1)
    console.log(obj[2]); //2
    // console.log(obj.2)
    console.log(obj) //{2: 2}

 3、中括号语法可以动态访问属性名，并且在程序运行时可以创建和修改属性，点语法不可以；

    var str1 = {};
    var city = ['北京', '上海', '广州', '深圳'];
    for (i = 0; i < 4; i++) {
      str1["city" + i] = city[i];
    }
    console.log(city);   //['北京', '上海', '广州', '深圳']
    console.log(str1);   //{city0: '北京', city1: '上海', city2: '广州', city3: '深圳'}

    var str2 = "";
    for (i = 0; i < 4; i++) {
      str2 += str1["city" + i] + "\t";
    }
    console.log(str2);  //北京	上海	广州	深圳

 4、中括号语法可以在属性名中包含会导致语法错误的字符，如空格，也可以在属性名中包含关键字或者保留字；

   // 使用字符
    person = {}
    // person.first name = '馨馨' 
    person['first name'] = '馨馨'; //属性中包含一个空格
    // console.log(person.first name)//书写错误
    console.log(person['first name']); //馨馨

    // 使用关键字或保留字
    person['for'] = 'for'; //关键字或保留字
    person.if = 'if'; //关键字或保留字
    console.log(person['for']); //for
    console.log(person.for); //for
    console.log(person['if']); //if
    console.log(person.if); //if

 5、 在数组原型链上增加一个去重的方法，并实现链式调用。

    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);
      obj = null;
      return this;
    };
    var arr = [5, 3, 3, 4, 5, 4, 2];
    arr.myDistinct().sort();
    console.log(arr); //[2, 3, 4, 5]
    var arr1 = [3, 'a', 4, 5, 4, 'b', 'a'];
    console.log(arr1.myDistinct()); //[3, "a", 4, 5, "b"]

 总结：

点操作符（.）: 静态的。

1、后面必须是一个以属性名命名的简单标识符；

2、标识符必须直接出现在js程序中，它们不是数据类型，因此程序无法修改它们。

中括号操作符（[]）: 动态的。

1、方括号里必须是一个计算结果为字符串的表达式，属性名通过字符串表示；

2、字符串是js的数据类型，在程序运行时可以修改和创建它们。