JavaScript
Zerstörungsauftrag

Einführung

Syntax

• sei [x, y] = [1, 2]
• let [first, ... rest] = [1, 2, 3, 4]
• sei [eins, drei] = [1, 2, 3]
• let [val = 'default value'] = []
• sei {a, b} = {a: x, b: y}
• {a: {c}} = {a: {c: 'verschachtelt'}, b: y}
• {b = 'Standardwert'} = {a: 0}

Bemerkungen

Argumente für die Zerstörungsfunktion

Eigenschaften aus einem Objekt ziehen, das an eine Funktion übergeben wird. Dieses Muster simuliert benannte Parameter, anstatt sich auf die Argumentposition zu verlassen.

let user = {
    name: 'Jill',
    age: 33,
    profession: 'Pilot'
}    

function greeting ({name, profession}) {
    console.log(`Hello, ${name} the ${profession}`)
}

greeting(user)

Dies funktioniert auch für Arrays:

let parts = ["Hello", "World!"];

function greeting([first, second]) {
    console.log(`${first} ${second}`);
}

Umbenennen von Variablen während der Zerstörung

Bei der Destrukturierung können wir auf einen Schlüssel in einem Objekt verweisen, ihn jedoch als Variable mit einem anderen Namen deklarieren. Die Syntax sieht aus wie die Schlüsselwertsyntax für ein normales JavaScript-Objekt.

let user = {
  name: 'John Smith',
  id: 10,
  email: '[email protected]',
};

let {user: userName, id: userId} = user;

console.log(userName) // John Smith
console.log(userId) // 10

Zerstörung von Arrays

const myArr = ['one', 'two', 'three']
const [ a, b, c ] = myArr

// a = 'one', b = 'two, c = 'three'

Wir können einen Standardwert im Destructuring-Array festlegen, siehe das Beispiel für den Default-Wert beim Destructuring .

Mit dem Destructuring-Array können wir die Werte von 2 Variablen leicht vertauschen:

var a = 1;
var b = 3;

[a, b] = [b, a];
// a = 3, b = 1

Wir können leere Felder angeben, um nicht benötigte Werte zu überspringen:

[a, , b] = [1, 2, 3] // a = 1, b = 3

Objekte zerstören

Die Zerstörung ist eine bequeme Methode, um Eigenschaften aus Objekten in Variablen zu extrahieren.

Grundlegende Syntax:

let person = {
  name: 'Bob',
  age: 25
};

let { name, age } = person;

// Is equivalent to
let name = person.name; // 'Bob'
let age = person.age;   // 25

Zerstörung und Umbenennung:

let person = {
  name: 'Bob',
  age: 25
};

let { name: firstName } = person;

// Is equivalent to
let firstName = person.name; // 'Bob'

Zerstörung mit Standardwerten:

let person = {
  name: 'Bob',
  age: 25
};

let { phone = '123-456-789' } = person;

// Is equivalent to
let phone = person.hasOwnProperty('phone') ? person.phone : '123-456-789'; // '123-456-789'

Zerstörung und Umbenennung mit Standardwerten

let person = {
  name: 'Bob',
  age: 25
};

let { phone: p = '123-456-789' } = person;

// Is equivalent to
let p = person.hasOwnProperty('phone') ? person.phone : '123-456-789'; // '123-456-789'

Zerstörung innerhalb von Variablen

Abgesehen von der Zerstörung von Objekten in Funktionsargumente können Sie sie wie folgt in Variablendeklarationen verwenden:

const person = {
  name: 'John Doe',
  age: 45,
  location: 'Paris, France',
};

let { name, age, location } = person;

console.log('I am ' + name + ', aged ' + age + ' and living in ' + location + '.');
// -> "I am John Doe aged 45 and living in Paris, France."

Wie Sie sehen, wurden drei neue Variablen erstellt: name , age und location und deren Werte wurden von der Objektperson person wenn sie mit den Schlüsselnamen übereinstimmen.

Verwenden von rest-Parametern zum Erstellen eines Argument-Arrays

Wenn Sie jemals ein Array benötigen, das aus zusätzlichen Argumenten besteht, die Sie möglicherweise nicht erwartet haben oder nicht, außer den von Ihnen ausdrücklich deklarierten, können Sie den Parameter "rest" des Arrays in der arguments-Deklaration wie folgt verwenden:

Beispiel 1, optionale Argumente in einem Array:

function printArgs(arg1, arg2, ...theRest) {
  console.log(arg1, arg2, theRest);
}

printArgs(1, 2, 'optional', 4, 5);
// -> "1, 2, ['optional', 4, 5]"

Beispiel 2, alle Argumente sind jetzt ein Array:

function printArgs(...myArguments) {
  console.log(myArguments, Array.isArray(myArguments));
}

printArgs(1, 2, 'Arg #3');
// -> "[1, 2, 'Arg #3'] true"

Die Konsole wurde als true myArguments da myArguments ein Array ist. Außerdem konvertiert die ...myArguments in der Parameterargument-Deklaration eine Liste von durch die Funktion (Parameter) erhaltenen Werten (durch Kommas getrennt) in ein voll funktionsfähiges Array (und kein Array-ähnliches Objekt) wie das native Argumentobjekt).

Standardwert bei der Zerstörung

Es kommt häufig vor, dass eine Eigenschaft, die wir extrahieren TypeError , im Objekt / Array nicht vorhanden ist. TypeError führt zu einem TypeError (während der Zerstörung geschachtelter Objekte) oder die Einstellung auf undefined . Während der Destrukturierung können wir einen Standardwert festlegen, auf den er zurückgreift, falls er nicht im Objekt gefunden wird.

var obj = {a : 1};
var {a : x , b : x1 = 10} = obj;
console.log(x, x1); // 1, 10
 
var arr = [];
var [a = 5, b = 10, c] = arr;
console.log(a, b, c); // 5, 10, undefined

Verschachtelte Zerstörung

Wir sind nicht auf die Zerstörung eines Objekts / Arrays beschränkt, wir können ein verschachteltes Objekt / Array zerstören.

Zerstörung von verschachtelten Objekten

var obj = {
  a: {
    c: 1,
    d: 3
  },
  b: 2
};

var {
  a: {
    c: x,
    d: y
  },
  b: z
} = obj;

console.log(x, y, z);     // 1,3,2

Verschachtelte Array-Zerstörung

var arr = [1, 2, [3, 4], 5];

var [a, , [b, c], d] = arr;

console.log(a, b, c, d);      // 1 3 4 5

Die Destrukturierung ist nicht nur auf ein einzelnes Muster beschränkt, wir können auch Arrays mit n-Ebenen der Verschachtelung enthalten. In ähnlicher Weise können Arrays mit Objekten zerstört werden und umgekehrt.

Arrays innerhalb eines Objekts

var obj = {
  a: 1,
  b: [2, 3]
};

var {
  a: x1,
  b: [x2, x3]
} = obj;

console.log(x1, x2, x3);    // 1 2 3

Objekte innerhalb von Arrays

var arr = [1, 2 , {a : 3}, 4];

var [x1, x2 , {a : x3}, x4] = arr;

console.log(x1, x2, x3, x4);