配列の定義
リテラル
配列のリテラルは他の言語と似ていて、[]の中に要素を','で区切って並べる。
|
1 2 3 4 |
var array = [-1, 1, 3, 7]; console.log(array); // (4) [-1, 1, 3, 7] |
空の配列も定義可能。
|
1 2 3 4 |
var array = []; console.log(array); // [] |
Arrayコンストラクター
Arrayクラスのコンストラクターで空の配列を作成可能。
|
1 2 3 4 |
var array = new Array(); console.log(array); // [] |
要素の参照・追加
配列の要素の参照は他の言語と同じ。もちろん値の更新もできる。
|
1 2 3 4 5 |
var array = [1, 2, 3, 5]; console.log(array[0]); // 1 |
新たに要素を追加するには、インデックスと値を指定。もちろん値の更新も可能。
|
1 2 3 4 5 |
array[4] = 8; console.log(array); // [1, 2, 3, 5, 8] |
配列の要素は、すべて同じ型でなくてもよい。
|
1 2 3 4 |
array[5] = 'thirteen'; console.log(array); // [1, 2, 3, 5, 8, "thirteen"] |
要素番号を飛ばして値を追加すると、その間は'empty'になる。
|
1 2 3 4 5 6 7 8 9 |
var array = new Array(); array[0] = 0; array[1] = 1; array[3] = 3; array[7] = 7; console.log(array); // [0, 1, empty, 3, empty × 3, 7] |
配列の長さ
配列の長さ（要素数）はlengthプロパティーで得られる。
|
1 2 3 4 |
array = [1, 2, 3, 5, 8]; console.log(array.length); // 5 |
先頭・末尾要素の取出し・追加・削除
配列の先頭要素・末尾要素について、追加や削除・取出しのメソッドが準備されていて、配列をキューやスタックのように使うことができる。詳細は配列の先頭・末尾要素の追加・削除にまとめている。
push～末尾追加pop～末尾取出し・削除unshift～先頭追加shift～先頭取出し・削除
要素の取出し・削除・置換
splice～インデックス指定で取出し・削除・置換
splice()メソッドは指定したインデックスから指定した数の要素を削除する。追加する要素を指定した場合は指定した位置に要素が追加される。
filter～指定した内容の要素の取出し・削除
条件に一致する要素のみ取り出す場合、filter()メソッドを使う。filter()メソッドは非破壊的で新たな配列を生成する。
|
1 2 3 4 5 |
array = [1, 2, 3, 4, 3, 2, 1]; console.log(array.filter(v => v !== 2)); [1, 3, 4, 3, 1] |
要素の内容を指定して削除する場合もfilter()で。
|
1 2 3 4 5 |
array = [1, 2, 3, 4, 3, 2, 1]; console.log(array.filter(v => v !== 2)); [1, 3, 3, 1] |
map～配列の要素の加工
map()メソッドは配列の各要素やインデックスなどの処理結果を要素とする配列を返す。
値とインデックスの順次取り出し
for文で値を取り出す
最も基本的なfor文の使い方で、インデックスを0～配列長−1まで変化させて直接参照する方法。
|
1 2 3 4 5 6 7 8 9 10 |
array = ['zero', 'one', 'two', 'three']; for (let i = 0; i < array.length; i++) { console.log(array[i]); } // zero // one // two // three |
for...ofで値を直接取り出す
ES6のfor...of構文は、配列から要素を順次取り出してくれる（Pythonのfor...inと同じ動作）。
|
1 2 3 4 5 6 7 8 9 10 |
array = ['zero', 'one', 'two', 'three']; for (let value of array) { console.log(value); } // zero // one // two // three |
for...inでインデックスを取り出す
ES6のfor...inは配列からインデックスを順次取り出してくれる。ただし戻り値はStringなので要注意。
|
1 2 3 4 5 6 7 8 9 10 |
array = ['zero', 'one', 'two', 'three']; for (let index in array) { console.log(typeof index, index); } // string 0 // string 1 // string 2 // string 3 |
entries()でインデックスと値を同時に取り出す
Array.prototype.entries()はインデックスと値の配列をイテレーションで返してくれる。
|
1 2 3 4 5 6 7 8 9 10 |
array = ['zero', 'one', 'two', 'three']; for (let [index, value] of array.entries()) { console.log(typeof index, index, value); } // number 0 zero // number 1 one // number 2 two // number 3 three |
map()に値とインデックスの2つの引数を指定する
Array.prototype.map()は引数で指定したコールバック関数を各要素に適用した結果を配列として返す。通常は引数を1つ指定して配列の要素を得て、それに対して処理する。
|
1 2 3 4 5 |
array = ['zero', 'one', 'two', 'three']; console.log(array.map((value => 'value is ' + value))); // ["value is zero", "value is one", "value is two", "value is three"] |
map()は2つ目の引数を指定することができて、その場合2つ目の引数にはインデックスの値が入る。しかも、for…inと違ってインデックスは数値として得られる。
|
1 2 3 4 5 |
array = ['zero', 'one', 'two', 'three']; console.log(array.map((value, index) => typeof index + ':' + index)); // ["number:0", "number:1", "number:2", "number:3"] |
reducer～配列要素に対するイテレーション
samやmax/minメソッドはない
JSには多言語のように配列要素の合計や最大値を求める汎用の関数やメソッドが準備されていない。
その実装は、プログラムごとにArray.reduce()メソッドで行われているようだ。たとえば要素の合計を求める例を以下に示す。
|
1 2 3 4 5 6 7 8 |
var sum = function(accumulator, current_value) { return accumulator + current_value; } var data = [2, 1, 4, 3]; console.log(data.reduce(sum)); // 10 |
配列の複製
const array_clone = [].concat(array)
const array_clone = array.slice(0, array.length)
const array_clone = [...array]
const array_clone = Array.from(array)
const array_clone = array.map(x => x)