今回は、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オブジェクトで使用できる代表的なプロパティとメソッドを紹介しましょう。
| length | 配列の長さ |
| indexOf() | 指定した値が配列に含まれるか検索 |
| toString() | 文字列に変換 |
| concat() | 配列同士を結合 |
| join() | 配列を指定した区切り文字で連結して文字列に変換 |
| slice() | 配列から指定した〜番目の値を切り抜き |
| push() | 配列に値を追加 |
| sort() | 配列 をソート |
ここで紹介したのはごく一部です。全て実務でも頻繁に使用するメソッドです。
それぞれのメソッドを使用して、ぜひ配列をマスターしてみてください＾＾
配列のループ
ループを使用して、配列の値を一つずつ取り出す方法を確認していきましょう。
for文
まずは基本的なfor文を使用したループ処理です。
const nums = [1, 2, 3];
for(let i = 0; i < nums.length; i++) {
console.log(nums[i]);
}
for-of
ES2015から導入された for-of を使用した書き方もシンプルで使いやすいです。
const nums = [1, 2, 3];
for(const num of nums) {
console.log(num);
}
forEach
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になることは、確実に押さえておきましょう！
- mapメソッドはコールバック関数の返り値を設定することができる
- forEachメソッドは、返り値がundefiend
