JavaScript-Destruktor

1. Verwenden Sie die Destrukturierung mit Objekten
2. Verwenden Sie die Destrukturierung mit Arrays
3. Verwenden Sie die Destrukturierung gleichzeitig mit Arrays und Objekten
4. Abschluss

Dieser Artikel konzentriert sich hauptsächlich auf die JavaScript-Destrukturierung, eine der besten und hilfreichsten Funktionen von ES6. Die Destrukturierung ist eine JavaScript-Anweisung, die das Entpacken von Array-Elementen oder Objekteigenschaften in separate Variablen, Arrays, Objekte, verschachtelte Objekte und Zuweisungen an Variablen ermöglicht, die die gesamte Extraktion von Daten ermöglichen.

Gleichzeitig werden wir einige Beispiele durchgehen und sehen, wie die Destrukturierung für Arrays, Objekte und beides verwendet wird.

Verwenden Sie die Destrukturierung mit Objekten

// object
const employee = {
  id: 001,
  name: 'John Oliver',
  age: 24,
  department: 'Marketing',
  address: {
    city: 'Colombo',
    country: 'Sri Lanka',
  },
};

Das Objekt employee im zuvor erwähnten JS-Code ist sichtbar. Auf der rechten Seite hat dieser Mitarbeiter grundlegende Eigenschaften wie id, name, Alter und Abteilung. Eine Konsole mit einigen Daten wird angezeigt.

// object
const employee = {
  id: 001,
  name: 'John Oliver',
  age: 24,
  department: 'Marketing',
  address: {
    city: 'Colombo',
    country: 'Sri Lanka',
  },
};

const name = employee.name;
const age = employee.age;

console.log(name);
console.log(age);

Wir werden also zuerst sehen, wie wir die Destrukturierung mit Objekten verwenden können.

Wenn wir auf das Eigentum dieses Mitarbeiters zugreifen wollen, was sollen wir dann tun? Wir können einen Namen schreiben; es ändert den employee.name.

Es ändert sich zu employee.age, wenn wir auf das Alter zugreifen wollen.

Angenommen, wir geben den Namen und das Alter mit console.log(name); auf der Konsole aus. und console.log(age);. Wenn wir den Code ausführen, sehen Sie, dass wir bei der Ausgabe den Namen und das Alter getröstet bekommen.

Hier können Sie sehen, dass wir das Gleiche wiederholt getan haben. Wir haben zweimal den Namen, zweimal das Alter und die Mitarbeiter wiederholt.

Aber ES6 bietet Ihnen einige der besten Funktionen zum Destrukturieren von Aufgaben, wenn Sie sich nicht wiederholen müssen, da dies in kleiner Syntax und prägnant erfolgen kann.

Schauen wir uns an, wie wir diese Aufgabe mit Destrukturierung erfüllen können. Zuerst schreiben wir eine Variable.

Hier ist diese Konstante gleich dem Mitarbeiter.

// object
const employee = {
  id: 001,
  name: 'John Oliver',
  age: 24,
  department: 'Marketing',
  address: {
    city: 'Colombo',
    country: 'Sri Lanka',
  },
};

//const name = employee.name;
//const age = employee.age;

const { name, age } = employee;

console.log(name);
console.log(age);

Aber auf der linken Seite erstellen wir eine Objektsyntax, dann können wir Eigenschaftsnamen schreiben, auf die wir vom Objekt employee zugreifen möchten. Wir wollen also auch auf den Namen und das Alter zugreifen.

Wenn wir den obigen Code ausführen, erhalten wir immer noch dieselbe Ausgabe oder dasselbe Ergebnis.

Hier wiederholen wir nicht Mitarbeiter.Name oder Mitarbeiter.Alter. Wir verwenden nur diese Eigenschaftsnamen direkt.

Wir können auch noch etwas tun, wenn Sie den Namen nicht als Eigenschaft verwenden und einen anderen Namen angeben möchten.

// object
const employee = {
  id: 001,
  name: 'John Oliver',
  age: 24,
  department: 'Marketing',
  address: {
    city: 'Colombo',
    country: 'Sri Lanka',
  },
};

//const name = employee.name;
//const age = employee.age;

const { name: fullName, age } = employee;

console.log(fullName);
console.log(age);

Dann können wir einen Doppelpunkt schreiben und fullName verwenden, und wir erhalten immer noch dasselbe Ergebnis. Und eine coole Sache an dieser Destrukturierung ist, dass Sie hier den Standardparameter verwenden können.

