プログラミング初心者でもわかる！JavaScript配列操作の基礎知識

最近、JavaScriptの勉強をしているんだけど、配列って何か分からなくて困ってるんだよね。

そうだね、JavaScriptで配列を使うことはとても多いから、基本的な操作方法は覚えておいた方がいいよ。

でも、プログラミング初心者には難しそうだし、覚えることがたくさんありそうだよね。

大丈夫、配列の基本操作を覚えれば、実際に使ってみると意外と簡単だよ。
少しずつ順番にやっていけば大丈夫だよ。

配列とは？

配列の基礎知識

JavaScriptにおける配列とは、複数の要素をまとめて管理するためのオブジェクトです。

配列には、複数の値を保持することができます。

個々の要素には、0から始まるインデックス番号が割り当てられています。

また、要素の型は揃える必要はありません。

配列の操作方法

要素の追加・削除

配列に要素を追加するには、push()メソッドを使用します。

push()メソッドを使用すると、配列の末尾に新しい要素が追加されます。

一方、配列から要素を削除するには、pop()メソッドを使用します。
pop()メソッドを使用すると、配列の末尾の要素が削除されます。

// 配列に要素を追加する
let fruits = ["apple", "orange"];
fruits.push("banana"); // 配列の末尾に要素を追加する
console.log(fruits); // ["apple", "orange", "banana"]

// 配列から要素を削除する
fruits.pop(); // 配列の末尾の要素を削除する
console.log(fruits); // ["apple", "orange"]

要素の取得・変更

配列の要素にアクセスするには、インデックス番号を指定します。

配列の要素を変更するには、指定したインデックス番号に対して新しい値を代入します。

// 配列の要素を取得する
let fruits = ["apple", "orange", "banana"];
console.log(fruits[1]); // "orange"

// 配列の要素を変更する
fruits[1] = "grape";
console.log(fruits); // ["apple", "grape", "banana"]

配列の結合・分割

配列同士を結合するには、concat()メソッドを使用します。

また、配列を複数の部分配列に分割するには、slice()メソッドを使用します。

// 配列の結合
let fruits1 = ["apple", "orange"];
let fruits2 = ["banana", "grape"];
let allFruits = fruits1.concat(fruits2);
console.log(allFruits); // ["apple", "orange", "banana", "grape"]

// 配列の分割
let months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"];
let firstHalf = months.slice(0, 3);
let secondHalf = months.slice(3, 6);

console.log(firstHalf); // ["Jan", "Feb", "Mar"]
console.log(secondHalf); // ["Apr", "May", "Jun"]

応用編：高度な配列操作

多次元配列の操作

多次元配列は、配列の中に配列が含まれる構造です。

JavaScriptでは、多次元配列を使用して表や行列を表現することができます。
以下は、2次元配列を定義し、配列の要素にアクセスする例です。

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
console.log(matrix[0][0]); // 1
console.log(matrix[1][2]); // 6

配列のソート

配列をソートするには、sort()メソッドを使用します。

sort()メソッドは、配列の要素を文字列として比較し、アルファベット順に並べ替えます。

let fruits = ["apple", "orange", "banana", "grape"];
fruits.sort();
console.log(fruits); // ["apple", "banana", "grape", "orange"]

数値の配列をソートする場合は、比較関数を渡す必要があります。

比較関数は、引数に2つの要素を受け取り、比較して正の値を返すと、第1引数の要素が第2引数の要素よりも大きいと判断されます。

以下は、数値の配列を昇順にソートする例です。

let numbers = [4, 2, 1, 3, 5];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers); // [1, 2, 3, 4, 5]

filter, map, reduceメソッドによるデータ加工

filter()メソッドは、配列の要素を条件に基づいてフィルタリングし、新しい配列を作成します。

以下は、偶数のみをフィルタリングする例です。

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(n) {
  return n % 2 === 0;
});
console.log(evenNumbers); // [2, 4]

map()メソッドは、配列の要素を変換して新しい配列を作成します。

以下は、数値を2倍に変換する例です。

let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = numbers.map(function(n) {
  return n * 2;
});
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

reduce()メソッドによるデータ加工

reduce()メソッドは、配列の要素を累積して1つの値を作成するためのメソッドです。

reduce()メソッドは、第1引数に累積値を保持するための関数、第2引数に初期値を指定します。

reduce()メソッドは、配列の要素を1つずつ処理しながら累積値を更新し、最終的な累積値を返します。

以下は、配列の要素を合計する例です。

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function (accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
console.log(sum); // 15

filter()メソッドは、配列の要素を条件に基づいてフィルタリングするためのメソッドです。

filter()メソッドは、第1引数に条件を評価するための関数を指定します。
filter()メソッドは、条件を満たす要素だけを残して新しい配列を作成して返します。

以下は、配列の偶数だけをフィルタリングする例です。

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function (number) {
  return number % 2 === 0;
});
console.log(evenNumbers); // [2, 4]

map()メソッドは、配列の要素を変換して新しい配列を作成するためのメソッドです。

map()メソッドは、第1引数に要素を変換するための関数を指定します。
map()メソッドは、各要素を変換した新しい配列を返します。

以下は、配列の要素を2倍にする例です。

let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = numbers.map(function (number) {
  return number * 2;
});
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

以上で、JavaScript配列操作の基礎知識についての記事は終わりです。

まとめ

JavaScriptの配列操作について、基礎的な操作方法や応用的な使い方について紹介しました。

配列はJavaScriptにおいて非常に重要な概念であり、理解していることはプログラミングの基礎力につながります。

配列を上手に操作することで、より高度なプログラミング技術を習得することができます。

この記事を参考に、配列操作について学んでみてはいかがでしょうか。

JavaScript配列操作に関するよくある質問と回答

配列の要素を削除するにはどうすればいいですか？

配列の要素を削除するには、splice()メソッドを使用します。splice()メソッドに削除したい要素のインデックスと削除する要素の数を指定することで、要素を削除することができます。

配列をコピーする方法にはどのような方法がありますか？

配列をコピーする方法には、浅いコピーと深いコピーの2つがあります。

浅いコピーは、配列の参照先をコピーするだけで、元の配列と同じメモリ領域を参照するため、元の配列と同じ値が変更される場合があります。

一方、深いコピーは、配列の全ての要素を新しいメモリ領域にコピーするため、元の配列とは独立した新しい配列が作成されます。

深いコピーを行うには、spread構文を使用するか、JSON.stringify()とJSON.parse()を組み合わせて行います。

配列の要素を逆順にする方法を教えてください。

配列の要素を逆順にするには、reverse()メソッドを使用します。

reverse()メソッドを使用することで、配列の要素が逆順に並び替えられます。

配列の要素数を取得するにはどうすればいいですか？

配列の要素数を取得するには、lengthプロパティを使用します。

lengthプロパティは、配列の要素数を表す数値を返します。

配列をソートする方法を教えてください。

配列をソートするには、sort()メソッドを使用します。

sort()メソッドを使用することで、配列の要素が昇順にソートされます。

sort()メソッドに比較関数を渡すことで、要素をソートする方法をカスタマイズすることができます。

1冊ですべて身につくJavaScript入門講座 (１冊ですべて身につく)

created by Rinker

• Kindle
• Amazon