Tableaux JavaScript : carte

Fonction carte : conversion de données individuelle

Parfois il est nécessaire de modifier les données pour en restituer une partie ou effectuer une opération cohérente, c'est le mapping.

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

Chaque fois que vous devez générer une sortie pour chaque entrée, map est généralement la méthode préférée. Il accepte une fonction Map qui opère sur chaque enregistrement. La valeur renvoyée par la fonction de mappage apparaîtra dans le nouveau tableau à la même position que la valeur d'origine.

De la boucle for à .map()

.map() fonctionne parfaitement avec une boucle for basique.

Par exemple, tous les éléments du tableau suivant doivent être convertis en lettres majuscules :

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

Voici plusieurs méthodes de mise en œuvre :

<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>

Certaines variantes, telles que `const newData = new Array(data.length)` par rapport à `const newData = []`, ne sont pas imposées par différents types de boucles, mais représentent plutôt certaines différences historiques de style de codage.

Cas d'utilisation

Conversion de données

Les utilisations courantes de `.map()` incluent l'obtention de valeurs à partir d'objets ou l'exécution de modifications ou de *transformations* cohérentes sur les données.

Souvent, vous devez obtenir une information de chaque enregistrement plus volumineux. `map` est conçu exactement pour cela.

<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>

Si vous avez besoin d'offrir des réductions aux employés sur vos commandes, `map` peut le faire également !

<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>

Aucun résultat n’est donné ici. Si vous souhaitez l'essayer vous-même, je vous recommande de le coller dans une console de navigateur ou dans un outil comme RunJS, que j'utilise pour écrire et tester ces exemples.

Incrément

Il s'agit d'une version spéciale de conversion de données. Commencez par "aucune information", mais le fait d'avoir un tableau donne à chaque entrée un index, et vous pouvez convertir l'index (de base zéro) en un nombre compté en ajoutant 1.

Il n'est pas nécessaire d'utiliser `value` (le premier argument fourni à la fonction *map*), mais il faut lui donner un nom pour accéder au deuxième argument. Le caractère de soulignement est un nom de variable valide et est souvent utilisé pour représenter des valeurs indésirables, comme dans cet exemple.

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

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

Bien qu'il s'agisse d'un exemple de `.map()`, une fonction plus récente peut également faire cela : `Array.from()`.

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

Il peut sembler étrange de discuter d'une autre méthode lors de l'utilisation de `.map()`, mais en coulisses, `Array.from()` appellera `.map()` au moins pour l'exemple ci-dessus.

Résumé

J'espère que cela vous aidera à comprendre comment utiliser `.map()`. La transformation des données est au cœur de nombreux outils et industries, c'est pourquoi `.map()` est un élément essentiel de nombreux projets.

Si vous avez des questions ou des commentaires sur `.map()`, je serai ravi d'en discuter !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!