Java Scriptの基礎その21　配列操作の基本

イントロダクション

JavaScriptの配列は、データを操作するための非常に強力なツールです。この記事では、代表的な配列操作メソッドを使用して、どのように配列を操作するかを丁寧に解説します。具体的には、slice、splice、reverse、concat、join、at、およびforEachについて学びます。各メソッドの使い方とその結果を例を交えて説明するので、初心者の方にも理解しやすい内容となっています。

配列のスライス: sliceメソッド

sliceメソッドの基本

sliceメソッドは、配列の一部を抽出して新しい配列を作成します。元の配列は変更されません。

let arraySample_1 = ["a", "b", "c", "d", "e"];
console.log(arraySample_1);  // ["a", "b", "c", "d", "e"]
console.log(arraySample_1.slice(2));  // ["c", "d", "e"]
console.log(arraySample_1.slice(2, 4));  // ["c", "d"]
console.log(arraySample_1.slice(-2));  // ["d", "e"]
console.log(arraySample_1.slice(2, -1));  // ["c", "d"]
console.log([...arraySample_1]);  // ["a", "b", "c", "d", "e"]

sliceの使用例

• slice(2)は、インデックス2から最後までの要素を抽出します。
• slice(2, 4)は、インデックス2から3までの要素を抽出します。
• slice(-2)は、後ろから2つの要素を抽出します。

配列の操作: spliceメソッド

spliceメソッドの基本

spliceメソッドは、配列の内容を変更するために使用されます。特定の位置から要素を削除、追加することができます。

console.log(arraySample_1);  // ["a", "b", "c", "d", "e"]
console.log(arraySample_1.splice(-1));  // ["e"]
console.log(arraySample_1);  // ["a", "b", "c", "d"]
console.log(arraySample_1.splice(1, 2));  // ["b", "c"]
console.log(arraySample_1);  // ["a", "d"]

spliceの使用例

• splice(-1)は、最後の要素を削除します。
• splice(1, 2)は、インデックス1から2つの要素を削除します。

配列の反転: reverseメソッド

reverseメソッドの基本

reverseメソッドは、配列の要素の順序を反転させます。元の配列も変更されます。

let arraySample_2 = ["f", "g", "h", "i", "j"];
console.log(arraySample_2);  // ["f", "g", "h", "i", "j"]
console.log(arraySample_2.reverse());  // ["j", "i", "h", "g", "f"]
console.log(arraySample_2);  // ["j", "i", "h", "g", "f"]

配列の結合: concatメソッド

concatメソッドの基本

concatメソッドは、2つ以上の配列を結合して新しい配列を作成します。

const arrayConcat = arraySample_1.concat(arraySample_2);
console.log(arrayConcat);  // ["a", "d", "j", "i", "h", "g", "f"]
console.log([...arraySample_1, ...arraySample_2]);  // ["a", "d", "j", "i", "h", "g", "f"]

配列の結合: joinメソッド

joinメソッドの基本

joinメソッドは、配列の全要素を文字列として結合します。

console.log(arrayConcat.join("-"));  // "a-d-j-i-h-g-f"

配列のアクセス: atメソッド

atメソッドの基本

atメソッドは、特定のインデックスにある要素を返します。負のインデックスも使用できます。

const arraySample_3 = [11, 26, 57, 74];
console.log(arraySample_3[0]);  // 11
console.log(arraySample_3.at(0));  // 11
console.log(arraySample_3[arraySample_3.length - 1]);  // 74
console.log(arraySample_3.slice(-1)[0]);  // 74
console.log(arraySample_3.at(-1));  // 74
console.log("あゆみ".at(0));  // "あ"
console.log("あゆみ".at(-1));  // "み"

繰り返し処理: forEachメソッド

forEachメソッドの基本

forEachメソッドは、配列の各要素に対して一度ずつ指定された関数を実行します。

const arraySample_4 = [200, -400, -500, 800, -1200, 1800, 2300];
const mapSample_1 = new Map([
  ["USD", "United States Dollar"],
  ["EUR", "Euro"],
  ["JPY", "Japanese Yen"],
]);
const setSample_1 = new Set(["USD", "EUR", "USD", "JPY", "JPY"]);

// 通常の書き方
for (const [i, arrayElement] of arraySample_4.entries()) {
  if (arrayElement > 0) {
    console.log(`Your movement ${i + 1} was ${arrayElement}`);
  } else {
    console.log(`You movement ${i + 1} went back ${Math.abs(arrayElement)}`);
  }
}

// forEachで書いた場合
arraySample_4.forEach(function (arrayElement, i) {
  if (arrayElement > 0) {
    console.log(`Your movement ${i + 1} was ${arrayElement}`);
  } else {
    console.log(`You movement ${i + 1} went back ${Math.abs(arrayElement)}`);
  }
});

// MapをforEach
mapSample_1.forEach(function (value, key, map) {
  console.log(`${key}: ${value}`);
});

// SetをforEach
setSample_1.forEach(function (value, _, map) {
  console.log(`${value}`);
});

まとめ

JavaScriptの配列操作は、効率的で柔軟なデータ処理を可能にします。本記事で紹介したslice、splice、reverse、concat、join、at、forEachメソッドを使いこなすことで、配列操作のスキルを向上させることができます。これらのメソッドを理解し、実際のプロジェクトで活用することで、より効率的なコードを書けるようになるでしょう。

Githubでも公開してるよ！

先ほどのコードはGithubで公開しているよ。
ここ見てね！