Objekt im JavaScript-Array aktualisieren

Arrays sind Objekte in JavaScript mit einem festen numerischen Schlüssel und dynamischen Werten, die beliebige Datenmengen in einer einzigen Variablen enthalten können. Ein Array kann eindimensional oder mehrdimensional sein. Das JavaScript-Array kann Werte direkt speichern oder JavaScript-Objekte speichern. Im Gegensatz zu anderen Sprachen können JS-Arrays verschiedene Datentypen an verschiedenen Indizes desselben Arrays enthalten.

Im heutigen Beitrag erfahren Sie, wie Sie das Objekt eines Arrays in JavaScript aktualisieren.

JavaScript bietet zwei Möglichkeiten, das Objekt zu aktualisieren, mit map() und findIndex().

Objekt aktualisieren mit map() in JavaScript

Diese von JavaScript bereitgestellte integrierte Array-Methode durchläuft das ursprüngliche Array und erstellt das neue Array, wobei die Elemente basierend auf den angegebenen Bedingungen vervollständigt werden. Anstelle einer Pfeilfunktion können Sie auch die Callback-Funktion übergeben. Der einzige Unterschied zwischen map() und forEach() besteht darin, dass map() das neue Array erstellt, während forEach() das ursprüngliche Array mutiert.

Syntax von map() in JavaScript

Array.prototype.map(element => $updateCondition);
Array.prototype.map($callbackFn);

Parameter

$updateCondition: Dieser obligatorische Parameter gibt an, welche Aktion für jedes Element ausgeführt werden soll.

$callbackFn: Es ist ein obligatorischer Parameter, der für jedes Element eines aufzurufenden Arrays eine Funktion angibt. Jedes Mal, wenn die Funktion aufgerufen wird, gibt sie das Ergebnis an das neue Array zurück.

Rückgabewert

Gibt das neue Array zurück, in dem die Elemente das Ergebnis der Callback-Funktion sind.

Beispielcode:

const osArray = [
  {id: 0, name: 'Windows'},
  {id: 1, name: 'Linux'},
  {id: 2, name: 'MacOS'},
];

const updatedOSArray =
    osArray.map(p => p.id === 1 ? {...p, name: 'Ubuntu'} : p);

console.log('After update: ', updatedOSArray);

Ausgabe:

After update:  [
    {id: 0, name: "Windows"},
    {id: 1, name: "Ubuntu"},
    {id: 2, name: "MacOS"}
]

Objekt aktualisieren mit findIndex() in JavaScript

Diese integrierte Array-Methode wird von JavaScript bereitgestellt, das den Index von Elementen findet, deren Wert der angegebenen Bedingung entspricht. Anstelle einer Pfeilfunktion können Sie auch die Callback-Funktion übergeben. Es gibt einen einzigen Unterschied zwischen den beiden Methoden findIndex() und indexOf(). findIndex() wird für komplexe übereinstimmende Bedingungen oder Objektdatentypen verwendet, während indexOf() für einfache Bedingungen oder primitive Datentypen verwendet wird.

Syntax von findIndex() in JavaScript

Array.prototype.findIndex(element => $condition);
Array.prototype.findIndex($callbackFn);

Parameter

$condition: Dies ist ein obligatorischer Parameter. Der Benutzer kann jede Bedingung in Bezug auf das Array-Element übergeben und das erste übereinstimmende Element finden, das die Bedingung erfüllt.

Rückgabewert

Gibt den numerischen Index zurück, der die angegebene Bedingung erfüllt. Erfüllt kein Element die angegebene Bedingung, wird -1 zurückgegeben.

Beispielcode:

const osArray = [
  {id: 0, name: 'Windows'},
  {id: 1, name: 'Linux'},
  {id: 2, name: 'MacOS'},
];

elementIndex = osArray.findIndex((obj => obj.id == 1));
console.log('Before update: ', osArray[elementIndex]);
osArray[elementIndex].name = 'Ubuntu';
console.log('After update: ', osArray[elementIndex]);

Ausgabe:

Before update: {id: 1, name: 'Linux'}
After update: {id: 1, name: 'Ubuntu'}