Vous faire comprendre l'affectation de déstructuration JavaScript

Cet article vous apporte des connaissances pertinentes sur javascript, qui présente principalement des problèmes liés à l'affectation de déstructuration, y compris la déstructuration des tableaux, la structure des objets et l'utilisation de la déstructuration, etc.

Recommandations associées : Tutoriel d'apprentissage Javascript

Concepts

ES6 fournit un mode d'affectation plus concis pour extraire les valeurs des tableaux et des objets, appelé déstructuration

Exemple :

[a, b] = [50, 100];
console.log(a);
// expected output: 50
console.log(b);
// expected output: 100

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(rest);
// expected output: [30, 40, 50]

Déstructuration de tableaux

La déstructuration d'un tableau est très simple et concise. Utilisez un littéral de tableau sur le côté gauche de l'expression d'affectation. Chaque nom de variable dans le littéral de tableau est mappé au même élément d'index du tableau déstructuré

Qu'est-ce que cela signifie ? comme suit Tout comme cet exemple, les éléments du tableau de gauche obtiennent respectivement les valeurs des index correspondants du tableau déstructuré de droite

let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3

Déclaration d'affectation séparée

Vous pouvez déstructurer et attribuer des valeurs ​​séparément via la déclaration de variable

Exemple : Déclarez les variables et attribuez des valeurs séparément

// 声明变量
let a, b;
// 然后分别赋值
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

Déconstruisez la valeur par défaut

Si la valeur déconstruite est non définie, vous pouvez définir la valeur par défaut : undefined，可以设置默认值：

let a, b;
// 设置默认值
[a = 5, b = 7] = [1];
console.log(a); // 1
console.log(b); // 7

在上面的例子中，我们给a和b均设置了默认值
这种情况下，如果a或b的值是undefined，它将把设置的默认值赋给相应变量（5赋给a，7赋给b）

交换变量值

以往我们进行两个变量的交换，都是使用

//交换abc = a;a = b;b = c;

或者异或的方法

然而在解构赋值中，我们可以在一个解构表达式中交换两个变量值

let a = 1;let b = 3;//交换a和b的值[a, b] = [b, a];console.log(a); // 3console.log(b); // 1

解构函数返回的数组

我们可以直接解构一个返回值为数组的函数

function c() {
  return [10, 20];}let a, b;[a, b] = c();console.log(a); // 10console.log(b); // 20

在上面的例子中，**c()**的返回值[10，20]可以在单独的同一行代码中使用解构

忽略返回值（或跳过某一项）

你可以有选择性的跳过一些不想得到的返回值

function c() {
  return [1, 2, 3];}let [a, , b] = c();console.log(a); // 1console.log(b); // 3

赋值数组剩余值给一个变量

当你使用数组解构时，你可以把赋值数组剩余的部分全部赋给一个变量

let [a, ...b] = [1, 2, 3];console.log(a); // 1console.log(b); // [2, 3]

这样的话b也会变成一个数组了，数组中的项是剩余的所有项

注意：
这里要小心结尾是不能再写逗号的，如果多了一个逗号将会报错

let [a, ...b,] = [1, 2, 3];// SyntaxError: rest element may not have a trailing comma

嵌套数组解构

像对象一样，数组也可以进行嵌套解构

示例：

const color = ['#FF00FF', [255, 0, 255], 'rgb(255, 0, 255)'];
// Use nested destructuring to assign red, green and blue
// 使用嵌套解构赋值 red, green, blue
const [hex, [red, green, blue]] = color;
console.log(hex, red, green, blue); // #FF00FF 255 0 255

字符串解构

在数组解构中，解构的目标若为可遍历对象，皆可进行解构赋值，可遍历对象即实现Iterator接口的数据

let [a, b, c, d, e] = 'hello';/*
a = 'h'
b = 'e'
c = 'l'
d = 'l'
e = 'o'
*/

对象解构

基础对象解构

let x = { y: 22, z: true };
let { y, z } = x; // let {y:y,z:z} = x;的简写

console.log(y); // 22
console.log(z); // true

赋值给新变量名

当使用对象解构时可以改变变量的名称

let o = { p: 22, q: true };
let { p: foo, q: bar } = o;

console.log(foo); // 22
console.log(bar); // true

如上代码var {p: foo} = o 获取对象 o 的属性名 p，然后赋值给一个名称为 foo 的变量

解构默认值

如果解构取出的对象值是undefined，我们可以设置默认值

let { a = 10, b = 5 } = { a: 3 };

console.log(a); // 3
console.log(b); // 5

赋值给新对象名的同时提供默认值

前面提到过我们赋值给新的对象名，这里我们可以给这个新的对象名提供一个默认值，如果没有解构它，就会自动使用默认值

let { a: aa = 10, b: bb = 5 } = { a: 3 };

console.log(aa); // 3
console.log(bb); // 5

同时使用数组和对象解构

在结构中数组和对象可以一起使用

const props = [
  { id: 1, name: 'Fizz' },
  { id: 2, name: 'Buzz' },
  { id: 3, name: 'FizzBuzz' },
];

const [, , { name }] = props;
console.log(name); // "FizzBuzz"

不完全解构

let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;//不解构x

// x = undefined
// y = 'world'

赋值剩余值给一个对象

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}

嵌套对象解构（可忽略解构）

let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'hello'
// y = 'world'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj;//忽略y
// x = 'hello'

注意事项

小心使用已声明变量进行解构

错误示范：

let x;{x} = {x: 1};

JavaScript引擎会将{x}

let x;({x} = {x: 1});

