JavaScript 对象取值 . 和 [ ] 的区别

原创

明天也要努力 2021-07-13 16:10:31 ©著作权

文章标签 JavaScript javascript 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者明天也要努力的原创作品，请联系作者获取转载授权，否则将追究法律责任

1. 相同点

都可以获取到obj的属性值

2. 区别

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

var data = {
	name: 'haha',
	age: 18,
	3: '男'
}
var key = 'name'
console.log(data.key) // undefined
console.log(data[key]) // haha

2.2 [ ]运算符可以用纯数字作为属性名，点运算符不能;

var data = {
	name: 'haha',
	age: 18,
	3: '男'
}
console.log(data[3]) // 男
console.log(data.3) // Uncaught SyntaxError: missing ) after argument list

2.3 [ ] 可以动态访问的属性名，可以在程序运行时创建和修改属性，点操作符就不行！
（即 [ ] 可以动态设置和获取)

    var customer = {};
    var addr = ['武汉','上海','南京','深圳'];
    for(i = 0; i < 4; i++){
       customer["address" + i] = addr[i];
    }
    console.log(customer); // {address0: "武汉", address1: "上海", address2: "南京", address3: "深圳"}
    var str = "";
    for(i = 0; i < 4; i++){
        str += customer["address" + i] + "\t";
    }
    console.log(str); // 武汉	上海	南京	深圳

2.4 如果属性名中包含会导致语法错误的字符，或者属性名是关键字或者保留字，也可以使用 [ ] 表示法
(属性名是关键字或者保留字，都可以点语法不严密，不报错，写法提示有错);