// object
const employee = {
  id: 001,
  age: 24,
  department: 'Marketing',
  address: {
    city: 'Colombo',
    country: 'Sri Lanka',
  },
};

// const name = employee.name;
// const age = employee.age;

const {name: fullName = 'Lora Noah ', age} = employee;

console.log(fullName);
console.log(age);

Angenommen, wir möchten einen Standardparameter von Lora Noah verwenden. Sie können sehen, dass wir jetzt den Standardparameter verwendet haben.

Schauen wir uns dieses employee-Objekt an, das den Eigenschaftsnamen nicht enthält. In diesem Fall wird der Standardwert Lora Noah verwendet.

Angenommen, wir wollen ein verschachteltes Objekt wie den Mitarbeiter destrukturieren. Wir müssen den Wohnort des jeweiligen Mitarbeiters kennen und die uns aktuell bekannte Adresse ergänzen.

Dann können wir das auch. Wir brauchen zuerst eine Adresse.

Wenn wir diese Adresse trösten, gibt sie uns ein Objekt. Lassen Sie uns versuchen, den Code auszuführen.

// object
const employee = {
  id: 001,
  age: 24,
  department: 'Marketing',
  address: {
    city: 'Colombo',
    country: 'Sri Lanka',
  },
};

// const name = employee.name;
// const age = employee.age;

const {address} = employee;

console.log(address);

Die Ausgabe wird wie unten gezeigt empfangen. Aber wir wollen nur die Stadt davon.

Wir wollen hier nicht das vollständige Objekt, weil wir es ändern können. Was können wir destrukturieren? Wir können über die Stadt schreiben.

Entfernen Sie die Adresse und verwenden Sie dann die Stadt für die Konsole.

// object
const employee = {
  id: 001,
  age: 24,
  department: 'Marketing',
  address: {
    city: 'Colombo',
    country: 'Sri Lanka',
  },
};

// const name = employee.name;
// const age = employee.age;

const {address: {city}} = employee;

console.log(city);

Hier ist die Ausgabe, die wir erhalten.

Dann erhalten wir Colombo als Ausgabe, wenn Sie die Destrukturierung in Funktionen verwenden können. Die Funktion, die wir bauen, sollte displayEmployee heißen.

Diese Funktion nimmt einen employee und muss dann console.log(). Wir verwenden ein String-Literal für die Konsole.

Wir schreiben den Namen des Mitarbeiters als ${name} und das Alter ist ${age}; für die Konsole.

// object
const employee = {
  id: 001,
  age: 24,
  department: 'Marketing',
  address: {
    city: 'Colombo',
    country: 'Sri Lanka',
  },
};

function displayEmployee(employee) {
  console.log(`The employee name is ${name} and age is ${age}`);
}

displayEmployee(employee);

Wenn wir diese Namen drucken wollen und was dann normalerweise tun? Der employee.name und employee.age der Konsole.

// object
const employee = {
  id: 001,
  age: 24,
  department: 'Marketing',
  address: {
    city: 'Colombo',
    country: 'Sri Lanka',
  },
};

function displayEmployee(employee) {
  console.log(
      `The employee name is ${employee.name} and age is ${employee.age}`);
}

displayEmployee(employee);

In diesem Codelauf sehen Sie, dass wir employee.name als undefiniert erhalten.

Aus diesem Grund haben wir die Eigenschaft name aus dem Objekt Mitarbeiter entfernt. Jetzt können wir den Namen John und das Alter 24 erhalten.

Der Code und die erwartete Ausgabe nach der Ausführung des Codes sind unten dargestellt.

// object
const employee = {
  id: 001,
  name: 'John',
  age: 24,
  department: 'Marketing',
  address: {
    city: 'Colombo',
    country: 'Sri Lanka',
  },
};

function displayEmployee(employee) {
  console.log(
      `The employee name is ${employee.name} and age is ${employee.age}`);
}

displayEmployee(employee);

Ausgang:

Aber wir können auch die Destrukturierung der Funktion vornehmen; Daher benötigen wir das Alter, um diese Funktion zu destrukturieren. Wir müssen den Namen haben.

Sie brauchen hier keine Reihenfolge einzuhalten. Mit anderen Worten erklärt, können der name und das Alter geschrieben werden.

Da es keine festgelegte Reihenfolge gibt, können wir sie bei Bedarf ändern.

// object
const employee = {
  id: 001,
  name: 'John',
  age: 24,
  department: 'Marketing',
  address: {
    city: 'Colombo',
    country: 'Sri Lanka',
  },
};

