Pushen Sie ein Objekt mit TypeScript in ein Array

1. Initialisieren Sie das Projekt
2. Verwenden Sie die array.push-Methode, um ein Objekt mit TypeScript in ein Array zu verschieben
3. Verwenden Sie die array.concat-Methode, um ein Objekt mit TypeScript in ein Array zu verschieben
4. Verwenden Sie den Spread-Operator, um ein Objekt mit TypeScript in ein Array zu verschieben
5. Verwenden Sie den Spread-Operator, ohne das Objekt zu mutieren, um ein Objekt mit TypeScript in ein Array zu verschieben
6. Abschluss
7. Verweise

Nachdem Sie diese Anleitung gelesen haben, wissen Sie, wie Sie mit TypeScript ein Objekt in ein Array verschieben.

Initialisieren Sie das Projekt

Wir werden Vite verwenden, um schnell ein neues Projekt mit vanilla-ts zu starten. Nach der Installation der erforderlichen Pakete erstellen wir zwei Objektschnittstellen, die im weiteren Verlauf des Handbuchs verwendet werden.

export interface Comment {
	rating: number;
	comment: string;
	author: string;
	date: string;
}

export interface Dish {
	id: number;
	name: string;
	image: string;
	category: string;
	description: string;
	comments: Comment[];
}

Wie Sie sehen können, gibt es das Dish-Objekt, das eine comments-Eigenschaft mit einem Array darin hat. Dieses Array kann Objekte nach der Comment-Schnittstelle anpassen.

Das Ziel ist es, neue Kommentare in die Eigenschaft Kommentare zu verschieben. Um dies zu zeigen, verwenden wir die folgenden Objekte als Beispiele.

import {Dish, Comment} from "./interfaces";

export let pastaDish: Dish = {
	id: 124,
	name: "Carbonara Pasta",
	image: "pasta-carbonara.jpg",
	category: "Italian Food",
	description:
		"Italian pasta dish originating in Lazio based on eggs, cheese, extra virgin olive oil, pancetta or guanciale, and bacon with black pepper.",
	comments: [],
};

export let pastaComment: Comment = {
	rating: 5,
	comment: "Very tasty!",
	author: "Juan Diego",
	date: "04/14/2022",
};

Verwenden Sie die array.push-Methode, um ein Objekt mit TypeScript in ein Array zu verschieben

Beim Aufruf aus einem Array fügt push ein oder mehrere Elemente am Ende des Arrays hinzu. Es gibt nicht das neue Array zurück, sondern bearbeitet das ursprüngliche.

Wir können diese Methode aus der Eigenschaft comments aufrufen, um ein neues Element hinzuzufügen.

import {Dish, Comment} from "./interfaces";
import {pastaDish, pastaComment} from "./pastaDish";

const addNewComment = (dish: Dish, newComment: Comment) => {
	dish.comments.push(newComment);
	console.log(dish.comments);
};

addNewComment(pastaDish, pastaComment);

Erwartete Ausgabe:

[
	{
		rating: 5,
		comment: "Very tasty!",
		author: "Juan Diego",
		date: "04/14/2022",
	},
];

Lassen Sie uns aufschlüsseln, was hier passiert: Wir erstellen eine neue Funktion namens addNewComment, die ein dish und ein newComment als Argumente akzeptiert.

Dann greifen wir auf die Eigenschaft comments zu und rufen ihre push-Methode mit newComment als einzigem Argument auf. Damit haben wir bereits ein Objekt in das Array geschoben.

Codebeispiel

Verwenden Sie die array.concat-Methode, um ein Objekt mit TypeScript in ein Array zu verschieben

Diese Lösung funktioniert gut, aber die Methode array.push mutiert das Objekt dish. Mit anderen Worten, das ursprüngliche Gericht-Objekt ändert sich, was als schlechte Praxis angesehen wird.

Eine Mutation ist ein Nebeneffekt: Je weniger Dinge sich in einem Programm ändern, desto weniger muss man nachverfolgen, was zu einem einfacheren Programm führt. (Federico Knüssel)

Wir können unseren Code so umgestalten, dass er die Methode array.concat verwendet, um das Mutationsproblem zu lösen. Das array.concat funktioniert ähnlich wie das array.push, aber anstatt das ursprüngliche Array zu ändern, gibt es ein neues zurück.

const addNewComment = (dish: Dish, newComment: Comment) => {
	const editedComments = dish.comments.concat(newComment);
};

Wie Sie vielleicht bemerkt haben, erstellen wir mit dieser Methode ein neues comments-Array, aber wir haben kein neues dish-Objekt, das wir zurückgeben könnten. Um dies zu lösen, können wir die globale Methode Object.assign verwenden, die die Eigenschaften von einem source-Objekt in ein target-Objekt kopiert und das modifizierte Zielobjekt zurückgibt.

Das erste Argument wird unser Ziel sein und die anderen Argumente unsere Quellen. In diesem Fall verwenden wir ein leeres Objekt {} als unser Ziel und editedComments und dish als unsere Quellen.

import {Dish, Comment} from "./interfaces";
import {pastaDish, pastaComment} from "./pastaDish";

