Map JavaScript：.map（）メソッドのガイド

プログラマーは、コードの繰り返しを減らすのが好きです。コードを繰り返すほど、保守性が低下し、プログラムの実行速度が低下します。これが、JavaScriptにデータセットを反復処理するためのさまざまなメソッドがある理由です。

これらのメソッドの1つは、map()と呼ばれます。 方法。このメソッドは、既存の配列をループし、その配列内のすべてのアイテムに対して特定の機能を実行します。

このガイドでは、JavaScriptのmap()の使用方法について説明します。 関数。 map()の3つの一般的な例を見ていきます 開始に役立つ機能を実行します。

マップ機能とは何ですか？

JavaScriptのmap() メソッドは、配列内の各アイテムに対して特定の関数を呼び出します。この関数の結果は、独自の配列に移動されます。

たとえば、配列内のすべての項目に2を掛けたいとします。これを行うには、すべての配列項目を2倍にする関数を作成し、その関数をmap()に移動します。 方法。

map()の構文 機能は次のとおりです：

const newArray = oldArray.map(function, thisValue);

function 配列内の各要素で実行されるコールバック関数です。関数の詳細については、JavaScript関数の究極のガイドをご覧ください。 thisValue thisに保存されるデフォルト値です 関数内の変数。デフォルトでは、これは未定義です。

mapメソッドは、コールバック関数の結果に基づいて新しい配列を作成します。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

map() メソッドには多くの用途があります。最も一般的なのは、配列要素のリストで関数を呼び出すことです。この例としては、数値のリスト内のすべての数値を乗算したり、文字列のリスト内の各文字列の長さを検索したりします。

また、ReactやVue.jsなどのJavaScriptライブラリでリストをレンダリングするために使用される関数もあります。

マップを使用した関数の呼び出し

map() メソッドを使用すると、リスト内のすべてのアイテムに対して繰り返しタスクを実行できるため、多くの場合に役立ちます。

あなたがクッキーストアを所有していて、各クッキーの価格を5％引き上げるとします。すべての新しい価格を個別に計算するのではなく、map()を使用できます。 方法。

使用するコードは次のとおりです。

const cookiePrices = [1.50, 1.75, 1.60, 2.00, 2.05, 1.45];
const newCookiePrices = cookiePrices.map(cookie => {
	var price = cookie * 1.05;
	return price.toFixed(2);
});

console.log(newCookiePrices);

コードは次のようになります：

["1.58", "1.84", "1.68", "2.10", "2.15", "1.52"]

この例では、すべてのCookieの価格を5％引き上げました。まず、変数「cookiePrices」でCookieの価格のリストを宣言しました。次に、map()を使用しました 各Cookieの5％の値上げを計算する関数を使用したメソッド。

「cookie*1.05」は増加率を計算し、その増加を小数点以下第2位に四捨五入して返しました。最後に、console.log()を使用して新しいアレイをコンソールに出力しました 方法。

関数を独自の関数に移動して、コードを読みやすくすることもできます。

function calculateIncrease(cookie) {
	var price = cookie * 1.05;
	return price.toFixed(2);
}

const cookiePrices = [1.50, 1.75, 1.60, 2.00, 2.05, 1.45];
const newCookiePrices = cookiePrices.map(calculateIncrease);

console.log(newCookiePrices);

私たちのコードは以前と同じ値を返しますが、より読みやすくなっています：

["1.58", "1.84", "1.68", "2.10", "2.15", "1.52"]

配列内のアイテムの変更

map() メソッドは、配列内のアイテムを変更するためによく使用されます。私たちのクッキーショップが顧客のためのロイヤルティプログラムを構築しているとしましょう。クッキーを購入するたびに10ポイントを獲得し、100ポイントを獲得すると、無料のクッキーを獲得できます。

次のプログラムを使用すると、このタスクを実行できます。

var customers = [
	{ name: "Hannah Geoffrey", cookiesPurchased: 2 },
	{ name: "Peter Clarkson", cookiesPurchased: 3 },
	{ name: "Steven Hanson", cookiesPurchased: 7 }
]

function calculateLoyaltyPoints(customer) {
	var newCustomer = {
		name: customer.name,
		cookiesPurchased: customer.cookiesPurchased,
		points: customer.cookiesPurchased * 10
	}

	return newCustomer;
}

var customersWithPoints = customers.map(calculateLoyaltyPoints);

console.log(customersWithPoints);

コードは次のようになります：

[{ cookiesPurchased: 2, name: "Hannah Geoffrey", points: 20 }, { cookiesPurchased: 3, name: "Peter Clarkson", points: 30 }, { cookiesPurchased: 7, name: "Steven Hanson", points: 70 }]

この例では、購入したCookieの数に基づいて、各顧客に付与する必要のあるポイントの総数を計算しました。

まず、「顧客」と呼ばれるオブジェクトの配列を宣言しました。このリストには、お客様の名前と、キーと値のペアを使用して購入したCookieの数が格納されます。

次に、calculateLoyaltyPoints()という関数を宣言しました。 。この関数は、各顧客が購入したCookieの数に10を掛けて計算される、「ポイント」と呼ばれる新しいアイテムを各顧客アイテムに追加します。

map()を使用します 顧客のリストを反復処理し、calculateLoyaltyPoints()を適用するメソッド 関数。最後に、改訂された顧客リストを印刷します。このリストには、各顧客のエントリに追加した「ポイント」の価値が反映されています。

ライブラリを使用してリストをレンダリングする

map() メソッドは、ReactなどのJavaScriptライブラリで一般的に使用されています。このメソッドの目的は、リスト内のアイテムをレンダリングすることです。 map()の例を見てみましょう Reactで。

私たちの店が私たちのウェブサイトで販売しているクッキーのリストを表示したいとします。このコードを使用してこれを行うことができます：

import React from "react";
import ReactDOM from "react-dom";

var cookies = ["Raspberry Chocolate Chip", "White Chocolate Chip", "Oat", "Milk Chocolate Chip"];

const CookieList = () => (
	<div>
		<ul>{cookies.map((cookie, i) => 
			<li key={i}>{cookie}</li>
		       )}
		</ul>
	</div>
);

const root = document.getElementById("root");
ReactDOM.render(<CookieList />, root);

このコードは、リストをレンダリングするコンポーネントをReactに作成します。各リストアイテムは、map()を使用してレンダリングされる