开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第32天，点击查看活动详情

属性

思考如下代码：

var myObject = {
  a: 1
}
console.log(myObject.a) // 1
console.log(myObject['a']) // 1

对象访问属性的方式有两种，可以通过属性访问.a，或者通过键访问['a']。实际上它们访问的是同一个位置的变量，返回的值也是相同的。

两种语法的区别在于：

属性访问要求属性名满足标识符的命名规范，而键访问可以接受任意UTF-8/Unicode字符串作为属性名；
属性名是一个变量，则只能通过键访问

var myObject = {
  name: 'baili',
  age: 18
}
var attr = 'name'
console.log(myObject[attr]) // baili

在对象中，属性名只能是字符串。如果使用了字符串外的类型作为属性名，那也会被转化为字符串。

var myObject = {}
myObject[true] = '1'
myObject[2] = '2'
myObject[myObject] = '3'
console.log(myObject['true']) // '1'
console.log(myObject['2']) // '2'
console.log(myObject['[object Object]']) // '3'

取值的时候，即使不用字符串作为属性名取值，还是用赋值时的类型，同样可以获取到值。也就是说，不管是赋值还是取值，属性名都会先转化成字符串。

'[object Object]'这个值其实就是将对象转化成字符串的结果myObject.toString()。

可计算属性名

ES6新增了可计算属性名，也就是说属性名可通过简单计算来获得。例如：

var prefix = 'foo'
var myObject = {
  [prefix + '_bar']: 'foo_bar',
  [prefix + '_baz']: 'foo_baz'
}
console.log('foo_bar') // foo_bar
console.log('foo_baz') // foo_baz

数组

数组其实也属于对象的一种。我们也可以对数组进行非数字属性的添加。

思考如下代码：

var myArray = ['foo', 'bar', 'baz']
console.log(myArray.length) // 3
console.log(myArray[0]) // foo

这段代码很常见，我们再给数组添加几个字符串属性：

var myArray = ['foo', 'bar', 'baz']
myArray.baz = 'baz'
console.log(myArray.length) // 3
console.log(myArray.baz) // baz

给数组的baz属性值赋值，也是可以正常获取的，只是数组的长度并没有任何变化。

我们再给数组赋值数字字符串属性：

var myArray = ['foo', 'bar', 'baz']
myArray['3'] = 3
console.log(myArray.length) // 4
console.log(myArray[3]) // 3

长度变了，属性值也能正常的获取。说明如果属性值是数字字符串则可以正常运行。

对象属性

属性

可计算属性名

数组