JavaScript 对象解构-js教程-PHP中文网

JavaScript 对象解构

Mary-Kate Olsen

发布： 2024-12-16 06:52:11

原创

629 人浏览过

JavaScript Object Destructuring

解构对象

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

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

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!"

登录后复制