5 Möglichkeiten zur Verwendung der Destrukturierung in JavaScript

Das Lesen von Objekteigenschaften und der Zugriff auf Array-Elemente sind gängige Vorgänge. Durch die Zerstörung von Zuordnungen werden diese Vorgänge einfacher und sauberer. In diesem Artikel werde ich zusätzlich zur grundlegenden Verwendung auch fünf interessante Verwendungsmöglichkeiten der Destrukturierung in JavaScript vorstellen.

1. Variablen austauschen

Normalerweise erfordert die Methode des Austauschs zweier Variablen eine zusätzliche temporäre Variable, schauen wir uns das Beispiel an:

let a = 1;
let b = 2;
let temp;

temp = a;
a = b;
b = temp;

a; // => 2
b; // => 1

temp ist eine temporäre Variable, die zunächst speichert Der Wert von a. Weisen Sie dann a den Wert von b und dann b den Wert von temp zu. temp是一个临时变量，它先保存a的值。然后把b的值赋值给a，接着将temp值赋给 b。

如果使用解构的方式会更简单，不需要什么鬼的 temp 变量。

let a = 1;
let b = 2;

[a, b] = [b, a];

a; // => 2
b; // => 1

[a，b] = [b，a]是解构赋值，右边，创建了一个数组[b, a]，即[2,1]。这个数组2被赋值了给a，1被赋值给了b。

虽然这种方式也创建了临时数组，但这种方式给看起来至少更简洁，使用解构咱们还可以交换2个以上的变量。

let zero = 2;
let one = 1;
let two = 0;

[zero, one, two] = [two, one, zero];

zero; // => 0
one;  // => 1
two;  // => 2

2. 访问数组中元素

有种场景，咱们可能有一个为空的项数组。并且希望访问数组的第一个、第二个或第n个项，但如果该项不存在，则使用指定默认值。

通常会使用数组的length属性来判断

const colors = [];

let firstColor = 'white';
if (colors.length > 0) {
 firstColor = colors[0];
}

firstColor; // => 'white'

使用数组解构，可以更简洁的实现同样的效果：

const colors = [];

const [firstColor = 'white'] = colors;

firstColor; // => 'white'

const [firstColor = 'white'] = colors 解构将colors数组的第一个元素赋给firstColor变量。如果数组在索引0处没有任何元素，则分配“white”默认值。

当然还可以更灵活，如果只想访问第二个元素，可以这么做。

const colors = [];

const [, secondColor = 'black'] = colors;

secondColor; // => 'black'

注意解构左侧的逗号：它表示忽略第一个元素,secondColor使用colors数组中索引为1的元素进行赋值。

3.不可变操作

当我开始使用React和Redux时，被迫编写了一些遵守不可变性的代码。虽然一开始有些困难，但后来我看到了它的好处:更容易处理单向数据流。

不变性要求不能改变原始对象。幸运的是，解构可以以不可变的方式轻松实现某些操作。

const numbers = [1, 2, 3];

const [, ...fooNumbers] = numbers;

fooNumbers; // => [2, 3]
numbers; // => [1, 2, 3]

解构 [, ... fooNumbers] = numbers创建一个新的数组fooNumbers，fooNumbers 包含 numbers 元素，除了第一个元素。

numbers 数组没有发生变化，保持操作不变性。

以同样不可变的方式，可以从对象中删除属性，接着试着从对象big中删除foo属性：

const big = {
 foo: 'value Foo',
 bar: 'value Bar'
};

const { foo, ...small } = big;

small; // => { bar: 'value Bar' }
big; // => { foo: 'value Foo', bar: 'value Bar' }

4.解构 iterables

在前面几个例子中，对数组使用了解构，但是咱们可以对任何实现可迭代协议( iterable protocol)的对象进行解构。

许多原生基本类型和对象都是可迭代的: array, string, typed arrays, set 和 map。

如果不想局限于基本类型，通过实现可迭代协议，可以定制解构逻辑。

movies包含一个movie对象列表。在解构movies时，将title作为字符串获取是非常棒的。让咱们实现一个自定义迭代器。

