JS 对象.属性 与对象[‘属性‘] 的区别

一、对象基本使用：

1、对象用 {} 包裹着属性 和方法：如

(1) 里面的属性或者方法我们采取键值对的形式 键 属性名 ： 值 属性值

(2) 多个属性或者方法中间用 逗号 , 隔开

(3) 方法冒号后面跟的是一个匿名函数

let obj = {
            hename: '可可',
            type: '阿拉斯加犬',
            age: '5岁',
            colour: '棕红色',
            getSkill: function(){
                console.log('汪汪汪(bark)');
                console.log('演电影(showFilm)');

            }
        }

二、对象. 属性 & 对象[属性] 的区别

#在javaScript中，访问对象的属性有 对象.属性 和 对象[属性] 两种方法

1、相同点：都是用来获取obj的属性值

2、区别：

a、静态与动态 使用

对象 . 属性 常用于静态对象使用时来获取obj的属性值，而 对象[属性] 则是用于动态存取属性

b、命名限制

<script>
        let obj = {
            name1:'winnie',
            name2:'a莹',
            name3:'圆'
        }
        console.log(obj.name1);//一般常量调用 结果 ：winnie
        // 遍历调用测试
        for(let i = 1; i <= 3; i++){
            let name = 'name' + i
            console.log(obj.name); // undefined
            console.log(obj[name]);  //winnie  a莹  圆 
        }
    </script>

ps: 这里obj.name输出undefined,是因为obj使用（.）获取属性值时，这里的name不是使用的变量name,而是直接去obj对象中寻找名为name的key,没有找到，所以报undefined。

1. [ ] 运算符可以使用字符串变量的内容作为属性名，. 运算符则不能

   let obj = {
               name1:'winnie',
               name2:'a莹',
               name3:'圆'
           }
           let name = 'name3'
           console.log(obj.name); //当.属性 为变量时 结果为 undefined
           console.log(obj[name]);  //[] 变量亦能使用  结果为 圆

2. [ ] 运算符可以使用纯数字作为属性名，. 运算符则不能

let obj = {
            name1:'winnie',
            2:'a莹',
            3:'圆'
        }
        console.log(obj[2]); // a莹
        console.log(obj.2);  //报错Uncaught SyntaxError: missing ) after argument list   【少了括号？？】