Arrayの基礎知識と各メソッドの使用方法

More than 3 years have passed since last update.


I. Arrayコンストラクタの使い方


1. 指定した要素を持つ配列を生成する

new Array(element0, element1, ..., elementN);



2. 指定した長さを持つ配列を生成する

new Array(arrayLength);



3. Arrayオブジェクトの作り方

new Array(1, 2, 3); // [1, 2, 3]

[1, 2, 3]; // [1, 2, 3] - 配列リテラルの利用
new Array('1'); // ['1']
new Array(5); // [undefined x 5] - 要注意!要素数として扱われる
// ※ http://qiita.com/sh19910711/items/3c0776fd8cc1797f955d#comment-2a70b836f3015c467f5e


II. lengthプロパティの動作

var list = [ 1, 2, 3, 4, 5, 6 ];

// 現在の要素数より小さな値を指定すると配列は切り詰められる。
list.length = 3;
list; // [1, 2, 3]

// 元に戻すと元々あった部分は削除されている。
list.length = 6;
list; // [1, 2, 3, undefined x 3]

// 現在の要素数より大きな値をインデックスとして指定すると、
// lengthはその値 + 1に書き換わる。
list[8] = 9;
list.length; // 9
list; // [1, 2, 3, undefined x 5, 9]


III. オブジェクト自身に変更を加えるメソッド


1. 追加と削除 - push() / pop() / shift() / unshift() / splice()

var list = [ 1, 2, 3 ];

// 配列の最後尾の要素を1つ取り除く。
// pop() メソッドは取り除かれた要素を返す。
var elm_1 = list.pop();
elm_1, list; // 3, [1, 2]

// 配列の最後尾に要素を1つ追加する。
// push() メソッドは要素追加後のlengthプロパティの値を返す。
var len_1 = list.push(3);
len_1, list; // 3, [1, 2, 3]

// 配列の先頭から要素を1つ取り除く。
// shift() メソッドは取り除かれた要素を返す。
var elm_2 = list.shift();
elm_2, list; // 1, [2, 3]

// 配列の先頭に要素を1つ追加する。
// unshift() メソッドは要素追加後のlengthプロパティの値を返す。
var len_2 = list.unshift();
len_2, list; // 3, [1, 2, 3]

// splice( 削除開始地点, 削除する要素数, [新要素1, [新要素2, ..., [新要素N]]] )
// 指定範囲を削除し、削除した部分に新たな要素を挿入する。
list = [ 1, 2, 3, 4, 5 ];
// インデックス=1から3個の要素を削除し 1 を挿入する。
// splice() メソッドは削除された部分の配列を返す。
var removed = list.splice( 1, 3, 1 );
removed, list; // [2, 3, 4], [1, 1, 5]



2. 並べ替え - sort() / reverse()

var list = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];

// 反転する
list.reverse();
list; // [ 10, 9, 8, 7, 6, 5, 4, 3, 2, 1 ]
list.reverse(); // 再び反転すると元に戻る
list; // [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

// 並べ替える
list.sort(); // 昇順に並べ替える。※整数の配列でも辞書順に並ぶことに注意!
list; // [1,10,2,3,4,5,6,7,8,9]
// 整数の配列を意図通りに並び替えるには引数として比較関数を渡す必要がある。
list.sort(
// 引数 a, b: 比較する2つの要素。
function( a, b ) {
// 比較関数の戻り値について
// 0より小さいとき: aをbより前方に並べ替える。[..., a, ..., b, ...]
// 0より大きいとき: bをaより前方に並べ替える。[..., b, ..., a, ...]
// 0を返すときの動作は未定義で処理系に依存する
return a > b ? 1 : -1; // if ( a > b ) return 1; else return -1;
}
);


IV. 配列にアクセスして結果を得るメソッド


1. 結合と切り取り - concat() / join() / slice()

var list = [ 1, 2, 3 ];

// 配列に要素を結合する
list.concat( 4, 5, 6 ); // [ 1, 2, 3, 4, 5, 6 ]
list.concat( [ 4, 5, 6 ] ); // [ 1, 2, 3, 4, 5, 6 ] - 配列を渡すこともできる

// 指定要素を間に挟んだ文字列を返す
list.join(' '); // "1 2 3"
list.join('-'); // "1-2-3"

// 指定した範囲の配列を取得する。
// slice( 開始地点, 終了地点 )
list = [ 1, 2, 3, 4, 5, 6, 7 ];
list.slice( 1 ); // [2, 3, 4, 5, 6, 7]
list.slice( 1, 2 ); // [2]
list.slice( 2, 4 ); // [3, 4]
list.slice( 2, -2 ); // [3, 4, 5] - 負の数を指定したときは「後ろから何番目」になる


V. 反復的な操作を行うメソッド


1. 反復操作 - forEach()

var list = [ 1, 2, 3, 4, 5 ];

var sum = 0;

// 各要素に対して、指定した処理を実行する。
list.forEach(function(element) {
sum += element;
});
sum; // sum = 1 + 2 + 3 + 4 + 5 = 15



2. フィルタリングと関数の適用 - filter() / map()

var list = [ 1, 2, 3, 4, 5, 6, 7 ];

// 各要素に対して、指定した条件を満たす要素だけを含む配列を返す。
var result_1 = list.filter(function(element) {
// elementが2から5の範囲にあるかどうか
return 2 <= element && element <= 5;
});
result_1; // [ 2, 3, 4, 5 ]

// 各要素に指定した操作を適用した配列を返す。
var result_2 = list.map(function(element) {
// elementに1を足す
return element + 1;
});
result_2; // [2, 3, 4, 5, 6, 7, 8]



3. チェックテスト - every() / some()

var list = [ 1, 2, 3, 4, 5, 6, 7 ];

// すべての要素が指定した条件を満たすかどうか調べる。
var result_1 = list.every(function(element) {
return element < 5;
});
var result_2 = list.every(function(element) {
return element < 10;
});
result_1, result_2; // false, true

// 1つでも条件を満たす要素が存在するかどうか調べる。
var result_3 = list.some(function() {
return element == 5;
});
var result_4 = list.some(function() {
return element == 10;
});
result_3, result_4; // true, false



4. 総和を求める - reduce() / reduceRight()

var list = [ "abc", "def", "ghi" ];

// 先頭から順に総和を計算する。
var result_1 = list.reduce(function(sum, element) {
return sum + element;
});

// 後ろから順に総和を計算する。
var result_2 = list.reduceRight(function() {
return sum + element;
});

result_1, result_2; // "abcdefghi", "ghidefabc"


VI. 参考