const movies = {
  list: [
    { title: 'Heat' }, 
    { title: 'Interstellar' }
  ],
  [Symbol.iterator]() {
    let index = 0;
    return {
      next: () => {
        if (index < this.list.length) {
          const value = this.list[index++].title;
          return { value, done: false };
        }
        return { done: true };
      }
    };
  }
};

const [firstMovieTitle] = movies;
console.log(firstMovieTitle); // => 'Heat'

movies对象通过定义Symbol.iterator方法来实现可迭代协议，迭代器迭代title。

遵循iterable协议允许将movies对象分解为title，具体方法是读取第一个movies的title:const [firstMovieTitle] = movies。

5.解构动态属性

根据经验，通过属性对对象进行解构比数组解构更常见。

对象的解构看起来很更简单：

const movie = { title: 'Heat' };

const { title } = movie;

title; // => 'Heat'

const {title} = movie创建一个变量title，并将属性movie.title的值赋给它。

到对象解构时，我有点惊讶于咱们不必静态地知道属性名，可以使用动态属性名称来解构对象。

为了了解动态解构如何工作的，编写一个greet函数：

function greet(obj, nameProp) {
 const { [nameProp]: name = 'Unknown' } = obj;
 return `Hello, ${name}!`;
}

greet({ name: 'Batman' }, 'name'); // => 'Hello, Batman!'
greet({ }, 'name'); // => 'Hello, Unknown!'

使用2个参数调用greet() 函数：对象和属性名称。

在greet()内部，解构赋值const {[nameProp]：name ='Unknown'} = obj使用方括号的形式 [nameProp]读取动态属性名称，name变量接收动态属性值。

更好的做法是，如果属性不存在，可以指定默认值“Unknown

