JavaScript-Arrays: Karte

Kartenfunktion: Eins-zu-eins-Datenkonvertierung

Manchmal ist es notwendig, die Daten zu ändern, um einen Teil davon zurückzugeben oder eine konsistente Operation durchzuführen. Dies ist die Zuordnung.

方法	返回值	一对一	对所有元素运行
.map((value, index, array) => *)	数组	是	是

Wenn Sie für jede Eingabe eine Ausgabe generieren müssen, ist map normalerweise die bevorzugte Methode. Es akzeptiert eine Map-Funktion, die auf jeden Datensatz angewendet wird. Der von der Zuordnungsfunktion zurückgegebene Wert erscheint im neuen Array an derselben Position wie der ursprüngliche Wert.

Von for-Schleife bis .map()

.map() funktioniert perfekt mit einer einfachen for-Schleife.

Zum Beispiel müssen alle Elemente im folgenden Array in Großbuchstaben umgewandelt werden:

<code class="language-javascript">const data = ['a', 'b', 'c', 'd'];</code>

Im Folgenden sind mehrere Implementierungsmethoden aufgeführt:

<code class="language-javascript">// 旧的命令式方法 - for 循环
function mapToUpper(data) {
  const newData = new Array(data.length);

  for (let i = 0; i < data.length; i++) {
    newData[i] = data[i].toUpperCase();
  }

  return newData;
}


// 新的命令式方法 - for...of 循环
function mapToUpper(data) {
  const newData = [];

  for (let value of data) {
    newData.push(value.toUpperCase());
  }

  return newData;
}


// 新的声明式方法 - .map()
const mapToUpper = (data) => data.map(value => value.toUpperCase());</code>

Einige Variationen, wie „const newData = new Array(data.length)“ im Vergleich zu „const newData = []“, werden nicht durch unterschiedliche Schleifentypen vorgeschrieben, sondern stellen einige historische Unterschiede im Codierungsstil dar.

Anwendungsfälle

Datenkonvertierung

Zu den häufigen Verwendungszwecken von „.map()“ gehören das Abrufen von Werten von Objekten oder das Durchführen konsistenter Änderungen oder *Transformationen* an Daten.

Oft müssen Sie aus jedem größeren Datensatz eine einzelne Information abrufen. „map“ ist genau dafür konzipiert.

<code class="language-javascript">const data = [{
  name: 'Alec Berg',
  roles: ['Creator', 'Executive Producer'],
}, {
  name: 'Bill Hader',
  roles: ['Creator', 'Executive Producer', 'Actor', 'Director'],
}];

// 只需要姓名
data.map((entry) => entry.name);
// [ 'Alec Berg', 'Bill Hader' ]</code>

Wenn Sie Mitarbeiterrabatte auf Ihre Bestellungen gewähren müssen, kann „map“ das auch tun!

<code class="language-javascript">const cart = [{
  itemId: 12345,
  name: 'shoes',
  price: 70.00,
},{
  itemId: 54321,
  name: 'shirt',
  price: 15.25,
}];

// 应用折扣
const applyDiscount = (discountPercent, order) => {
  // 首先，获取“剩余”金额。
  // 如果折扣为 10%，则乘数为 0.9
  const multiplier = 1 - (discountPercent / 100);
  // 为每个项目创建一个新条目，其中包含折扣后的价格。
  // 我们将包含旧价格以供参考。
  return order.map((item) => ({
    ...item,
    price: item.price * multiplier,
    originalPrice: item.price,
  }));
};</code>

Hier erfolgt keine Ausgabe. Wenn Sie es selbst ausprobieren möchten, empfehle ich, es in eine Browserkonsole oder ein Tool wie RunJS einzufügen, mit dem ich diese Beispiele schreibe und teste.

Inkrementieren

Dies ist eine spezielle Version der Datenkonvertierung. Beginnen Sie mit „keine Informationen“, aber durch das Vorhandensein eines Arrays erhält jeder Eintrag einen Index, und Sie können den Index (auf Null basierend) in eine Zählzahl umwandeln, indem Sie 1 hinzufügen.

Es ist nicht notwendig, „value“ (das erste Argument, das der *map*-Funktion übergeben wird) zu verwenden, aber ihm muss ein Name gegeben werden, um auf das zweite Argument zuzugreifen. Der Unterstrich ist ein gültiger Variablenname und wird häufig zur Darstellung unerwünschter Werte verwendet, wie in diesem Beispiel.

<code class="language-javascript">const getCountingNumbers = (upTo) => new Array(upTo)
  // 新数组是“稀疏的”，需要值才能映射
  .fill('')
  // 第二个参数是数组索引。
  .map((_, index) => index + 1);

getCountingNumbers(5);
// [ 1, 2, 3, 4, 5 ]</code>

Dies ist zwar ein Beispiel für „.map()“, aber eine neuere Funktion kann dies auch tun: „Array.from()“.

<code class="language-javascript">const getCountingNumbers = (upTo) => Array.from(
  // 通过提供具有长度的对象来“伪造”类似数组的对象
  { length: upTo },
  // 使用与 .map() 相同的映射函数。
  (_, index) => index + 1
);</code>

Es mag seltsam erscheinen, bei der Verwendung von „.map()“ eine andere Methode zu diskutieren, aber hinter den Kulissen ruft „Array.from()“ zumindest für das obige Beispiel „.map()“ auf.

Zusammenfassung

Ich hoffe, dies hilft Ihnen zu verstehen, wie man „.map()“ verwendet. Die Datentransformation ist das Herzstück vieler Tools und Branchen, daher ist „.map()“ ein wichtiger Bestandteil vieler Projekte.

Wenn Sie Fragen oder Kommentare zu „.map()“ haben, stehe ich Ihnen gerne zur Verfügung!

Das obige ist der detaillierte Inhalt vonJavaScript-Arrays: Karte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!