function displayEmployee(age, name) {
  console.log(
      `The employee name is ${employee.name} and age is ${employee.age}`);
}

displayEmployee(employee);

Wenn wir diesen Code ausführen, erhalten wir immer noch dieselbe Ausgabe.

Verwenden Sie die Destrukturierung mit Arrays

Wir müssen ein Array erstellen. Wir möchten Zugriff auf alle Werte des Arrays haben.

Die Wörter Apfel, mango, Banane und Ananas werden in ein Array geschrieben. Wir verwenden die Variablefruits, um dieses Array darzustellen.

Das erste Element Apfel wird auf Index 0 geschrieben und das zweite Element mango wird auf Index 1 verwendet.

Und wir zeigen die console.log(apple) und console.log(mango) an.

// Array
const fruits = ['apple', 'mango', 'banana', 'pineapple'];

const apple = fruits[0];
const mango = fruits[1];

console.log(apple);
console.log(mango);

Die Ausgabe ist unten gezeigt.

Als Ergebnis erhalten wir Apfel und mango. Aber wenn wir das Array destrukturieren wollen, schreiben wir es.

Um Arrays zu destrukturieren, wird diese Konstante so eingestellt, dass sie ähnlich dem Fruits-Array ist.

Hier wird ein Array benötigt und die Werte werden für das Array verwendet. Geben wir Frucht1 und Frucht2 ein, soll der Apfel des ersten Indexes ausgegeben werden.

// Array
const fruits = ['apple', 'mango', 'banana', 'pineapple'];

// const apple = fruits[0];
// const mango = fruits[1];

const [fruit1, fruit2] = fruits;

console.log(fruit1);
console.log(fruit2);

Dem Apfel wird also der Wert Frucht1 und der mango der Wert Frucht2 zugewiesen. Der obige Begriff Frucht1 bezieht sich auf den ersten Wert des Arrays.

Der zweite Wert des Arrays heißt fruit2. das ist der zweite Wert des Arrays, mango.

Wenn Sie Mango überspringen möchten, benötigen Sie den dritten Wert, Banane. Wir werden also eine leere ausführen.

Wir haben keine Referenz, dann wird der zweite Wert des Arrays übersprungen. Es gibt uns den dritten Wert.

// Array
const fruits = ['apple', 'mango', 'banana', 'pineapple'];

// const apple = fruits[0];
// const mango = fruits[1];

const [fruit1, , fruit2] = fruits;

console.log(fruit1);
console.log(fruit2);

Dann können wir als Ausgabe Apfel und Banane erhalten.

Verwenden Sie den Rest-Operator zum Destrukturieren mit Arrays

Sie können auch den Restoperator zur Destrukturierung verwenden. Der rest-Operator kann verwendet werden, wenn Sie die ersten drei Elemente des Arrays und die verbleibenden Werte benötigen.

Wir können den rest-Operator eingeben und eine console.log() ausführen, um das verbleibende Array zu erhalten, das pineapple enthält.

Im Code können wir das Verhalten des Operators sehen.

// Array
const fruits = ['apple', 'mango', 'banana', 'pineapple'];

// const apple = fruits[0];
// const mango = fruits[1];

const [fruit1, , fruit2, ...rest] = fruits;

console.log(fruit1);
console.log(fruit2);
console.log(rest);

Dies ist die Ausgabe.

So führen Sie den Destrukturierungsteil in den Arrays aus.

Verwenden Sie die Destrukturierung gleichzeitig mit Arrays und Objekten

Erstens können wir ein Array und ein Objekt schreiben. Dieses Array von Lebensmitteln ist im folgenden Code zu sehen.

// Array and Object
const groceryList = [
  {item: 'Apples', price: 25, category: 'fruits'},
  {item: 'Mangoes', price: 35, category: 'fruits'},
  {item: 'Tomatoes', price: 15, category: 'vege'},
  {item: 'Milk', price: 20, category: 'misc'},
  {item: 'Bread', price: 12, category: 'misc'},
  {item: 'Eggs', price: 18, category: 'misc'},
];


console.log(groceryList[0].item);

Wenn Sie auf die Apples zugreifen möchten, machen Sie normalerweise eine console.log(groceryList[0].item);. Dann sieht man als Ausgabe die Äpfel.

Mit Destrukturierung können wir dies schreiben. Wir schreiben konstant und schreiben Äpfel hinein.

Diese Äpfel entsprechen der groceryList. Zuerst haben wir ein Array, wenn wir das erste Element des Arrays durchlaufen wollen.

