阿瑞斯的BLOG

深入理解JavaScript中对象内容的访问方式

发表于 | 分类于

整理一下对象访问两种方式的区别以及持续更新不同的使用场景

对象内容的访问的两种方式：

  • . 操作符：通常称为“属性访问”
  • [ ] 操作符：通常称为“键访问”

属性访问和键访问的异同

相同

实际上它们访问的是同一个位置，并且会返回相同的值

区别

. 操作符要求属性名满足标识符的命名规范，而 [“..”] 语法 可以接受任意 UTF-8/Unicode 字符串作为属性名。

. 操作符后面总是字符串，所以为对象增加属性的时候使用点语法，会自动把属性名称转为字符串，

举例：

1.如果要引用名称为 “Super- Fun!” 的属性，那就必须使用 [“Super-Fun!”] 语法访问，因为 Super-Fun! 并不是一个有效 的标识符属性名。

2.使用Symbol值作为对象的属性名时只能使用 [ ]

由于每一个 Symbol 值都是不相等的，这意味着 Symbol 值可以作为标识符，用于对象的属性名，就能保证不会出现同名的属性。这对于一个对象由多个模块构成的情况非常有用，能防止某一个键被不小心改写或覆盖。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var mySymbol = Symbol();
//第一种写法
var o = {};
o.mySymbol = 'Hello';
//第二种写法
var o = {};
o[mySymbol] = 'Hello';
//第三种写法
var o = {
  [mySymbol]: 'Hello!'
};
// 第四种写法
var o = {};
Object.defineProperty(o, mySymbol, { value: 'Hello!' });

上面代码通过方括号结构和Object.defineProperty，将对象的属性名指定为一个 Symbol 值。

注意：第一种写法是不会读取mySymbol作为标识符所指代的那个值的，因为点语法后面总是字符串，导致a的属性名实际上是一个字符串，而不是一个 Symbol 值。

1
2
3
o.mySymbol = 'Hello!';
o[mySymbol] // undefined
o['mySymbol'] // "Hello!"

同理，在对象的内部，使用 Symbol 值定义属性时，Symbol 值必须放在方括号之中。

[ ] 使用场景

1.可计算属性名

2.Symbol值作属性名

3.需要使用变量方式遍历属性

4.函数传参，参数作属性名，或者属性名的一部分，只能使用 [ ]

5.使用对象法进行数组去重，对象的键是一个变量

参考：
ECMAScript6 入门——Symbol