Parlons de 5 façons intéressantes d'utiliser la déconstruction JS

Cet article parlera de 5 utilisations intéressantes de la déstructuration JavaScript (Destructuring).

1. Échanger des variables

La manière courante d'échanger deux variables consiste à avoir besoin d'une variable temporaire supplémentaire. Examinons un scénario simple :

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

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

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

temp</code > est une variable temporaire. , qui enregistre la valeur de <code>a, puis attribue la valeur de b à a, et enfin attribue à temp< la valeur de < code>a enregistré dans /code> est attribué à b, complétant ainsi l'échange. 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
L'affectation de déstructuration

simplifie l'échange de variables sans avoir besoin de créer explicitement des variables temporaires : 🎜

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] est une affectation de déstructuration. A droite, 🎜 crée un tableau [b, a]🎜, c'est-à-dire [2,1], et le premier élément de ce tableau (c'est-à-dire la valeur 2) est attribué à < code>a, le deuxième élément (c'est-à-dire la valeur 1) est attribué à b, complétant ainsi l'échange. 🎜 Bien que cette méthode crée toujours un tableau temporaire, cette façon d'échanger des variables semble plus propre. 🎜 Non seulement cela, cette méthode peut également échanger plus de 2 variables, comme suit : 🎜rrreee🎜 Vous pouvez échanger autant de variables que vous le souhaitez ! Cependant, l’échange de deux variables est le scénario le plus courant. 🎜🎜🎜2. Accéder à l'élément du tableau 🎜🎜🎜Vous disposez d'un tableau qui est peut-être vide. Vous souhaitez accéder au 1er, 2ème ou nième élément du tableau, mais obtenir une valeur par défaut si l'élément n'existe pas. 🎜 Généralement, vous utiliserez la propriété length d'un tableau : 🎜rrreee🎜Utiliser la déstructuration de tableau pour obtenir le même effet nécessite moins de code : 🎜rrreee🎜const [firstColor = 'white'] = colours La déstructuration < code Le premier élément du tableau >colors est affecté à la variable firstColor. Si le tableau ne contient aucun élément à l'index 0, la valeur par défaut "blanc" est attribuée. 🎜 Plus de flexibilité est apportée ici, si vous souhaitez accéder uniquement au deuxième élément, cela est également possible : 🎜rrreee🎜🎜 Notez la virgule à gauche de la déstructuration 🎜 : cela revient à ignorer le premier élément. secondColor reçoit la valeur de l'élément à l'index 1 dans le tableau colors. 🎜🎜🎜3. Opérations immuables 🎜🎜🎜Quand j'ai commencé à utiliser React et plus tard Redux, j'ai été obligé d'écrire du code impliquant l'immuabilité (je veux dire ici garder l'objet d'origine inchangé). Même si cela a été un peu difficile au début, j'ai ensuite vu ses avantages : 🎜Il est plus facile de gérer un flux de données unidirectionnel🎜. 🎜 L'immuabilité signifie qu'il est interdit de changer l'objet. Heureusement, la déstructuration peut vous aider à mettre en œuvre facilement certaines opérations de manière immuable. 🎜 La déstructuration est combinée avec l'opérateur reste (...) pour supprimer le premier élément du tableau : 🎜rrreee🎜[, ...fooNumbers] = nombresDéstructuration, Création Crée un nouveau tableau fooNumbers, qui contient tous les éléments du tableau numbers à l'exception du premier élément. Le tableau numbers n'a pas changé, maintenant l'invariance opérationnelle. 🎜 De la même manière immuable, vous pouvez supprimer les propriétés des objets. Essayons de supprimer l'attribut foo du big object : 🎜rrreee🎜L'affectation de déstructuration combinée à l'opérateur object rest crée un nouvel objet small qui contient l'objet big Tous les attributs sauf l'attribut foo. 🎜🎜🎜4. Itérables de déstructuration🎜🎜🎜Dans la section précédente, la déstructuration a été appliquée au tableau. Mais vous pouvez déstructurer n'importe quel objet qui implémente le protocole itérable. 🎜 De nombreux types et objets primitifs natifs sont itérables : tableaux, chaînes, tableaux typés, ensembles et cartes. 🎜 Par exemple, vous pouvez déconstruire une chaîne en plusieurs caractères : 🎜rrreee🎜 Vous n'êtes pas limité aux types natifs En implémentant le protocole itérable, vous pouvez personnaliser la logique de déstructuration. 🎜movies contient une liste d'objets movie. Lors de la déconstruction de films, c'est génial d'obtenir le titre du film sous forme de chaîne. Implémentons un itérateur personnalisé : les objets 🎜rrreee🎜movies implémentent le protocole itérable en définissant Symbol.iterator. Méthode itératrice : parcourez les titres des films. 🎜 Suivre le protocole d'itération permet de déconstruire l'objet movies en titres. La méthode spécifique pour obtenir le titre du premier film est : const [firstMovieTitle] = movies. 🎜🎜🎜5. Déstructuration des propriétés dynamiques🎜🎜🎜D'après mon expérience, la déstructuration d'objets via des propriétés est plus courante que la déstructuration de tableaux. La déstructuration de l'objet semble simple : 🎜rrreee🎜const {title} = movieCréez une variable title et définissez la valeur de l'attribut movie.title lui est attribué. 🎜 Quand j'ai lu pour la première fois sur la déstructuration d'objets, j'ai été un peu surpris qu'il n'y ait pas besoin de connaître les noms de propriétés de manière statique, vous pouvez utiliser des noms de propriétés dynamiques pour déstructurer un objet ! 🎜

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视频教程、编程视频】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!