JavaScript

レシピ

配列

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

配列内にある複数の要素に対して、一括で値を代入する方法を解説します。

この記事のポイント

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

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

配列に対してmapメソッドを使うと、全ての要素に対して一括で値を代入することができます。

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

コード例

var 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で受け取るか、新しい変数を用意して受け取る必要があります。

配列の全ての要素に対して、足し算以外の四則演算や累乗などの数学の計算をすることもできます。

コード例

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

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


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


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


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


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

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

コード例

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

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

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

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

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