ES——活学活用解构

原创于 2021-07-21 15:16:22 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#es

本文介绍了JavaScript中的对象解构赋值，通过案例解析如何将对象属性解构并重命名，以及如何一次性解构多个值。同时展示了如何使用递归解构来获取嵌套对象的属性，并提供了相关代码示例，帮助理解解构赋值的内部机制。

活学活用解构案例1：

let obj = {city:'bj'}

//将其name值解构出来，但是我们又不想用这个变量名，我们想用personName变量名替换成name，我们可以进行以下操作
let { city:cityName } = obj 
console.log(cityName) //cheng
console.log(city) // error:name is not defined

至于打印输出的name为什么没有输出值，是因为对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

当我们想一次性分别解构数据中所有想要的值案例二：


let obj = {
  personInfo: {
    name: "cyy",
    age: 1,
  },
};

let {
  personInfo,
  personInfo: { name, age },
} = obj;

console.log(personInfo, name, age);