Es wäre einfacher, wenn Sie Destrukturierung verwenden würden, es ist keine temp-Variable erforderlich. 🎜rrreee🎜[a, b] = [b, a] ist eine destrukturierende Zuweisung. Auf der rechten Seite wird ein Array [b, a] erstellt, d. h. [2 ,1]. Dieses Array 2 wird a zugewiesen, und 1 wird b zugewiesen. 🎜🎜Obwohl diese Methode auch ein temporäres Array erstellt, sieht diese Methode zumindest prägnanter aus. Mithilfe der Destrukturierung können wir auch mehr als 2 Variablen austauschen. 🎜rrreee🎜🎜2. Auf Elemente in einem Array zugreifen🎜🎜🎜Es gibt ein Szenario, in dem wir möglicherweise ein leeres Elementarray haben. und möchten auf das erste, zweite oder n-te Element eines Arrays zugreifen, aber wenn das Element nicht vorhanden ist, verwenden Sie den angegebenen Standardwert. 🎜🎜Normalerweise wird das length-Attribut des Arrays verwendet, um 🎜rrreee🎜Mit der Array-Destrukturierung kann der gleiche Effekt prägnanter erzielt werden: 🎜rrreee🎜const [firstColor = 'white'] = farben Durch die Destrukturierung wird das erste Element des Arrays colors der Variablen firstColor zugewiesen. Wenn das Array kein Element am Index 0 hat, wird der Standardwert „white“ zugewiesen. 🎜🎜Natürlich geht es flexibler. Wenn Sie nur auf das zweite Element zugreifen möchten, können Sie dies tun. 🎜rrreee🎜Achten Sie auf das Komma auf der linken Seite der Dekonstruktion: Es bedeutet, das erste Element zu ignorieren und das Element mit dem Index 1 im Array colors für secondColor Zuweisung. 🎜🎜🎜3. Unveränderliche Operationen🎜🎜🎜Als ich anfing, React und Redux zu verwenden, war ich gezwungen, Code zu schreiben, der die Unveränderlichkeit respektierte. Obwohl es anfangs etwas schwierig war, erkannte ich später die Vorteile: Es war einfacher, den Datenfluss in eine Richtung zu handhaben. 🎜🎜Unveränderlichkeit erfordert, dass das ursprüngliche Objekt nicht geändert werden kann. Glücklicherweise erleichtert die Destrukturierung die unveränderliche Implementierung bestimmter Operationen. 🎜rrreee🎜Durch die Destrukturierung von [, ... fooNumbers] = Zahlen wird ein neues Array fooNumbers, fooNumbers mit Zahlen erstellt > Elemente, außer dem ersten Element. 🎜🎜numbers Das Array hat sich nicht geändert und die Operation bleibt unverändert. 🎜🎜Auf die gleiche unveränderliche Weise können Sie Attribute aus dem Objekt löschen und dann versuchen, das Attribut foo aus dem Objekt big zu löschen: 🎜rrreee🎜🎜4 iterables🎜 🎜🎜In den vorherigen Beispielen wurde die Destrukturierung für Arrays verwendet, aber wir können jedes Objekt destrukturieren, das das iterierbare Protokoll implementiert. 🎜🎜Viele native primitive Typen und Objekte sind iterierbar: array, string, typed arrays, set und Karte. 🎜🎜Wenn Sie sich nicht auf Basistypen beschränken möchten, können Sie die Destrukturierungslogik anpassen, indem Sie das iterierbare Protokoll implementieren. 🎜🎜movies enthält eine Liste von movie-Objekten. Bei der Dekonstruierung von Filmen ist es hilfreich, Titel als Zeichenfolge zu erhalten. Lassen Sie uns einen benutzerdefinierten Iterator implementieren. 🎜rrreee🎜Das Objekt movies implementiert das iterierbare Protokoll, indem es die Methode Symbol.iterator definiert, und der Iterator iteriert title. 🎜🎜Das Befolgen des iterierbaren Protokolls ermöglicht die Zerlegung von Filmen-Objekten in Titel durch Lesen des ersten Filme Titel:<code>const [firstMovieTitle] = Filme. 🎜🎜🎜5. Destrukturierung dynamischer Eigenschaften 🎜🎜🎜Als Faustregel gilt, dass die Destrukturierung von Objekten nach Eigenschaften häufiger vorkommt als die Destrukturierung von Arrays. 🎜🎜Die Destrukturierung des Objekts sieht ganz einfach aus: 🎜rrreee🎜const {title} = movieErstelle eine Variable title und setze das Attribut movie.title code Der Wert von code> wird ihm zugewiesen. 🎜🎜Bei der Objektdestrukturierung war ich ein wenig überrascht, dass wir die Eigenschaftsnamen nicht statisch kennen müssen und dynamische Eigenschaftsnamen verwenden können, um das Objekt zu dekonstruieren. 🎜🎜Um zu verstehen, wie dynamische Destrukturierung funktioniert, schreiben Sie eine <code>greet-Funktion: 🎜rrreee🎜Rufen Sie die greet()-Funktion mit 2-Argumenten auf: Objekt und Attributnamen. 🎜🎜Innerhalb von greet() verwendet die Destrukturierungszuweisung const {[nameProp]：name ='Unknown'} = obj die Form von eckigen Klammern [nameProp]Lesen Sie den Namen des dynamischen Attributs und die Variable <code>name empfängt den Wert des dynamischen Attributs. 🎜🎜Ein besserer Ansatz besteht darin, den Standardwert „Unbekannt“ anzugeben, wenn das Attribut nicht vorhanden ist. 🎜

6. Fazit

Zerstörung ist sehr nützlich, wenn Sie auf Objekteigenschaften und Array-Elemente zugreifen möchten.

Zusätzlich zur grundlegenden Verwendung kann der Array-Destruktor auch bequem Variablen austauschen, auf Array-Elemente zugreifen und einige unveränderliche Operationen ausführen.

JavaScript bietet größere Möglichkeiten, da Sie mithilfe von Iteratoren benutzerdefinierte Zerstörungslogik definieren können.

Ursprüngliche Adresse: https://dmitripavlutin.com/5-interesting-uses-javascript-destructuring/

Weitere Programmierkenntnisse finden Sie unter: Programmieren lernen! !

Das obige ist der detaillierte Inhalt von5 Möglichkeiten zur Verwendung der Destrukturierung in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!