7-ES6 ++：对象破坏
#javascript #es6 #esnext

物体破坏

使用对象的工作是javaScript中的essential。我们使用对象存储数据，将数据传递到函数，从函数返回数据等等。在 es6 中，我们有一种使用对象的新方法，称为object destruction。

让我们看看一个示例：

const person = {
  name: "Hasan",
  age: 30,
  city: "Cairo",
};

const { name, age, city } = person;

console.log(name); // Hasan

在这里，我们定义了一个称为person的对象，该对象包含三个属性，即name，age和city。然后，我们使用object destruction获取这些属性的值并将其存储在具有相同名称的变量中。

使用不同的变量名称

我们还可以使用object destruction获取属性的值并将其存储在具有不同名称的变量中。

const person = {
  name: "Hasan",
  age: 30,
  city: "Cairo",
};

const { name: personName, age: personAge, city: personCity } = person;

console.log(personName); // Hasan

要定义不同的变量名称，我们使用以下语法：

const { property: variableName } = object;

现在我们可以使用variableName从object获取property的值。

将对象破坏与函数参数使用

正如我们在上一篇文章中看到的那样，我们可以将default值用于函数参数。我们还可以使用object destruction从对象中获取属性值并将其用作函数参数。

const person = {
  name: "Hasan",
  age: 30,
  city: "Cairo",
};

function printPersonInfo({ name, age, city }) {
  console.log(`Name: ${name}, Age: ${age}, City: ${city}`);
}

printPersonInfo(person); // Name: Hasan, Age: 30, City: Cairo

在这里，我们定义了一个称为printPersonInfo的函数，该函数将对象作为参数。然后，我们使用object destruction从对象中获取name，age和city属性的值并将其用作函数参数。

具有默认值的对象破坏

我们也可以将object destruction与default值一起使用，如果我们试图销毁的属性为undefined或未定义在对象中。

const person = {
  name: "Hasan",
  age: 30,
  city: "Cairo",
};

const { name, age, city, country = "Egypt" } = person;

console.log(country); // Egypt

在这里，我们定义了一个名为country的常数，该常数试图从person对象获取country属性的值，但不幸的是，country属性未在person对象中定义。因此，country的价值将为undefined。然后，我们将country的默认值设置为Egypt，因此，如果country的值为undefined，则country的值将为Egypt。

与REST操作员的对象破坏

我们也可以将object destruction与rest运算符一起使用，如果我们想从对象中获取其余属性，这将很有用。


const person = {
  name: "Hasan",
  age: 30,
  city: "Cairo",
  country: "Egypt",
};

const { name, ...rest } = person;

console.log(rest); // { age: 30, city: "Cairo", country: "Egypt" }

其余操作员也可以像功能参数一样工作，它将从对象中获取其余属性并将它们存储在新对象中。

用嵌套对象破坏对象

我们也可以将object destruction与嵌套对象一起使用。

const person = {
  name: "Hasan",
  age: 30,
  city: "Cairo",
  country: "Egypt",
  address: {
    street: "El-Maadi",
    building: 10,
  },
};

const { name, age, address: { street, building } } = person;

console.log(street); // El-Maadi

在这里，我们定义了一个称为address的对象，该对象包含两个属性，即street和building。然后，我们使用object destruction获取这些属性的值并将其存储在具有相同名称的变量中。

用嵌套对象和默认值的对象破坏

我们也可以将object destruction与嵌套对象和default值一起使用。

const person = {
  name: "Hasan",
  age: 30,
  city: "Cairo",
  country: "Egypt",
  address: {
    street: "El-Maadi",
    building: 10,
  },
};

const { name, age, address: { street, building, floor = 1 } } = person;

console.log(floor); // 1

在这里，我们定义了一个名为floor的常数，该常数试图从address对象获取floor属性的值，但不幸的是，floor属性未在address对象中定义。因此，floor的价值将为undefined。然后，我们将floor的默认值设置为1，因此，如果floor的值为undefined，则floor的值将为1。

带有嵌套对象和REST操作员的对象破坏以及默认值

让我们将上述所有内容混合在一起。

const person = {
  name: "Hasan",
  age: 30,
  city: "Cairo",
  country: "Egypt",
  address: {
    street: "El-Maadi",
    building: 10,
  },
};

const { name, age: myAge, address: { street, ...rest }, country = "Egypt" } = person;

console.log(name); // Hasan 
console.log(rest); // { building: 10 }
console.log(country); // Egypt
console.log(myAge); // 30

在这里，我们使用了object destruction的所有可用功能，我们使用了default值，rest操作员和嵌套对象。

我们将name作为普通对象破坏，我们得到了age并将其更名为myAge，我们将street作为nested对象破坏，我们从address对象中获取了rest，并将它们存储在一个名为rest的新对象中，我们得到了country并将默认值设置为Egypt，因为country属性未在person对象中定义。

。

- 结论

在本文中，我们在JavaScript中了解了object destruction，我们学会了如何使用它，我们学会了如何使用default值，rest运算符，重命名变量和嵌套对象。

。

â•给我买一杯咖啡。

如果您喜欢我的文章并看到对您有用，则可以buy me a coffee，它将帮助我继续前进并继续创建更多内容。

ð加入我们的社区

在Discord上加入我们的社区以获得帮助和支持（Node JS 2023频道）。

ð奖励内容ð

您可能会看这些文章，这肯定会提高您的知识和生产力。

一般主题

软件包和库

React JS软件包

课程（文章）