【JavaScript】配列の基本を徹底解説！初期化、作成、追加、更新、削除、存在チェック

はじめに

JavaScriptにおける配列は、複数の値を一つの変数に格納するための重要なデータ構造です。

この記事では、配列の初期化、作成、および検証方法について、初心者から上級者までが理解できるように幅広く解説します。

基本的な配列の作成方法から始め、より複雑な操作や検証テクニックについても掘り下げていきます。

サルモリ

配列はJavaScriptで最もよく使われるデータ構造の一つだよ。しっかりとマスターしよう！

アロー関数を徹底的に学びたい人向けです！画像をクリックしてご覧ください！
KindleUnlimited会員であれば、全ての本をご覧頂けます。 アロー関数と便利な関数を理解すれば、JavaScriptの世界が変わる

配列の初期化と作成

配列を初期化する方法はいくつかありますが、最も一般的な方法はリテラル構文を使用することです。

ソースコード例

let emptyArray = [];
let fruits = ['apple', 'banana', 'cherry'];

console.log(emptyArray);
console.log(fruits);

let emptyArray = [];

let fruits = ['apple', 'banana', 'cherry'];

console.log(emptyArray);

console.log(fruits);

 出力結果
[]
['apple', 'banana', 'cherry']

サルモリ

リテラル構文を使うと、簡単に配列を作成できるね。

コンストラクタ関数を使用した配列の作成

配列を作成する別の方法として、Arrayコンストラクタ関数を使用する方法があります。

ソースコード例

let arrayWithSize = new Array(3);
let arrayWithElements = new Array('apple', 'banana', 'cherry');

console.log(arrayWithSize);
console.log(arrayWithElements);

let arrayWithSize = new Array(3);

let arrayWithElements = new Array('apple', 'banana', 'cherry');

console.log(arrayWithSize);

console.log(arrayWithElements);

 出力結果
[ , , ]
['apple', 'banana', 'cherry']

サルモリ

Arrayコンストラクタを使うと、サイズを指定して配列を作成することも、要素を直接指定して配列を作成することもできるね。

配列の検証

JavaScriptで変数が配列かどうかを検証するには、Array.isArray()メソッドを使用します。

ソースコード例

let fruits = ['apple', 'banana', 'cherry'];
let notArray = 'I am not an array';

console.log(Array.isArray(fruits)); // true
console.log(Array.isArray(notArray)); // false

let fruits = ['apple', 'banana', 'cherry'];

let notArray = 'I am not an array';

console.log(Array.isArray(fruits)); // true

console.log(Array.isArray(notArray)); // false

 出力結果
true
false

サルモリ

Array.isArray()メソッドは、変数が配列かどうか確認するのにとても便利だね。

配列の要素にアクセスする

配列の特定の要素にアクセスするには、インデックスを使用します。インデックスは0から始まります。

ソースコード例

let fruits = ['apple', 'banana', 'cherry'];

console.log(fruits[0]); // 'apple'
console.log(fruits[1]); // 'banana'
console.log(fruits[2]); // 'cherry'

let fruits = ['apple', 'banana', 'cherry'];

console.log(fruits[0]); // 'apple'

console.log(fruits[1]); // 'banana'

console.log(fruits[2]); // 'cherry'

 出力結果
apple
banana
cherry

サルモリ

インデックスを使えば、配列の任意の要素に簡単にアクセスできるよ。

配列の長さと動的な要素の追加

JavaScriptの配列は動的にサイズが変更されます。配列の長さを管理するには、lengthプロパティを使用します。また、lengthプロパティを設定することで、配列のサイズを動的に変更することも可能です。

ソースコード例

let fruits = ['apple', 'banana', 'cherry'];
console.log(fruits.length); // 3

fruits.length = 5;
console.log(fruits); // ['apple', 'banana', 'cherry', undefined, undefined]

fruits.length = 2;
console.log(fruits); // ['apple', 'banana']

let fruits = ['apple', 'banana', 'cherry'];

console.log(fruits.length); // 3

fruits.length = 5;

console.log(fruits); // ['apple', 'banana', 'cherry', undefined, undefined]

fruits.length = 2;

console.log(fruits); // ['apple', 'banana']

 出力結果
3
['apple', 'banana', 'cherry', undefined, undefined]
['apple', 'banana']

サルモリ

配列のlengthプロパティを使うと、配列のサイズを柔軟に変更できるんだね。

: 詳しくはコチラ【JavaScript】配列に要素を追加する方法5選！push、unshift、splice、スプレッド演算子を使ってみよう

はじめに JavaScriptでの配列操作は、とてもよく行います！特に、配列に新しい要素を追加する方法は、データ構造を動的に管理する上で非常に重要です。この記事では、push、unshift、co ...

続きを見る

spliceメソッドで要素を更新

既存の要素を削除または置換し、必要に応じて新しい要素を追加するには、spliceメソッドを使用します。

このメソッドは、削除された要素を含む新しい配列を返します。

ソースコード例

class Program {
  static main() {
    const fruits = ['apple', 'banana', 'orange'];
    const removedItems = fruits.splice(1, 1, 'grape');
    console.log(fruits);
    console.log(removedItems);
  }
}
Program.main();

class Program {

static main() {

const fruits = ['apple', 'banana', 'orange'];

const removedItems = fruits.splice(1, 1, 'grape');

console.log(fruits);

console.log(removedItems);

}

Program.main();