const addNewComment = (dish: Dish, newComment: Comment) => {
	const editedComments = dish.comments.concat(newComment);
	const editedDish = Object.assign({}, dish, {comments: editedComments});
	console.log(editedDish.comments);

	return editedDish;
};

addNewComment(pastaDish, pastaComment);

Wenn wir vergessen, {} als erstes Argument hinzuzufügen, wird editedComments in dish kopiert und wir mutieren das ursprüngliche dish-Objekt.

Erwartete Ausgabe:

[
	{
		rating: 5,
		comment: "Very tasty!",
		author: "Juan Diego",
		date: "04/14/2022",
	},
];

Codebeispiel

Verwenden Sie den Spread-Operator, um ein Objekt mit TypeScript in ein Array zu verschieben

Eine andere Möglichkeit, ein Objekt zu einem Array hinzuzufügen, ist die Verwendung des Spread-Operators von ES6. Der Spread-Operator ist mit drei Punkten ... gekennzeichnet und kann unter anderem verwendet werden, um die Eigenschaften eines Objekts oder Arrays zu erweitern.

Wir können mit dem Spread-Operator ein neues Array mit den neuen Kommentaren erstellen und dieses dann den dish.comments zuweisen.

import {Dish, Comment} from "./interfaces";
import {pastaDish, pastaComment} from "./pastaDish";

const addNewComment = (dish: Dish, newComment: Comment) => {
	const {comments} = dish;

	dish.comments = [...comments, newComment];
	console.log(dish.comments);
};

addNewComment(pastaDish, pastaComment);

Erwartete Ausgabe:

[
	{
		rating: 5,
		comment: "Very tasty!",
		author: "Juan Diego",
		date: "04/14/2022",
	},
];

Zunächst verwenden wir object destructuring, um auf die Eigenschaft comments von dish zuzugreifen. Anschließend erweitern wir mit dem Spread-Operator die comments-Elemente auf ein neues Array mit dem newComment als letztes Element und weisen es der ursprünglichen dish.comments-Property zu.

Codebeispiel

Verwenden Sie den Spread-Operator, ohne das Objekt zu mutieren, um ein Objekt mit TypeScript in ein Array zu verschieben

Wie Sie vielleicht bemerkt haben, mutieren wir auch den ursprünglichen Wert dish mit dem vorherigen Ansatz. Wir können dies jedoch leicht beheben, indem wir ein neues dish-Objekt mit der bearbeiteten comments-Eigenschaft erstellen und zurückgeben.

Glücklicherweise können wir dies erreichen, indem wir den Spread-Operator noch einmal verwenden, um eine Kopie des dish-Objekts zu erstellen.

import {Dish, Comment} from "./interfaces";
import {pastaDish, pastaComment} from "./pastaDish";

const addNewComment = (dish: Dish, newComment: Comment) => {
	const {comments} = dish;

	const editedDish = {...dish, comments: [...comments, newComment]};
	console.log(editedDish.comments);

	return editedDish;
};

addNewComment(pastaDish, pastaComment);

Erwartete Ausgabe:

[
	{
		rating: 5,
		comment: "Very tasty!",
		author: "Juan Diego",
		date: "04/14/2022",
	},
];

Zuerst erstellen wir ein neues Objekt mit leeren geschweiften Klammern {}; dann erweitern wir die dish-Eigenschaften innerhalb des neuen Objekts, indem wir den Spread-Operator ... verwenden, aber wir fügen ausdrücklich eine neue comments-Eigenschaft hinzu, damit wir ihr einen neuen Wert zuweisen können, der in diesem Fall ein sein wird Array der bestehenden Kommentare plus newComment.

{} // New Object
{...dish} // New Dish
{...dish, comments: []} // New Dish With Empty Comments
{...dish, comments: [...comments, newComment]} // New Dish With New Comments

Codebeispiel

Abschluss

Sie können alle vorherigen Ansätze verwenden; Wir empfehlen jedoch, die nicht mutierenden zu verwenden, da dies als bewährte Vorgehensweise gilt. Auf der anderen Seite kann die Verwendung des Spread-Operators zu einem Problem werden, da er mit ECMAScript 6 herauskam, sodass er möglicherweise nicht in alten Legacy-Browsern funktioniert.

Wenn die Zugänglichkeit des Browsers ein großes Problem darstellt, halten Sie sich daher an array.push und array.concat oder kompilieren Sie Ihren Code mit Babel.

Verweise

1. Mozilla-Dokumentationsnetzwerk. (ND) Array.prototype.push() - JavaScript | MDN. Abgerufen am 14. April 2022 von https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push
2. Knüssel F. (2017). Arrays, Objekte und Mutationen. Abgerufen am 14. April 2022 von https://medium.com/@fknussel/arrays-objects-and-mutations-6b23348b54aa
3. Mozilla-Dokumentationsnetzwerk. (ND) Array.prototype.concat() - JavaScript | MDN. Abgerufen am 14. April 2022 von https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat
4. Mozilla-Dokumentationsnetzwerk. (ND) Array.prototype.assign() - JavaScript | MDN. Abgerufen am 14. April 2022 von https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
5. Mozilla-Dokumentationsnetzwerk. (N.D) Spread-Syntax (…) - JavaScript | MDN. Abgerufen am 14. April 2022 von https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax