2021-10-08 | es2021代码学习

    updateTabDeliveryData(params) {
      for(let key in params) {
        this.detailData.deliveryData[0][key] = params[key]
      }
    }

某人说这是es2021的写法，不知道有没有人看懂，我来解释一下这段代码，怕忘记所以记下来

首先，params是通过子组件传进来的一个对象，打印一下是这样的：

console.log(params);

 然后，通过for循环拿到每一个对象的属性值key

updateTabDeliveryData(params) {
  for(let key in params) {
    console.log(key)
  }
}

打印每个键值对的属性值

 重点来了，拿到了键值对的属性值后，就可以拿到每个键值对的value值

updateTabDeliveryData(params) {
      // 方法一：
      for(let key in params) {
        this.detailData.deliveryData[0][key] = params[key]
      }
      // 上面方法一的效果等同于方法二
      // 方法二：
      this.detailData.deliveryData[0].receiverName = params.receiverName
      this.detailData.deliveryData[0].receiverPhone = params.receiverPhone
      this.detailData.deliveryData[0].receiverAddress = params.receiverAddress
    }

为了清晰一点，我打印一下上面的代码

    updateTabDeliveryData(params) {
      console.log("------for循环打印的值：")
      for(let key in params) {
        this.detailData.deliveryData[0][key] = params[key]
        console.log("拿到父组件的每个键值对的属性值：",this.detailData.deliveryData[0][key]);
        console.log("把拿到子组件每个键值对的每个属性值赋值给父组件",params[key]);
      }
      // 等同于下面：
      console.log("------等同效果打印的值：")
      console.log("父组件属性值1：",this.detailData.deliveryData[0].receiverName)
      console.log("父组件属性值2：",this.detailData.deliveryData[0].receiverPhone)
      console.log("父组件属性值3：",this.detailData.deliveryData[0].receiverAddress)
      console.log("子组件属性值1：",params.receiverName)
      console.log("子组件属性值2：",params.receiverPhone)
      console.log("子组件属性值3：",params.receiverAddress)
    }

查看打印出来的值：