Lassen Sie uns über 5 interessante Möglichkeiten zur Verwendung der JS-Dekonstruktion sprechen

In diesem Artikel erfahren Sie mehr über 5 interessante Einsatzmöglichkeiten der JavaScript-Destrukturierung (Destrukturierung).

1. Variablen tauschen

Der übliche Weg, zwei Variablen auszutauschen, besteht darin, eine zusätzliche temporäre Variable zu benötigen:

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

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

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

temp</code > ist eine temporäre Variable , das den Wert von <code>a speichert, dann a den Wert von b zuweist und schließlich temp< den Wert von < zuweist Der in /code> gespeicherte Code>a wird b zugewiesen, wodurch der Austausch abgeschlossen wird. temp是一个临时变量，它保存a的值，然后将b的值赋给a，最后再把temp中保存的a的值赋给b，完成了交换。
解构赋值使变量交换更简单，不需要显式创建临时变量：

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. 访问数组项（Access array item）

你有一个可能为空的数组。你希望访问数组的第1个、第2个或第n个元素，但如果该元素不存在，则获取一个默认值。
通常你会使用数组的长度属性：

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. 不变的操作（Immutable operations）

当我开始使用React和后来的Redux时，我被迫编写了一些涉及不可变性的代码（这里的意思是保持原对象不变）。虽然一开始有些困难，但后来我看到了它的好处：更容易处理单向数据流。
不变性是指禁止改变对象。幸运的是，解构可以帮助你轻松地以不可变的方式实现某些操作。
解构与rest操作符（...）结合来删除数组的第一个元素：

const numbers = [1, 2, 3];

const [, ...fooNumbers] = numbers;

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

[, ...fooNumbers] = numbers解构，创建了一个新的数组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' }

解构赋值与对象rest操作符相结合，创建一个新对象small，它包含了big对象中除foo属性外的所有属性。

4. 解构可迭代对象（Destructuring iterables）

在前面的小节中，对数组应用了解构。但是你可以对任何实现可迭代协议（iterable protocol）的对象进行解构。
许多原生基本类型和对象都是可迭代的：数组（arrays）、字符串（string）、类数组（typed arrays）、集合（set）和映射（map）。
例如，你可以把一个字符串解构成几个字符:

const str = 'cheese';

const [firstChar = ''] = str;

firstChar; // => 'c'

你并不用局限于原生的类型，通过实现可迭代协议，可以定制解构逻辑。
movies包含一个movie对象的列表。在解构movies时，将电影标题作为字符串来获取是非常棒的。让我们实现一个自定义迭代器：

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); // => &#39;Heat&#39;

movies对象通过定义Symbol.iterator来实现可迭代协议。迭代器的方法：迭代电影的标题。
遵循迭代协议允许将movies对象解构为标题，获取第一部电影标题的具体方法是:const [firstMovieTitle] = movies。

5. 解构动态属性（Destructuring dynamic properties）

根据我的经验，通过属性对对象进行解构比数组解构更常见。对象的解构看起来很简单：

const movie = { title: 'Heat' };

const { title } = movie;

title; // => 'Heat'

const {title} = movie创建一个变量title，并将属性movie.title
Destrukturierende Zuweisung

erleichtert den Variablenaustausch, ohne dass temporäre Variablen explizit erstellt werden müssen: 🎜

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

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

