JavaScript 配列: マップ

マップ関数: 1 対 1 データ変換

データの一部を返すため、または一貫した操作を実行するためにデータを変更する必要がある場合があります。これが マッピングです。

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

各入力に対して出力を生成する必要がある場合は、通常、map が推奨される方法です。各レコードに対して動作する Map 関数を受け入れます。マッピング関数によって返された値は、新しい配列内の元の値と同じ位置に表示されます。

for ループから .map() まで

.map() は、基本的な for ループで完全に機能します。

たとえば、次の配列内のすべての要素を大文字に変換する必要があります:

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

次に、いくつかの実装方法を示します:

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

`const newData = new Array(data.length)` と `const newData = []` などの一部のバリエーションは、異なるループ タイプによって必須ではなく、歴史的なコーディング スタイルの違いを表しています。

使用例

データ変換

`.map()` の一般的な使用法には、オブジェクトから値を取得したり、データに対して一貫した変更や *変換* を実行したりすることが含まれます。

多くの場合、より大きなレコードごとに 1 つの情報を取得する必要があります。 `map` はまさにこれのために設計されています。

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

注文に従業員割引を提供する必要がある場合は、「map」でもそれが可能です。

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

ここでは出力はありません。自分で試してみたい場合は、ブラウザ コンソールまたは RunJS などのツールに貼り付けることをお勧めします。RunJS は、これらの例を作成してテストするために使用しています。

増分

これは、データ変換の特別なバージョンです。 「情報なし」から始めますが、配列を持つという行為によって各エントリにインデックスが与えられ、1 を加算することでインデックス (0 から始まる) をカウント数に変換できます。

`value` (*map* 関数に指定される最初の引数) を使用する必要はありませんが、2 番目の引数にアクセスするには名前を指定する必要があります。アンダースコア文字は有効な変数名であり、この例のように、不要な値を表すためによく使用されます。

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

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

これは `.map()` の例ですが、新しい関数 `Array.from()` でもこれを行うことができます。

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

`.map()` を使用するときに別のメソッドについて説明するのは奇妙に思えるかもしれませんが、少なくとも上記の例では、舞台裏では `Array.from()` が `.map()` を呼び出します。

概要

これが `.map()` の使用方法を理解するのに役立つことを願っています。データ変換は多くのツールや業界の中核であるため、「.map()」は多くのプロジェクトの重要な部分です。

`.map()` についてご質問やコメントがございましたら、喜んで話し合います。

以上がJavaScript 配列: マップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。