对象字面量处理--使用vue处理

属性名表达式 { [<expression>]: value }

const prefix = "MK"
const sourceVersion  = 1
const latestVersion = 47

const ironMan = {
  [prefix + sourceVersion] = 2018
  [prefix + sourceVersion] = 2017
}

console.log(ironMan.MK47)    //-->2017

对象内容操作

`属性键为字符串，且该字符串中只包含英文字母和下划线的话，可以直接用 <obj>.<key> 来读取属性值。`
const post = {
  title: '基本数据处理 · 对象字面量',
  serialNo: 2,
  parentBook: {
    title: '基于 JavaScript 开发灵活的数据应用',
    author: {
      name: '小问',
      title: '多领域开发者',
      domains: [ 'Web 开发', '大数据', '机器学习' ]
    }
  },
  
  content: '......'
}

console.log(post.title) //=> 基本数据处理 · 对象字面量
console.log(post.parentBook.author.name) //=> 小问

`而当对象中所需要读取的目标属性键为数字、包含英文字母和下划线以外的字符串甚至是 Symbol 对象的时候，就需要使用 obj[key] 的形式来读取属性值了。`
const obj = {
  1: 2,
  'a b c': 'd e f',
  [Symbol.for('foo')]: 'bar'
}

console.log(obj[1]) //=> 2
console.log(obj['a b c']) //=> d e f
console.log(obj[Symbol.for('foo')]) //=> bar

PS:一般情况下，无论是对对象进行添加、读取还是修改属性，都遵循着嵌套链完整的原则

const outer = {
  inner: {}
}

outer.inner.foo = 'bar' // OK
outer.something.bar = 1 // Error!