【JavaScript超入門】配列について初心者向けに解説

tom244

3年前

今回は、JavaScriptの配列について学習していきましょう。

配列は、複数の値を一つのオブジェクトで管理することができます。

配列を宣言してみましょう

let names = ['tanaka', 'suzuki', 'kobayashi'];

let names = new Array('tanaka', 'suzuki', 'kobayashi');

配列は、[ ] を使って宣言することもできますし、Arrayクラスをnew することで宣言することもできます。

ただし、Arrayクラスを使用した書き方は、少し使い方が難しく、注意が必要です。

例えば、

let nums = new Array(10);

このように配列を宣言した場合、nums に代入されるのは10の値を格納した配列ではなく、10の長さをもつ配列として認識されます。

バグにつながることもあるので、配列の宣言は[ ]を使用するようにしましょう。

配列は[ ] で宣言する。

Arrayオブジェクトで使用できるプロパティ、メソッド

配列は、Arrayクラスのインスタンスです。

Arrayオブジェクトで使用できる代表的なプロパティとメソッドを紹介しましょう。

ここで紹介したのはごく一部です。全て実務でも頻繁に使用するメソッドです。

それぞれのメソッドを使用して、ぜひ配列をマスターしてみてください＾＾

ループを使用して、配列の値を一つずつ取り出す方法を確認していきましょう。

まずは基本的なfor文を使用したループ処理です。

const nums = [1, 2, 3];

for(let i = 0; i < nums.length; i++) {
    console.log(nums[i]);
}

ES2015から導入された for-of を使用した書き方もシンプルで使いやすいです。

const nums = [1, 2, 3];

for(const num of nums) {
    console.log(num);
}

forEachを使用すると、コールバック関数が実行されます。

コールバック関数がよくわからない方は、配列をループするたびに、それぞれの値に対して処理が実行される関数とイメージしてもらえればOKです。

const nums = [1, 2, 3];

nums.forEach((num, index) => {
    console.log(num);
});

注意点としては、forEachの中にbreakや return を書いても処理を途中で止めることはできません。処理を途中で止めるような処理を実装したいときは、for文や、for-ofを使用されるとよりでしょう。

また、forEachの返り値はundefiend　になります。

const nums = [1, 2, 3]; 
let result = nums.forEach((num, index) => {
    return num * 2; 
});

console.log(result); // undefined

よくforEachに対して、上記のように変数を代入している方がいますが

代入される値がundefinedになることはしっかりと押さえておきましょう。

mapメソッド

mapメソッドもforEachと同様に、コールバック関数が呼ばれます。

ただし、mapメソッドはforEachと違いコールバック関数の返り値を設定することができるので、配列の中身を整形するときに重宝します。

const nums = [1, 2, 3];

const result = nums.map((num, index) => {
    return num * 2;
});

// 配列の中身が２倍されている
console.log(result); //　[2, 4, 6]

mapメソッドはコールバック関数の返り値を設定することができる。

forEachメソッドは、返り値がundefiendになることは、確実に押さえておきましょう！