我需要一些JavaScript功能和概念的复习，所以我去对其中的几个进行了一些阅读。在今天的文章中，我们将研究破坏性的任务。如果您尚未知道，它是使用阵列和对象的众多功能之一，该功能已在ES6（2015年JavaScript）中引入JavaScript。本文是我从有关感兴趣主题的各种资源中收集的知识的简洁集合。没有任何长时间的谈话，让我们开始做生意！

什么是破坏性？

破坏性分配语法是一种JavaScript表达式，可让您从数组或对象中的属性将值解开为不同的变量。破坏并不意味着破坏性或“被摧毁”。它被称为破坏分配，因为它通过将项目复制成变量来破坏性。原始数组或对象本身仍未修改。破坏可以大大减少操纵这些结构中数据所需的代码线。破坏性有两种类型：对象破坏和数组破坏：

对象破坏

对象破坏使您可以使用对象属性作为其值创建新变量。考虑以下示例；代表学生使用id，name和dateOfBirth的对象。

const student = {
  id: 53783,
  name: 'Maxwell Johson',
  dateOfBirth: '08/05/1997',
}

传统上，如果您要为每个属性创建一个新变量，则必须单独分配每个变量，如果您问我，这将是很多重复。对我在说的话有很多事情：

// Create variables from Object properties
const id = student.id
const name = student.name
const dateOfBirth = student.dateOfBirth

随着对象破坏性，所有这些都可以用一行代码来完成。通过将每个变量封闭在curly brackets {}中，JavaScript将从每个属性中创建具有相同名称的新变量：

const { id, name, dateOfBirth } = student

将这些值记录到控制台，您会发现变量的值是student对象的属性的值。

重要的是要注意，破坏对象不会影响原始对象的更改（即未修改原始对象）。如果您调用原始student对象，您会发现其属性没有变化。

对象破坏的默认分配创建与对象属性相同名称的新变量。如果您不希望新变量具有与对象属性相同的名称，则可以选择通过使用colon（:）来决定新变量的名称，以确定名称，如以下示例所示：< br>

var student = {    // Object we want to destructure
    id: 4678,
    name: 'Dave Smalls',
    dateOfBirth: '01/09/2003'
};

// Destructuring the object into variables with
// different names than the object variables
var { id: studentId, name: studentName, dateOfBirth: dob } = student;
console.log( studentId, studentName, dob);

我们还可以将默认值分配给我们要破坏的对象中可能不存在的变量。这将防止变量分配给它的不确定值。下面的代码证明了这一点：

var student = {    // Object we want to destructure
    id: 4678,
    name: 'Dave Smalls',
    dateOfBirth: '01/09/2003'
};

// Destructuring the object into variables without 
// assigning default values 
var { name, dateOfBirth, nationality } = student;
console.log("Without setting default values")
console.log(name, dateOfBirth, nationality);

// Destructuring the object into variables by 
// assigning default values 
var { name = 'default name', 
      dateOfBirth = 'default date of birth', 
      nationality = 'default nationality' } = student;
console.log("\n After setting default values")
console.log( name, dateOfBirth, nationality);

物体破坏的优点

它允许我们编写更瘦的代码，因为它允许我们捆绑一个对象内的变量，然后访问另一个函数中的单个元素而无需使用点表示法。
它确保代码不会破裂，以防万一丢失，因为它允许我们为特定变量设置默认值
使用将对象传递到具有很多值的函数的大框架时，如果我们只需要一个或两个值，我们就可以破坏它。这有助于使代码更易于使用。

缺点

在JavaScript中使用破坏对象也有一些缺点。其中一些是：

如果一个对象具有很多变量，那么它会破坏它变得非常乏味。在这种情况下，使用点表示法。
以防对象与预期的不同，我们不考虑这一点，它可能会导致代码中的错误。

阵列破坏

数组破坏使您可以使用数组项作为值创建新变量。阵列破坏的语法如下：

// we have an array with the name and surname
var arr = ["John", "Doe"]

// destructuring assignment
// sets firstName = arr[0]
// and surname = arr[1]
var [firstName, surname] = arr;

console.log(firstName); // John
console.log(surname);  // Smith

您可以看到，语法非常简单。这只是编写以下内容的较短方法：

// var [firstName, surname] = arr;
var firstName = arr[0];
var surname = arr[1];

在阵列破坏性中，阵列的不必要物品也可以通过添加额外的逗号来丢弃。请参阅下面的示例：

// second element is skipped by using an extra comma
var [firstName, , title] = ["Julius", "Caesar", "Consul", "of the Roman Republic"];

console.log( title ); // Consul

在上面的代码中，跳过数组的第二项，第三个分配给title，并且其余的数组项目也被跳过，因为它们没有任何变量。

如果我们要破坏的数组比左侧的变量列表短，则不会出现错误。缺乏值分配了undefined：

var [firstName, surname, age] = ['Julius', 'Caesar'];

console.log(firstName); // Julius
console.log(surname); // Caesar
console.log(age); // undefined

如果我们希望默认值替换缺失的值，我们可以使用=：
提供它

// default values
let [name = "Bruno", surname = "Anonymous"] = ["Julius"];

console.log(name);    // Julius (from array)
console.log(surname); // Anonymous (default used)

默认值可以是更复杂的表达式甚至函数调用。仅在未提供该值的情况下才能评估它们。

结论

许多其他编程语言没有用于破坏的相应语法的事实可能会使此功能既适合新的JavaScript开发人员，又是来自另一种语言的人。坚持不懈，随着时间的流逝，您将掌握它。希望在另一篇文章中尽快与您见面。