Dans l'exemple ci-dessus, nous définissons des valeurs par défaut pour a et b De cette façon. Dans ce cas, si la valeur de a ou b est indéfini, il attribuera la valeur par défaut définie à la variable correspondante (5 est affecté à a, 7 est affecté à b)

Échanger les valeurs des variables

Dans le passé, lorsque nous échangeions deux variables, nous utilisions toujours

function add([x, y]) {
	return x + y;}add([1, 2]);

ou

XOR

Cependant, en déstructuration. affectation, on peut échanger deux valeurs de variables​​dans une expression déstructurante

let x = 1;
let y = 2;
[x, y] = [y, x];

La fonction de déstructuration renvoie Le tableau

On peut directement déstructurer une fonction dont la valeur de retour est un tableau

// 返回一个数组function example() {
  return [1, 2, 3];}let [a, b, c] = example();
  // 返回一个对象
  function example() {
  return {
    foo: 1,
    bar: 2
  };
  }let { foo, bar } = example();

Dans l'exemple ci-dessus, le la valeur de retour [10, 20] de **c()** peut être déstructurée dans une ligne de code distincte

Ignorez la valeur de retour (ou ignorez un élément)

Vous pouvez ignorer de manière sélective certaines valeurs de retour indésirables

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

Attribuez la valeur restante du tableau à une variable

🎜🎜Lorsque vous utilisez la déstructuration de tableau Lorsque vous ne pouvez plus écrire de virgules S'il y a une virgule supplémentaire, une erreur sera signalée🎜rrreee🎜🎜Déstructuration de tableau imbriqué🎜🎜. 🎜Comme les objets, les tableaux peuvent également être déconstruits imbriqués🎜🎜🎜Exemple : 🎜🎜rrreee🎜🎜Déstructuration de chaînes🎜 🎜🎜Dans la déstructuration de tableaux, si la cible de la déstructuration est un objet traversable, il peut être déstructuré et attribué. les données qui implémentent l'interface Iterator🎜rrreee🎜Déstructuration d'objet🎜🎜🎜Déstructuration d'objet de base🎜🎜rrreee🎜🎜Attribué au nouveau nom de variable🎜🎜🎜Vous pouvez changer le nom de la variable lors de l'utilisation de la déstructuration d'objet🎜rrreee🎜Le code ci-dessus < code>var {p: foo} = o obtient le nom d'attribut p de l'objet o, puis l'affecte à une valeur nommée foo La variable 🎜🎜🎜valeur par défaut de déstructuration🎜🎜🎜Si la valeur de l'objet est supprimée par la déstructuration est non définie, nous pouvons définir la valeur par défaut 🎜rrreee🎜🎜l'attribuer au nouvel nom d'objet et fournir la valeur par défaut 🎜🎜🎜avant Comme mentionné précédemment, nous attribuons une valeur à un nouveau nom d'objet . Ici, nous pouvons fournir une valeur par défaut pour ce nouveau nom d'objet s'il n'est pas déstructuré, la valeur par défaut sera automatiquement utilisée🎜rrreee🎜🎜Utilisez à la fois la déstructuration de tableau et d'objet🎜🎜🎜 dans Les tableaux et les objets dans les structures peuvent être utilisés ensemble. 🎜rrreee🎜🎜Déstructuration incomplète🎜🎜rrreee🎜Affectation de la valeur restante à un objet🎜rrreee🎜🎜Déstructuration d'objets imbriqués (la déstructuration peut être ignorée)🎜🎜rrreee🎜Notes🎜🎜🎜À utiliser avec précaution Déclarer les variables pour la déstructuration 🎜🎜🎜🎜Erreur exemple : 🎜🎜rrreee🎜Le moteur JavaScript interprétera {x} comme un bloc de code, ce qui entraînera une erreur de syntaxe. Il faut éviter d'écrire des accolades en début de ligne, pour éviter que JavaScript ne l'interprète. sous forme de bloc de code 🎜🎜Écriture correcte : 🎜🎜rrreee🎜Écriture correcte : mettez l'intégralité de l'instruction d'affectation de déstructuration entre parenthèses et vous pourrez l'exécuter correctement🎜🎜🎜Affectation de déstructuration des paramètres de fonction🎜🎜🎜Les paramètres de fonction peuvent également être attribués en utilisant destructuring🎜rrreee🎜Dans le code ci-dessus, le paramètre de la fonction add est un tableau en surface, mais lors du passage du paramètre, le paramètre du tableau est déstructuré en variables x et y. Pour l'intérieur de la fonction, c'est pareil. car Passer directement x et y est la même chose🎜🎜Le but de la déstructuration🎜🎜Il existe de nombreuses utilisations de l'affectation de déstructuration🎜🎜🎜Échanger les valeurs des variables🎜🎜rrreee🎜Le code ci-dessus échange les valeurs de x et y. Cette méthode d'écriture est non seulement concise mais aussi facile à lire, la sémantique est claire🎜🎜🎜Renvoyer plusieurs valeurs de la fonction🎜🎜🎜La fonction ne peut renvoyer qu'une seule valeur. Si nous voulons renvoyer plusieurs valeurs, nous. ne peut mettre ces valeurs​​dans un tableau ou un objet et les renvoyer que lorsque nous avons la mission de déstructuration, récupérer ces valeurs​​à partir d'un objet ou d'un tableau, c'est comme choisir quelque chose dans un sac 🎜.

// 返回一个数组function example() {
  return [1, 2, 3];}let [a, b, c] = example();
  // 返回一个对象
  function example() {
  return {
    foo: 1,
    bar: 2
  };
  }let { foo, bar } = example();

提取JSON数据

解构赋值对于提取JSON对象中的数据，尤其有用

示例：

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

使用上面的代码，我们就可以快速取出JSON数据中的值

相关推荐：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!