【保存版】JavaScriptの配列操作：配列の要素を書き換える6つの方法とサンプルコード

2024-06-04

JavaScriptの配列で要素を置き換える方法

spliceメソッドは、配列の要素を追加、削除、置き換えるための最も一般的な方法です。

基本的な構文は以下の通りです。

array.splice(start, deleteCount, item1, item2, ...);

start: 置換を開始するインデックス
deleteCount: 削除する要素の数
item1, item2, ...: 置換する要素

例：

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

// 3番目の要素を10に置き換える
numbers.splice(2, 1, 10);
console.log(numbers); // [1, 2, 10, 4, 5]

// 1番目から3番目の要素を削除して、100, 200を挿入する
numbers.splice(1, 3, 100, 200);
console.log(numbers); // [1, 100, 200, 5]

forループを使って、配列の各要素を順番に確認し、置き換える要素と一致したら新しい値に置き換える方法もあります。

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

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] === 3) {
    numbers[i] = 100;
  }
}

console.log(numbers); // [1, 2, 100, 4, 5]

mapメソッドは、配列の各要素に対して処理を行い、新しい配列を生成するメソッドです。

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

const newNumbers = numbers.map(function(number) {
  if (number === 3) {
    return 100;
  } else {
    return number;
  }
});

console.log(newNumbers); // [1, 2, 100, 4, 5]

シンプルで分かりやすい方法: spliceメソッド
柔軟性が必要な場合: forループ
新しい配列を作成したい場合: mapメソッド

spliceメソッドを使用する

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

// 3番目の要素を10に置き換える
numbers.splice(2, 1, 10);
console.log(numbers); // [1, 2, 10, 4, 5]

// 1番目から3番目の要素を削除して、100, 200を挿入する
numbers.splice(1, 3, 100, 200);
console.log(numbers); // [1, 100, 200, 5]

forループを使用する

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

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] === 3) {
    numbers[i] = 100;
  }
}

console.log(numbers); // [1, 2, 100, 4, 5]

mapメソッドを使用する

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

const newNumbers = numbers.map(function(number) {
  if (number === 3) {
    return 100;
  } else {
    return number;
  }
});

console.log(newNumbers); // [1, 2, 100, 4, 5]

説明

上記のコードでは、以下の3つの方法で配列の要素を置き換えています。

spliceメソッド: spliceメソッドは、配列の要素を追加、削除、置き換えるための最も一般的な方法です。上記の例では、splice(2, 1, 10)を使用して3番目の要素を10に置き換え、splice(1, 3, 100, 200)を使用して1番目から3番目の要素を削除して100と200を挿入しています。
forループ: forループを使って、配列の各要素を順番に確認し、置き換える要素と一致したら新しい値に置き換えます。上記の例では、if (numbers[i] === 3)を使用して3と一致する要素を100に置き換えています。
mapメソッド: mapメソッドは、配列の各要素に対して処理を行い、新しい配列を生成するメソッドです。上記の例では、if (number === 3)を使用して3と一致する要素を100に置き換えています。

補足

上記のコードはあくまで一例です。状況に合わせて、自由に改造してください。

JavaScriptで配列の要素を置き換えるその他の方法

indexOf() と Math.random() を使用する

この方法は、ランダムなインデックスで要素を置き換える場合に役立ちます。

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

const randomIndex = Math.floor(Math.random() * numbers.length);
numbers[randomIndex] = 100;

console.log(numbers);

filter() と map() を使用する

この方法は、条件に一致する要素を新しい値に置き換える場合に役立ちます。

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

const newNumbers = numbers.filter(number => number !== 3)
  .map(number => number === 2 ? 100 : number);

console.log(newNumbers); // [1, 100, 4, 5]

reduce() を使用する

この方法は、より複雑な置換操作を行う場合に役立ちます。

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

const newNumbers = numbers.reduce((acc, number, index) => {
  if (index === 2) {
    acc.push(100);
  } else {
    acc.push(number);
  }
  return acc;
}, []);

console.log(newNumbers); // [1, 2, 100, 4, 5]

注意事項

上記の方法は、いずれも元の配列を変更する破壊的な操作です。元の配列を保持する必要がある場合は、コピーしてから操作するようにしてください。
性能を考慮する場合は、使用する方法は状況によって異なります。一般的に、splice は最も効率的な方法ですが、filter や map はより柔軟性があります。

上記の方法に加え、JavaScriptには他にも様々な配列操作のメソッドがあります。詳しくは、MDN Web Docsの配列に関するドキュメントを参照してください。

javascript arrays