ArrayのforEach()とmap()の違い

関連する推奨事項: 「JavaScript ビデオ チュートリアル 」

今日は、次の Array.forEach() を見てみましょう。 Array Array.map() メソッドとの違い。

forEach() メソッドと map() メソッドは通常、Array 要素を走査するために使用されますが、ほとんど違いはありません。1 つずつ紹介していきます。

1. 戻り値

forEach() メソッドは unknown を返しますが、map()変換された要素を含む新しい配列を返します。

const numbers = [1, 2, 3, 4, 5];

// 使用 forEach()
const squareUsingForEach = [];
numbers.forEach(x => squareUsingForEach.push(x*x));

// 使用 map()
const squareUsingMap = numbers.map(x => x*x);

console.log(squareUsingForEach); // [1, 4, 9, 16, 25]
console.log(squareUsingMap);     // [1, 4, 9, 16, 25]

forEach() は 未定義を返すため、新しい変換された配列を作成するには空の配列を渡す必要があります。 map() メソッドにはそのような問題はなく、新しく変換された配列を直接返します。この場合、map() メソッドを使用することをお勧めします。

2. 他のメソッドをリンクする

map()メソッドの出力は他のメソッド (reduce()# など) にリンクできます。 ##、sort()、filter()) は、1 つのステートメントで複数の操作を実行するためにチェーンされています。

一方、

forEach() はターミナル メソッドです。つまり、unknown を返すため、他のメソッドとチェーンすることはできません。

次の 2 つのメソッドを使用して、配列内の各要素の二乗和を求めます。

onst numbers = [1, 2, 3, 4, 5];

// 使用 forEach()
const squareUsingForEach = []
let sumOfSquareUsingForEach = 0;
numbers.forEach(x => squareUsingForEach.push(x*x));
squareUsingForEach.forEach(square => sumOfSquareUsingForEach += square);

// 使用 map()
const sumOfSquareUsingMap = numbers.map(x => x*x).reduce((total, value) => total + value)
;

console.log(sumOfSquareUsingForEach); // 55
console.log(sumOfSquareUsingMap);     // 55

複数の演算が必要な場合は、

forEach()メソッドを使用します。非常に面倒な作業の 1 つです。この場合、map() メソッドを使用できます。

3. パフォーマンス

// Array:
var numbers = [];
for ( var i = 0; i < 1000000; i++ ) {
    numbers.push(Math.floor((Math.random() * 1000) + 1));
}

// 1. forEach()
console.time("forEach");
const squareUsingForEach = [];
numbers.forEach(x => squareUsingForEach.push(x*x));
console.timeEnd("forEach");

// 2. map()
console.time("map");
const squareUsingMap = numbers.map(x => x*x);
console.timeEnd("map");

これは、MacBook 上の

Google Chrome v83.0.4103.106 (64-bit) で上記のコードを実行した後のものです。プロの結果です。上記のコードをコピーして、自分のコンソールで試してみることをお勧めします。

forEach: 26.596923828125ms
map:     21.97998046875ms

明らかに、

map() メソッドは、要素を変換する forEach() メソッドよりも優れています。

4. トラバーサルの中断

これら 2 つのメソッドはどちらも

break によって中断できません。そうでない場合は、例外がスローされます:

const numbers = [1, 2, 3, 4, 5];

// break; inside forEach()
const squareUsingForEach = [];
numbers.forEach(x => { 
  if(x == 3) break; // <- SyntaxError 
  squareUsingForEach.push(x*x);
});

// break; inside map()
const squareUsingMap = numbers.map(x => {
  if(x == 3) break; // <- SyntaxError 
  return x*x;
});

上記のコードは

SyntaxError:

ⓧ Uncaught SyntaxError: Illegal break statement

をスローします。トラバーサルを中断する必要がある場合は、単純な for ループまたは

for-of/# を使用する必要があります。 ##for-inサイクル。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const numbers = [1, 2, 3, 4, 5]; // break; inside for-of loop const squareUsingForEach = []; for(x of numbers){ if(x == 3) break; squareUsingForEach.push(x*x); }; console.log(squareUsingForEach); // [1, 4]</pre><div class="contentsignin">ログイン後にコピー</div></div>5.最後に<h2> <strong></strong>構文が短く、連鎖性があるため、配列の要素を変換するには </h2>map()<p> を使用することをお勧めします。そしてより良いパフォーマンス。 <code>配列を返したくない場合、または配列の要素を変換しない場合は、

forEach()

メソッドを使用します。 最後に、何らかの条件に基づいて配列の利便性を停止または中断したい場合は、単純な for ループまたは

for-of

/ for-in を使用する必要があります。 ループ。

元のアドレス: https://codingnconcepts.com/javascript/difference-between-foreach-and-map-in-javascript-array/

著者: Ashish Lahoti

翻訳アドレス: https://segmentfault.com/a/1190000038421334

プログラミング関連の知識については、

プログラミング教育

をご覧ください。 ！

以上がArrayのforEach()とmap()の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。