// Array and Object
const groceryList = [
  {item: 'Apples', price: 25, category: 'fruits'},
  {item: 'Mangoes', price: 35, category: 'fruits'},
  {item: 'Tomatoes', price: 15, category: 'vege'},
  {item: 'Milk', price: 20, category: 'misc'},
  {item: 'Bread', price: 12, category: 'misc'},
  {item: 'Eggs', price: 18, category: 'misc'},
];

// console.log(groceryList[0].item);
const [apple] = groceryList;
console.log(apple);

Hier ist die Ausgabe.

Das Array ist hier vollständig, aber das Objekt wird nicht benötigt. Wir wollen nur das Item im Objekt zum Destrukturieren.

Wenn wir das Objekt destrukturieren, wird es immer mit der Eigenschaft genommen. Und es gibt kein Eigentum wie den Apfel.

Daher müssen wir die Eigenschaft auf diese Weise zuweisen. Sehen Sie sich den Code unten an.

Sie können verschiedene Komponenten für die Variable wie den Apfel ausprobieren. Aber wenn Sie es direkt als Element verwenden, können Sie es schreiben.

// Array and Object
const groceryList = [
  {item: 'Apples', price: 25, category: 'fruits'},
  {item: 'Mangoes', price: 35, category: 'fruits'},
  {item: 'Tomatoes', price: 15, category: 'vege'},
  {item: 'Milk', price: 20, category: 'misc'},
  {item: 'Bread', price: 12, category: 'misc'},
  {item: 'Eggs', price: 18, category: 'misc'},
];

// console.log(groceryList[0].item);
const [{item}] = groceryList;
console.log(item);

Die Ausgabe lautet Äpfel.

Wenn Sie möchten, dass die Ausgabe Tomaten ist, überspringen Sie die ersten beiden Schritte, und dann brauchen Sie sich keine Sorgen zu machen. Als drittes sind die Tomaten im Array zu sehen.

// Array and Object
const groceryList = [
  {item: 'Apples', price: 25, category: 'fruits'},
  {item: 'Mangoes', price: 35, category: 'fruits'},
  {item: 'Tomatoes', price: 15, category: 'vege'},
  {item: 'Milk', price: 20, category: 'misc'},
  {item: 'Bread', price: 12, category: 'misc'},
  {item: 'Eggs', price: 18, category: 'misc'},
];

// console.log(groceryList[0].item);
const [, , {item}] = groceryList;
console.log(item);

Dies ist die Ausgabe des oben implementierten Code-Chunks.

Angenommen, wir wollen auch die anderen Gegenstände, nachdem wir die Tomaten erhalten haben. Dazu müssen wir denselben Rest-Operator anwenden und der Konsole eine console.log() hinzufügen.

Sobald wir das haben, können wir das verbleibende Array von Objekten abrufen.

// Array and Object
const groceryList = [
  {item: 'Apples', price: 25, category: 'fruits'},
  {item: 'Mangoes', price: 35, category: 'fruits'},
  {item: 'Tomatoes', price: 15, category: 'vege'},
  {item: 'Milk', price: 20, category: 'misc'},
  {item: 'Bread', price: 12, category: 'misc'},
  {item: 'Eggs', price: 18, category: 'misc'},
];

// console.log(groceryList[0].item);
const [, , {item}, ...rest] = groceryList;
console.log(item);
console.log(rest);

Die Ausgabe ist unten zu sehen.

So mächtig ist die Destrukturierung. Betrachten wir eine Illustration eines anderen Ansatzes, bei dem ein Objekt ein Array enthält.

Wir wollen den Standort Singapur auswählen. Um also den Standort von Singapur zu erhalten, können wir console.log(company.(locations[0])) ausführen.

// Array and Object
const company = {
  name: 'Google',
  locations: ['Singapore', 'India', 'Germany'],
};

console.log(company.locations[0]);

Wir können den Wert/die Ausgabe als Singapur erhalten. Siehe unten.

Dies wollen wir durch Destrukturierung erreichen. Wir können eine Konstante schreiben, die dem Objekt entspricht, das eine Firma ist.

Um ein Objekt zu destrukturieren, verwenden wir geschweifte Klammern. In geschweiften Klammern verwenden wir den Eigenschaftsnamen als Ort.

Von den Locations müssen wir auf den ersten Wert des Index 0 zugreifen. Daher können wir hier ein Array schreiben und für Location loc verwenden.

// Array and Object
const company = {
  name: 'Google',
  locations: ['Singapore', 'India', 'Germany'],
};

