总结并对比js中获取对象的属性值的两种方法.和[ ]

目录

1.通过.获取

2.通过[ ]获取

.和[ ]方法的相同点：

.和[ ]方法的不同点：

1.[ ]方法可以使用变量作为属性名，.方法不能

2.[ ]方法可以使用纯数字作为属性名，.方法不能

---

1.通过.获取

    <script>
        var str = { name: '小明', age: 20 };
        console.log(str.name);//小明
    </script>

2.通过[ ]获取

    <script>
        var str = { name: '小明', age: 20 };
        console.log(str['name']);//小明
    </script>

.和[ ]方法的相同点：

两者都可以获取对象的属性值

.和[ ]方法的不同点：

1.[ ]方法可以使用变量作为属性名，.方法不能

e.g.用 []方法和.方法使用key作为属性名

    <script>
        var str = { name: '小明', age: 20 };
        var key = 'name';
        console.log(str[key]);//小明
        console.log(str.key);//undefined
    </script>

2.[ ]方法可以使用纯数字作为属性名，.方法不能

e.g.1用 []方法使用数字8作为属性名

    <script>
        var str = { name: '小明', 8: 20 };
        console.log(str[8]);//20 注意此处str对象，不是数组！！
    </script>

e.g.2用 .方法使用数字8作为属性名 

    <script>
        var str = { name: '小明', 8: 20 };
        console.log(str.8);
    </script>

结果是报错：