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

160 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第12天,点击查看活动详情

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

总结:对于一般的常量就使用 . 运算符,对于其他的使用 [ ] 运算符。

3. 关于 JavaScript 对象拓展

JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...

此外,JavaScript 允许自定义对象。

所有事物都是对象

JavaScript 提供多个内建对象,比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。

  • 布尔型可以是一个对象。
  • 数字型可以是一个对象。
  • 字符串也可以是一个对象。
  • 日期是一个对象。
  • 数学和正则表达式也是对象。
  • 数组是一个对象。
  • 甚至函数也可以是对象。

对象属性

可以说 "JavaScript 对象是变量的容器"。但是,我们通常认为 "JavaScript 对象是键值对的容器"。 键值对通常写法为 name : value (键与值以冒号分割)。 键值对在 JavaScript 对象通常称为 对象属性。