const {
  locations: [loc],
} = company;
console.log(loc);

Und wir wollen dieses loc drucken; daher verwenden wir console.log(loc). Dann können wir als Ausgabe Singapore erhalten.

Angenommen, wir wollen das Ergebnis als Indien; Daher überspringen wir den ersten Wert. Dann können wir diesen Wert ausgeben (Indien).

// Array and Object
const company = {
  name: 'Google',
  locations: ['Singapore', 'India', 'Germany'],
};

const {
  locations: [, loc],
} = company;
console.log(loc);

Hier sehen Sie die Ausgabe.

Es gibt den letzten Anwendungsfall, in dem wir die Destrukturierung diskutieren. Hier verwenden wir eine Konstante als neue Benutzer.

const Users = [
  ['John', 'Oliver'],
  ['James', 'Smith'],
  ['Mary', 'Elizabeth'],
];
[{
  firstName: 'John',
  lastName: 'Oliver',
},
 {
   firstName: 'James',
   lastName: 'Smith',
 },
 {
   firstName: 'Mary',
   lastName: 'Elizabeth',
 },
];

Diese Benutzer haben verschachtelte Arrays. Wenn wir möchten, dass das Ergebnis die folgende Ausgabe ist, können wir sehen, welche die Objekte enthält und sich innerhalb des Objekts befindet.

Wir wollen ein Schlüssel-Wert-Paar: firstName als John und lastName als Oliver. Mit der Destrukturierung können wir dies sehr einfach tun.

Wir verwenden hier eine Array-Funktion höherer Ordnung, nämlich die Karte. Also erstellen wir mit dem Objekt Users eine Konstante, die die Users übernimmt.

Es wird Ihnen den ersten Benutzer geben. Mit dem ersten Benutzer können Sie das gewünschte Objekt zurückgeben; hier machen wir firstName.

Dieser firstName entspricht dem Benutzerindex von Null, und für lastName verwenden Sie dann einen Benutzerindex von 1.

Nach dieser Konsole wird das Objekt Users mit console.log(UsersObj);.

const Users = [
  ['John', 'Oliver'],
  ['James', 'Smith'],
  ['Mary', 'Elizabeth'],
];
[{
  firstName: 'John',
  lastName: 'Oliver',
},
 {
   firstName: 'James',
   lastName: 'Smith',
 },
 {
   firstName: 'Mary',
   lastName: 'Elizabeth',
 },
];
const UserObj = Users.map((User) => {
    return { firstName: User[0], lastName: User[1] };
});

console.log(UserObj);

Hier erhalten wir den firstName und lastName der drei Objekte.

In Bezug auf die Destrukturierung, was können wir hier tun? Aus dem Array können wir den ersten Wert als firstName und den zweiten Wert als lastName zuweisen.

const Users = [
  ['John', 'Oliver'],
  ['James', 'Smith'],
  ['Mary', 'Elizabeth'],
];
[{
  firstName: 'John',
  lastName: 'Oliver',
},
 {
   firstName: 'James',
   lastName: 'Smith',
 },
 {
   firstName: 'Mary',
   lastName: 'Elizabeth',
 },
];
const UserObj = Users.map(([firstName, lastName]) => {
    return { firstName: firstName, lastName: lastName };
});

console.log(UserObj);

Auch hier kommt das gleiche Ergebnis wie bei der obigen Ausgabe.

Aber wir können noch etwas tun, da ES6 verbesserte Objektliterale hat. Wir können das für den Schlüssel tun, und der Wert ist derselbe.

Wir können es entfernen. Mit dem, was übrig bleibt, können wir jedoch immer noch die gleichen Ergebnisse erzielen.

const Users = [
  ['John', 'Oliver'],
  ['James', 'Smith'],
  ['Mary', 'Elizabeth'],
];
[{
  firstName: 'John',
  lastName: 'Oliver',
},
 {
   firstName: 'James',
   lastName: 'Smith',
 },
 {
   firstName: 'Mary',
   lastName: 'Elizabeth',
 },
];
const UserObj = Users.map(([firstName, lastName]) => {
    return { firstName, lastName };
});

console.log(UserObj);

So können wir die Destrukturierung verwenden.

Abschluss

In diesem Artikel haben wir besprochen, was Destrukturierung ist und wie sie in JavaScript ausgeführt wird. Es ist nützlich, wenn Sie mit Sprachen wie React arbeiten.

Auch wenn Sie nicht mit React arbeiten, können Sie trotzdem sauberen Code schreiben.