object获取的两种方式/Object.keys使用/解构赋值

object获取的两种方式： 

  data() {
    return {
      abj: {
        aa: {A: '1'}
      }
    }
  },
  created() {
    console.log(this.abj.aa)    //第一种
    console.log(this.abj["aa"])    //第二种
  },

 Object.keys使用/解构赋值：

    return {
      footList: [],
      abj: {
        aa: {A: '12',AA:'22'},
        bb: {B: '1'}
      },
      ABJ:[100,200,300]
    }
  },
  created() {
    this.deepCopy()
    //Object.keys返回值是数组
    console.log(Object.keys(this.abj))    //参数为对象时 返回值是数组，存放的是对象key
    //['aa','b']
    console.log(Object.keys(this.ABJ))    //参数为数组时 返回值是数组，存放的是数组索引，和用for in遍历数组的顺序一样
    //['0','1','2']
    for (const BB in this.ABJ){
      console.log(BB)   
        //0
        //1
        //2
    }
  },

解构赋值与扩展运算符：

this.obj 和 {...this.obj} 区别

  data() {
    return {
      A: {
        AA: 'ytyt1',
        BB: 'ytyt2',
        CC: 'ytyt3',
      }
    }
  },
  created() {
    console.log(this.A)
    console.log({...this.A})   
  },

 基本使用方法：

  data() {
    return {
      A: {
        AA: 'ytyt1',
        BB: 'ytyt2',
        CC: 'ytyt3',
      },
      ABJ: [100, 200, 300]
    }
  },
  created() {
    console.log(...this.ABJ)      //100 200 300
    console.log([...this.ABJ])   //[100, 200, 300]

    // 仅提取 BB 作为变量
    let {BB} = {...this.A}
    console.log(BB)      //ytyt2

    // CC = 名为 CC 的属性
    // rest = 存有剩余属性的对象
    let {CC, ...rest} = this.A;
    console.log(CC)   //ytyt3
    console.log(rest)   //{AA: 'ytyt1', BB: 'ytyt2'}

    // 把一个属性赋值给另一个名字的变量
    // 冒号表示“什么值：赋值给谁”
    // 解构赋值都可以设置默认属性  {BB: b = 2} 
    let {BB: b} = {...this.A}
    console.log(b)

    // 数组解构
    let [DD] = [...this.ABJ]
    console.log(DD)   // 从数组第一个开始赋值，所以DD值为100
  },