JavaScript

最終更新日:
公開日:

レシピ

配列

配列の全要素に値を一括で代入する

mapメソッドを使って、配列にある全ての要素に対して値を代入する方法を解説します。

この記事のポイント

  • 要素の値が数値(Number)のときは四則演算や数学の計算を一括でできる
  • 要素の値が文字列(String)のときは文字の追記ができる
  • mapメソッドは元の配列を直接編集しない

配列の全ての要素に対して値を代入する

配列(Array)が標準で備えているmapメソッドを使うと、配列の全ての要素に対して指定した処理を実行することができます。
こちらの仕組みを使うことで、すべての要素に対して値を代入していくことができます。

以下の例では文字列が入った変数numbersの全ての要素に対して「10」を足し算(加算)します。

JS コード例

let numbers = [ 1, 5, 10, 100, 200];

numbers = numbers.map(function(a){
  return a+10;
});
console.log(numbers);
// (5) [11, 15, 20, 110, 210]

mapメソッドは元の配列を直接編集しないため、上記の例のように計算した後の配列を元の変数numbersで受け取るか、新しい変数を用意して受け取る必要があります。

mapメソッドを使うと足し算以外の四則演算や累乗などの計算を配列の全ての要素に対して実行することもできます。

JS コード例

let numbers = [ 1, 2, 5, 7, 10];

// パターン1:引き算(減算)
let calc1 = numbers.map(function(a){
  return a - 10;
});
console.log(calc1);
// (5) [-9, -8, -5, -3, 0]


// パターン2:掛け算(乗算)
let calc2 = numbers.map(function(a){
  return a * 10;
});
console.log(calc2);
// (5) [10, 20, 50, 70, 100]


// パターン3:割り算(除算)
let calc3 = numbers.map(function(a){
  return a / 10;
});
console.log(calc3);
// (5) [0.1, 0.2, 0.5, 0.7, 1]


// パターン4:累乗を計算
let calc4 = numbers.map(function(a){
  return Math.pow(a,2);
});
console.log(calc4);
// (5) [1, 4, 25, 49, 100]


// パターン5:平方根を計算
let calc5 = numbers.map(function(a){
  return Math.sqrt(a+a);
});
console.log(calc5);
// (5) [1.4142135623730951, 2, 3.1622776601683795, 3.7416573867739413, 4.47213595499958]

配列の要素に入っている値が文字列(String)の場合は、全ての文字列の末尾に文字を追記することなどが可能です。

JS コード例

let animal = ['lion', 'cat', 'dog'];

animal= animal.map(function(a){
  return a + "s";
});
console.log(animal);
// (3) ["lions", "cats", "dogs"]

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。