🎜[a, b] = [b, a] ist eine destrukturierende Zuweisung. Auf der rechten Seite erstellt 🎜 ein Array [b, a]🎜, also [2,1], und das erste Element dieses Arrays (also der Wert 2) wird < zugewiesen code>a, das zweite Element (d. h. der Wert ist 1) wird b zugewiesen, wodurch der Austausch abgeschlossen wird. 🎜 Obwohl diese Methode immer noch ein temporäres Array erstellt, sieht diese Art des Variablenaustauschs sauberer aus. 🎜 Darüber hinaus kann diese Methode wie folgt auch mehr als 2 Variablen austauschen: 🎜rrreee🎜 Sie können so viele Variablen austauschen, wie Sie möchten! Der Austausch zweier Variablen ist jedoch das häufigste Szenario. 🎜🎜🎜2. Auf Array-Element zugreifen 🎜🎜🎜Sie haben ein Array, das möglicherweise leer ist. Sie möchten auf das 1., 2. oder n-te Element des Arrays zugreifen, erhalten aber einen Standardwert, wenn das Element nicht vorhanden ist. 🎜 Normalerweise würden Sie die Längeneigenschaft eines Arrays verwenden: 🎜rrreee🎜Um den gleichen Effekt mit der Array-Destrukturierung zu erzielen, ist weniger Code erforderlich: 🎜rrreee🎜const [firstColor = 'white'] = farben Die Destrukturierung wird < code Das erste Element des Arrays >colors wird der Variablen firstColor zugewiesen. Wenn das Array keine Elemente am Index 0 hat, wird der Standardwert „weiß“ zugewiesen. 🎜 Hier ist mehr Flexibilität gegeben, wenn Sie nur auf das zweite Element zugreifen möchten, ist dies auch möglich: 🎜rrreee🎜🎜 Beachten Sie das Komma links von der Destrukturierung 🎜: Es bedeutet, das erste Element zu ignorieren. secondColor wird der Wert des Elements an Index 1 im Array colors zugewiesen. 🎜🎜🎜3. Unveränderliche Operationen 🎜🎜🎜Als ich anfing, React und später Redux zu verwenden, war ich gezwungen, Code zu schreiben, der Unveränderlichkeit beinhaltete (hier meine ich, das ursprüngliche Objekt unverändert zu lassen). Obwohl es anfangs etwas schwierig war, erkannte ich später die Vorteile: 🎜Der einseitige Datenfluss ist einfacher zu handhaben🎜. 🎜 Unveränderlichkeit bedeutet, dass es verboten ist, das Objekt zu verändern. Glücklicherweise kann Ihnen die Destrukturierung dabei helfen, bestimmte Vorgänge einfach und unveränderlich zu implementieren. 🎜 Destrukturierung wird mit dem Rest-Operator (...) kombiniert, um das erste Element des Arrays zu löschen: 🎜rrreee🎜[, ...fooNumbers] = ZahlenDestrukturierung, Creating Erstellt ein neues Array fooNumbers, das alle Elemente im Array numbers außer dem ersten Element enthält. Das Array numbers hat sich nicht geändert, sodass die operative Invarianz erhalten bleibt. 🎜 Auf die gleiche unveränderliche Weise können Sie Eigenschaften von Objekten entfernen. Versuchen wir, das foo-Attribut aus dem großen Objekt zu entfernen: 🎜rrreee🎜Die Destrukturierungszuweisung in Kombination mit dem Objektrestoperator erstellt ein neues Objekt small, das das big-Objekt enthält. Alle Attribute außer das foo-Attribut. 🎜🎜🎜4. Iterables destrukturieren🎜🎜🎜Im vorherigen Abschnitt wurde die Destrukturierung auf das Array angewendet. Sie können jedoch jedes Objekt zerstören, das das iterierbare Protokoll implementiert. 🎜 Viele native primitive Typen und Objekte sind iterierbar: Arrays, Strings, typisierte Arrays, Mengen und Karten. 🎜 Sie können beispielsweise eine Zeichenfolge in mehrere Zeichen zerlegen: 🎜rrreee🎜 Sie sind nicht auf native Typen beschränkt. Durch die Implementierung des iterierbaren Protokolls können Sie die Destrukturierungslogik anpassen. 🎜movies enthält eine Liste von movie-Objekten. Bei der Dekonstruierung von Filmen ist es hilfreich, den Filmtitel als Zeichenfolge zu erhalten. Lassen Sie uns einen benutzerdefinierten Iterator implementieren: 🎜rrreee🎜movies-Objekte implementieren das iterierbare Protokoll, indem sie Symbol.iterator definieren. Iterator-Methode: Iterieren Sie über die Titel von Filmen. 🎜 Das Befolgen des Iterationsprotokolls ermöglicht die Zerlegung des movies-Objekts in Titel. Die spezifische Methode zum Abrufen des Titels des ersten Films ist: const [firstMovieTitle] = movies. 🎜🎜🎜5. Destrukturierung dynamischer Eigenschaften🎜🎜🎜Nach meiner Erfahrung ist die Destrukturierung von Objekten durch Eigenschaften häufiger als die Array-Destrukturierung. Die Destrukturierung des Objekts scheint einfach zu sein: 🎜rrreee🎜const {title} = movieErstellen Sie eine Variable title und legen Sie den Attributwert movie.title fest ist ihm zugeordnet. 🎜 Als ich zum ersten Mal über die Destrukturierung von Objekten las, war ich ein wenig überrascht, dass man die Eigenschaftsnamen nicht statisch kennen muss, sondern dynamische Eigenschaftsnamen verwenden kann, um ein Objekt zu destrukturieren! 🎜

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

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

greet()函数有两个参数：对象和属性名。在greet()函数内部，解构赋值const {[nameProp]: name = 'Unknown'} = obj使用中括号[nameProp]读取动态属性名，name变量作为别名接收动态属性值。如果属性不存在，你还可以给它赋一个默认值Unknown。

6. 总结

如果你想访问对象属性和数组元素，那么解构非常有用。
在基本用法之上，数组解构便于交换变量、访问数组项、执行一些不可变的操作。
JavaScript提供了更大的可能性，因为你可以使用迭代器定义自定义的解构逻辑。

本文翻译自：5 Interesting Uses of JavaScript Destructuring

地址：https://dmitripavlutin.com/5-interesting-uses-javascript-destructuring/

【相关推荐：javascript视频教程、编程视频】

Das obige ist der detaillierte Inhalt vonLassen Sie uns über 5 interessante Möglichkeiten zur Verwendung der JS-Dekonstruktion sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!