JavaScript-Array-Methoden, unter der Haube (Teil)

Dieser Artikel entmystifiziert gängige JavaScript-Array-Methoden – .map(), .includes(), .concat() und .flat() –, indem ihre Funktionalität mithilfe von for-Schleifen neu erstellt wird. Während for-Schleifen weniger effizient und schwerer zu lesen erscheinen, ermöglicht das Verständnis ihrer zugrunde liegenden Mechanismen ein tieferes Verständnis der integrierten Array-Methoden. Lasst uns eintauchen!

---

.map()

Die .map()-Methode generiert ein neues Array, indem sie eine Funktion auf jedes Element eines vorhandenen Arrays anwendet. Es verarbeitet nur nicht leere Elemente und lässt das ursprüngliche Array unverändert.

Stellen Sie sich eine Bankanwendung vor, die eine Liste von Kundennamen aus einer Datenstruktur benötigt. Obwohl .map() die effizienteste Lösung ist, sehen wir uns an, wie man dies mit einer for-Schleife erreicht:

<code class="language-javascript">const bankAccounts = [
  {
    id: 1,
    name: "Susan",
    balance: 100.32,
    deposits: [150, 30, 221],
    withdrawals: [110, 70.68, 120],
  },
  { id: 2, name: "Morgan", balance: 1100.0, deposits: [1100] },
  {
    id: 3,
    name: "Joshua",
    balance: 18456.57,
    deposits: [4000, 5000, 6000, 9200, 256.57],
    withdrawals: [1500, 1400, 1500, 1500],
  },
  { id: 4, name: "Candy", balance: 0.0 },
  { id: 5, name: "Phil", balance: 18, deposits: [100, 18], withdrawals: [100] },
];

// Using a 'for' loop:
function getAllClientNamesLoop(array) {
  const acctNames = [];
  for (const acct of array) {
    acctNames.push(acct.name);
  }
  return acctNames;
}

// Using .map():
function getAllClientNamesMap(array) {
  return array.map(acct => acct.name);
}

console.log(getAllClientNamesLoop(bankAccounts)); // Output: ['Susan', 'Morgan', 'Joshua', 'Candy', 'Phil']
console.log(getAllClientNamesMap(bankAccounts)); // Output: ['Susan', 'Morgan', 'Joshua', 'Candy', 'Phil']</code>

Der for-Schleifenansatz erfordert die Erstellung eines leeren Arrays und die iterative Übertragung von Namen. Die .map()-Methode ist deutlich prägnanter und lesbarer.

.includes()

Diese Methode prüft, ob ein Array einen bestimmten Wert enthält, und gibt true oder false zurück.

Lassen Sie uns eine Funktion erstellen, um dies mithilfe einer for-Schleife und .includes():

zu demonstrieren

<code class="language-javascript">// Using a 'for' loop:
function doesArrayIncludeLoop(array, value) {
  let isIncluded = false;
  for (const elem of array) {
    if (elem === value) {
      isIncluded = true;
      break; // Optimization: Exit loop once value is found
    }
  }
  return isIncluded;
}

// Using .includes():
function doesArrayIncludeIncludes(array, value) {
  return array.includes(value);
}

console.log(doesArrayIncludeLoop([1, 1, 2, 3, 5], 6)); // Output: false
console.log(doesArrayIncludeIncludes([1, 1, 2, 3, 5], 3)); // Output: true</code>

Die for-Schleifenversion initialisiert ein Flag und iteriert, während .includes() eine direkte und sauberere Lösung bietet.

.concat()

Diese Methode führt zwei oder mehr Arrays zu einem einzigen neuen Array zusammen.

Hier ist ein Vergleich mit for Schleifen und .concat():

<code class="language-javascript">// Using 'for' loops:
function concatArraysLoop(arr1, arr2) {
  const concatenatedArray = [...arr1, ...arr2]; //Spread syntax for conciseness
  return concatenatedArray;
}

// Using .concat():
function concatArraysConcat(arr1, arr2) {
  return arr1.concat(arr2);
}

console.log(concatArraysLoop([0, 1, 2], [5, 6, 7])); // Output: [0, 1, 2, 5, 6, 7]
console.log(concatArraysConcat([0, 1, 2], [5, 6, 7])); // Output: [0, 1, 2, 5, 6, 7]</code>

Auch .concat() bietet eine hervorragende Kürze und Lesbarkeit.

.flat()

Die .flat()-Methode reduziert ein verschachteltes Array in ein einstufiges Array. Es akzeptiert einen optionalen Tiefenparameter.

Lassen Sie uns mit beiden Methoden ein Array um eine Ebene reduzieren:

<code class="language-javascript">// Using 'for' loops:
function flatArraysLoop(array) {
  const flattenedArray = [];
  for (const elem of array) {
    if (Array.isArray(elem)) {
      flattenedArray.push(...elem); //Spread syntax
    } else {
      flattenedArray.push(elem);
    }
  }
  return flattenedArray;
}

// Using .flat():
function flatArraysFlat(array) {
  return array.flat();
}

console.log(flatArraysLoop([1, 2, 3, [4, [5, 6]], 10])); // Output: [1, 2, 3, 4, [5, 6], 10]
console.log(flatArraysFlat([1, 2, 3, [4, [5, 6]], 10])); // Output: [1, 2, 3, 4, [5, 6], 10]</code>

Das Reduzieren tiefer verschachtelter Arrays mit for-Schleifen wird immer komplexer und unterstreicht die Leistungsfähigkeit und Einfachheit von .flat(depth).

---

Diese Untersuchung demonstriert die Eleganz und Effizienz der in JavaScript integrierten Array-Methoden. Teil zwei befasst sich mit weiteren Array-Methoden. Teilen Sie uns gerne Ihre Gedanken und Fragen mit! (Link zu Teil Zwei würde hier gehen)

Das obige ist der detaillierte Inhalt vonJavaScript-Array-Methoden, unter der Haube (Teil). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!