 出力結果
['apple', 'grape', 'orange']
['banana']

サルモリ

spliceメソッドは、場所を指定して要素を更新できるから、かなり便利だよ！

: 削除方法はコチラ【JavaScript】配列の要素の削除方法6選！クリア方法を徹底解説！

はじめに JavaScriptでの配列操作は開発において避けて通れない要素の一つです。特に配列からの要素の削除を行うことは頻繁にあります。この記事では、いろいろな配列の要素の削除方法を解説します。 ...

続きを見る

配列の反復処理

配列の各要素を操作するためには、反復処理を行うことが一般的です。forEachメソッドやfor...ofループを使用することで、配列の各要素にアクセスできます。

`forEach`メソッド

forEachメソッドを使用すると、配列の各要素に対して関数を実行できます。

ソースコード例

let fruits = ['apple', 'banana', 'cherry'];
fruits.forEach((fruit, index) => {
    console.log(index + ': ' + fruit);
});

let fruits = ['apple', 'banana', 'cherry'];

fruits.forEach((fruit, index) => {

console.log(index + ': ' + fruit);

});

 出力結果
0: apple
1: banana
2: cherry

サルモリ

forEachメソッドは、配列の各要素に対して繰り返し操作を行う時に便利だね。

`for...of`ループ

ES6で導入されたfor...ofループを使うと、配列の要素を簡単に反復処理できます。

ソースコード例

for (let fruit of fruits) {
    console.log(fruit);
}

for (let fruit of fruits) {

console.log(fruit);

}

 出力結果
apple
banana
cherry

サルモリ

for...ofループは、配列の要素を簡潔に扱うのに最適だね。

配列の検証方法

JavaScriptでは、特定の条件を満たす要素が配列内に存在するかを検証するためのメソッドがいくつか提供されています。例えば、includes、find、some、everyなどがあります。

`includes`メソッド

includesメソッドを使用すると、配列が特定の要素を含んでいるかどうかを確認できます。

ソースコード例

let fruits = ['apple', 'banana', 'cherry'];
console.log(fruits.includes('banana')); // true
console.log(fruits.includes('grape')); // false

let fruits = ['apple', 'banana', 'cherry'];

console.log(fruits.includes('banana')); // true

console.log(fruits.includes('grape')); // false

 出力結果
true
false

サルモリ

includesメソッドは、配列に特定の要素が含まれているかどうかを簡単に確認できるよ。

: 詳しくはコチラ【JavaScript】配列に特定の要素が含まれているか存在チェック方法8選

はじめに JavaScriptでの開発を進める中で、配列内に特定の要素が存在するかどうかを確認する必要がしばしばあります。この記事では、配列の要素を存在チェックする方法を網羅的に解説します。アロー ...

続きを見る

`find`メソッド

findメソッドは、テスト関数によって指定された条件を満たす最初の要素の値を返します。該当する要素がない場合はundefinedを返します。

ソースコード例

let numbers = [5, 12, 8, 130, 44];
let found = numbers.find(element => element > 10);

console.log(found); // 12

let numbers = [5, 12, 8, 130, 44];

let found = numbers.find(element => element > 10);

console.log(found); // 12

 出力結果
12

サルモリ

findメソッドは、条件に合う最初の要素を見つける時に使えるね。

`some`と`every`メソッド

someメソッドは、配列内の少なくとも一つの要素が指定されたテスト関数を満たすかどうかを検証します。everyメソッドは、すべての要素がテスト関数を満たすかどうかを検証します。

ソースコード例

let arr = [2, 5, 8, 1, 4];
console.log(arr.some(num => num > 7)); // true
console.log(arr.every(num => num > 7)); // false

let arr = [2, 5, 8, 1, 4];

console.log(arr.some(num => num > 7)); // true

console.log(arr.every(num => num > 7)); // false

 出力結果
true
false

サルモリ

someとeveryメソッドを使うと、配列内の要素が特定の条件を満たしているかどうかを簡単にチェックできるよ。

まとめ

JavaScriptで配列を効果的に扱うためには、その初期化、作成、および検証方法を理解することが重要です。

この記事では、配列の基本的な操作から始めて、より複雑な検証方法まで幅広く解説しました。

これらの知識を活用することで、データを効率的に処理し、プログラムをより強力にすることができます。

最後まで読んで頂き、ありがとうございました。少しでもお役にたてたなら幸いです！

サルモリ

最後まで読んでくれてありがとう！！

【JavaScript】配列の基本を徹底解説！初期化、作成、追加、更新、削除、存在チェック

はじめに

配列の初期化と作成

コンストラクタ関数を使用した配列の作成

配列の検証

配列の要素にアクセスする

配列の長さと動的な要素の追加

詳しくはコチラ【JavaScript】配列に要素を追加する方法5選！push、unshift、splice、スプレッド演算子を使ってみよう

spliceメソッドで要素を更新

削除方法はコチラ【JavaScript】配列の要素の削除方法6選！クリア方法を徹底解説！

配列の反復処理

forEachメソッド

for...ofループ

配列の検証方法

includesメソッド

詳しくはコチラ【JavaScript】配列に特定の要素が含まれているか存在チェック方法8選

findメソッド

someとeveryメソッド

まとめ

Ads Blocker Detected!!!

`forEach`メソッド

`for...of`ループ

`includes`メソッド

`find`メソッド

`some`と`every`メソッド