JavaScript 对象解构

解构对象

像解构数组一样，解构对象可以帮助您并使您的代码更干净、更好，但它与解构数组不同，以下是具体操作方法：

• 首先，为了整个解释，我们需要这个对象，我用海绵鲍勃来比喻这个对象??，所以看一下它并稍微分析一下：

let heightInCm = 4;
const obj = {
  personName: 'spongeBob',
  personAge: 37,
  personAddress: '124 Conch Street, Bikini Bottom, Pacific Ocean',
  heightInCm: 10,
  personHobbies: [
    'Jellyfishing',
    'Cooking Krabby Patties',
    'Blowing Bubbles',
    'Karate',
  ],
  home: {
    type: 'pineapple',
    location: 'bikini bottom',
    details: {
      rooms: 3,
      uniqueFeature: "it's underwater and shaped like a pineapple!",
    },
  },
};

• 现在，让我们从对象中析构两个属性：

const { personName, personAge } = obj;
console.log(personName, personAge); // spongeBob 37

• 如您所见，要破坏一个对象，您必须使用 {花括号}，然后在其中写入与我们要在对象中检索的属性名称完全相同的变量名称。

*您还可以使变量名称与属性名称不同，只需将新变量名称放在冒号后面即可：

const { personName: name, personAge: age } = obj;
console.log(name, age); // spongeBob 37

• 如您所见，我们将 personName 更改为姓名，将 personAge 更改为年龄。

*默认值：

• 我们还可以设置默认值，以防当我们尝试访问对象中不存在的属性时，例如：

const { DriversLicense = ['no'] } = obj;
console.log(DriversLicense);  // ['no']
// DriversLicense does not exist in obj, so the default value will be used.

* 解构对象时改变变量：

({ heightInCm } = obj);
console.log(heightInCm); // 10

• 在这个例子中，如果你回头看，你会发现对象外部的 heightInCm = 4，我们想要将对象内部的值赋给外部的 heightInCm，所以我们像普通解构一样进行，但是 JavaScript 期望在函数外部以 { } 开头时是一个代码块，因此我们将语句括在括号中以使其有效。

*嵌套对象解构：

// firstway:  Extracting the Entire Nested Object 

const { details } = obj.home;
console.log(details); // { rooms: 3, uniqueFeature: "it's underwater and shaped like a pineapple"


// second way: Extracting Specific Properties
const {
  home: { details }} = obj;

console.log(details); // {rooms: 3, uniqueFeature: "it's underwater and shaped like a pineapple"


// third way
const {details: { rooms, uniqueFeature }} = obj.home;

console.log(rooms, uniqueFeature); // 3 "it's underwater and shaped like a pineapple!"

• 最适合清晰度：当您处理较大的对象并且更喜欢通过首先提取整个对象来保持事物清晰时，第一种方法可能会更好。
• 最适合效率：如果您只对深度嵌套对象的特定属性感兴趣，那么第三种方法通常是最好的。它简洁并避免创建不必要的变量。

*感谢您的阅读，希望您明白一切，如果您有任何疑问，请随时提问？

以上是JavaScript 对象解构的详细内容。更多信息请关注PHP中文网其他相关文章！