JavaScript 入門 | 標準オブジェクト | Array メソッド
Array.prototype メソッド
すべての Array インスタンスは、Array.prototype からメソッドとプロパティを継承する。 継承した Array.prototype メソッドは、大きく次のように分類できる。
- 元の配列を変更するメソッド
- 元の配列を変更せず参照だけを行うメソッド
- 元の配列を繰り返し参照するメソッド
元の配列を変更するメソッド
次のメソッドは元の配列を直接変更するメソッドである。
| メソッド | 説明 |
|---|---|
| push() | 1つ以上の要素を配列の末尾に追加し、配列の合計の長さを返す。 |
| pop() | 配列の最後の要素を削除し、その削除された要素を返す。 |
| shift() | 配列の最初の要素を削除し、その削除された要素を返す。 |
| unshift() | 1つ以上の要素を配列の先頭に追加し、配列の合計の長さを返す。 |
| reverse() | 配列要素の順序をすべて逆にする。 |
| sort() | その配列の要素をアルファベット順に並べ替える。 |
| splice() | 既存の配列要素を削除したり新しい配列要素を追加したりして、配列の内容を変更する。 |
| copyWithin() | その配列内で一連の要素をコピーし、指定した位置の要素を置き換える。 |
| fill() | 開始インデックスから終了インデックスの直前までのすべての配列要素を特定の値で置き換える。 |
push() メソッド
push() メソッドは、1つ以上の要素を配列の末尾に追加する。 元の配列は追加した要素の数だけ length が増え、要素の追加に成功すると配列の合計の長さを返す。
var arr = [1, true, "JavaScript"];
arr.length; // 3
arr.push("자바스크립트");
arr.length; // 4
arr; // [1,true,JavaScript,자바스크립트]
arr.push(2, "거짓");
arr.length; // 6
arr; // [1,true,JavaScript,자바스크립트,2,거짓]
pop() メソッド
pop() メソッドは、配列の最後の要素を削除し、その削除された要素を返す。 したがって、pop() メソッドを実行するたびに配列の長さは1ずつ減る。
var arr = [1, true, "JavaScript", "자바스크립트"];
arr.length; // 4
arr.pop(); // 자바스크립트
arr.length; // 3
arr.pop(); // JavaScript
arr.length); // 2
arr; // [1,true]
shift() メソッド
shift() メソッドは pop() メソッドとは異なり、配列の最後の要素ではなく最初の要素を削除し、その削除された要素を返す。 したがって、shift() メソッドも実行するたびに配列の長さが1ずつ減る。
var arr = [1, true, "JavaScript", "자바스크립트"];
arr.length; // 4
arr.shift(); // 1
arr.length; // 3
arr.shift(); // true
arr.length; // 2
arr; // [JavaScript,자바스크립트]
unshift() メソッド
unshift() メソッドは、1つ以上の要素を配列の先頭に追加する。 元の配列は追加した要素の数だけ length が増え、要素の追加に成功すると配列の合計の長さを返す。
var arr = [1, true, "JavaScript"];
arr.length; // 3
arr.unshift("자바스크립트");
arr.length; // 4
arr; // [자바스크립트,1,true,JavaScript]
arr.unshift(2, "거짓");
arr.length; // 6
arr; // [2,거짓,자바스크립트,1,true,JavaScript]
pop() と push() メソッドを使うと、配列をスタックというデータ構造のように扱うことができる。 shift() と push() メソッドを使うと、配列をキューというデータ構造のように扱うことができる。
reverse() メソッド
reverse() メソッドは、配列要素の順序をすべて逆にする。 つまり、先頭にあった要素は末尾に位置し、末尾にあった要素は先頭に位置する。
var arr = [1, true, "JavaScript", "자바스크립트"];
arr.reverse(); // [자바스크립트,JavaScript,true,1]]
sort() メソッド
sort() メソッドは、その配列の要素をアルファベット順に並べ替える。
このメソッドは配列要素をすべて文字列として扱って並べ替えるため、数値や真偽値のような型の要素は正しく並べ替えられない場合がある。
var strArr = ["로마", "나라", "감자", "다람쥐"]; // ハングルは ㄱ, ㄴ, ㄷ 順に並べ替えられる。
var numArr = [10, 21, 1, 2, 3]; // 数値は各桁ごとに比較されてから並べ替えられる。
strArr.sort(); // [감자,나라,다람쥐,로마]
numArr.sort(); // [1,10,2,21,3]
splice() メソッド
splice() メソッドは、既存の配列要素を削除したり新しい配列要素を追加したりして、配列の内容を変更する。
第1引数は新しい要素が挿入される位置のインデックスであり、第2引数は削除する要素の数である。
それ以降の引数はすべて配列要素として、指定されたインデックスから順に挿入される。
このメソッドは配列から削除された要素を配列の形で返し、何も削除されなかった場合は空の配列を返す。
var arr = [1, true, "JavaScript", "자바스크립트"];
// インデックス1の要素から2つの要素を削除した後、false と "C언어" をその位置に挿入する。
var removedElement = arr.splice(1, 2, false, "C언어");
arr; // [1,false,C언어,자바스크립트]
removedElement; // [true,JavaScript]
元の配列を変更せず参照だけを行うメソッド
次のメソッドは元の配列を直接変更せず、参照だけを行うメソッドである。
| メソッド | 説明 |
|---|---|
| join() | 配列のすべての要素を1つの文字列として返す。 |
| slice() | 渡された開始インデックスから終了インデックスの直前までのすべての配列要素を抽出し、新しい配列として返す。 |
| concat() | その配列の後ろに引数として渡された配列を結合して作った新しい配列を返す。 |
| toString() | その配列のすべての要素を1つの文字列として返す。 |
| toLocaleString() | その配列のすべての要素を1つの文字列として返す。 |
| indexOf() | 渡された値と同じ配列要素が最初に現れる位置のインデックスを返す。 |
| lastIndexOf() | 渡された値と同じ配列要素が最後に現れる位置のインデックスを返す。 |
join() メソッド
join() メソッドは、配列のすべての要素を1つの文字列として返す。
引数として渡された文字列は、配列要素の間を区切る区切り文字として使われる。
引数が渡されなければ、既定値としてカンマ (,) を区切り文字として使う。
var arr = [1, true, "JavaScript"];
arr.join(); // 1,true,JavaScript
arr.join(' + '); // 1 + true + JavaScript
arr.join(' '); // 1 true JavaScript
arr.join(''); // 1trueJavaScript
slice() メソッド
slice() メソッドは、渡された開始インデックスから終了インデックスの直前までのすべての配列要素を抽出し、新しい配列を返す。
終了インデックスが渡されない場合は、最後の配列要素まですべて抽出する。
var arr = [1, true, "JavaScript", "자바스크립트"];
arr.slice(1, 3); // [true,JavaScript]
arr.slice(1); // [true,JavaScript,자바스크립트 ]
concat() メソッド
concat() メソッドは、その配列の後ろに引数として渡された配列を結合して作った新しい配列を返す。
var arr = [1, true, "JavaScript"];
arr.concat([2, false, "문자열"]); // [1,true,JavaScript,2,false,문자열]
arr.concat([2], [3, 4]); // [1,true,JavaScript,2,3,4] -> 2つ以上の配列も一度に結合できる。
arr.concat("다섯", [6, 7]); // [1,true,JavaScript,다섯,6,7] -> 値と配列も一度に結合できる。
toString() メソッド
toString() メソッドは、その配列のすべての要素を1つの文字列として返す。 このとき、配列要素の間には自動的にカンマ (,) が挿入される。
var arr = [1, true, "JavaScript"];
arr.toString(); // '1,true,JavaScript'
元の配列を繰り返し参照するメソッド
次のメソッドは元の配列を変更せず、繰り返し参照だけを行うメソッドである。
| メソッド | 説明 |
|---|---|
| forEach() | その配列のすべての要素に対して、指定されたコールバック関数を繰り返し実行する。 |
| map() | その配列のすべての要素に対して、指定されたコールバック関数を繰り返し実行した後、その実行結果を新しい配列として返す。 |
| filter() | その配列のすべての要素に対して、指定されたコールバック関数を繰り返し実行した後、その結果値が true の要素だけを新しい配列に入れて返す。 |
| every() | その配列のすべての要素に対して、指定されたコールバック関数を繰り返し実行した後、その結果値がすべて true の場合にのみ true を返す。 |
| some() | その配列のすべての要素に対して、指定されたコールバック関数を繰り返し実行した後、その結果値が1つでも true であれば true を返す。 |
| reduce() | その配列のすべての要素を1つの値に減らすために、2つの引数を受け取るコールバック関数を実行する。配列の最初の要素から始める。 |
| reduceRight() | その配列のすべての要素を1つの値に減らすために、2つの引数を受け取るコールバック関数を実行する。配列の最後の要素から始める。 |
| entries() | 配列要素ごとにキーと値のペアで構成された新しい配列イテレーターオブジェクトを、配列の形で返す。 |
| keys() | 配列要素ごとにキーだけを含む新しい配列イテレーターオブジェクトを、配列の形で返す。 |
| values() | 配列要素ごとに値だけを含む新しい配列イテレーターオブジェクトを、配列の形で返す。 |
| find() | 検査のために渡された関数を満たす配列要素の値を返す。満たす値がなければ undefined を返す。 |
| findIndex() | 検査のために渡された関数を満たす配列要素のインデックスを返す。満たす値がなければ -1 を返す。 |
forEach() メソッド
forEach() メソッドは、その配列のすべての要素に対して、指定されたコールバック関数を繰り返し実行する。
var arr = [1, true, "JavaScript"];
function printArr(value, index, array) {
document.write("arr[" + index + "] = " + value + "<br>");
}
arr.forEach(printArr); // 配列 arr の各要素ごとに printArr() 関数が呼び出される。
map() メソッド
map() メソッドは、その配列のすべての要素に対して、指定されたコールバック関数を繰り返し実行した後、その実行結果を新しい配列に入れて返す。
var arr = [1, -2, 3, -4];
// 配列 arr の各要素ごとに Math.abs() 関数が呼び出され、その結果値が配列として保存される。
var absoluteValues = arr.map(Math.abs);
absoluteValues; // [1,2,3,4]
filter() メソッド
filter() メソッドは、その配列のすべての要素に対して、指定されたコールバック関数を繰り返し実行した後、その結果値が true の要素だけを新しい配列に入れて返す。
var arr = [-10, 5, 100, -20, 40];
function compareValue(value) {
return value < 10;
}
var lessTen = arr.filter(compareValue);
lessTen; // [-10,5,-20]
every() メソッド
every() メソッドは、その配列のすべての要素に対して、指定されたコールバック関数を繰り返し実行した後、その結果値がすべて true の場合にのみ true を返す。
var arr = [-10, 5, -20, 4];
function compareValue(value) {
return value < 10; // 配列のすべての要素が10より小さい。
}
arr.every(compareValue); // true
some() メソッド
some() メソッドは、その配列のすべての要素に対して、指定されたコールバック関数を繰り返し実行した後、その結果値が1つでも true であれば true を返す。
var arr = [10, 25, -20, 14];
function compareValue(value) {
return value < 10; // 配列要素のうち -20 だけが10より小さい。
}
arr.some(compareValue); // true
reduce() メソッド
reduce() メソッドは、その配列のすべての要素を1つの値に減らすために、2つの引数を受け取るコールバック関数を実行する。
このとき、指定されたコールバック関数に配列の1番目の要素と2番目の要素を引数として渡して実行する。
その結果として返された値と3番目の要素を再び引数として渡して実行する。
この動作を繰り返してすべての配列要素を引数として渡し、最後に返された結果値を返す。
var arr = [1, 2, 3, 4, 5];
function sumOfValues(x, y) {
return x - y;
}
arr.reduce(sumOfValues); // 1 - 2 - 3 - 4 - 5 = -13
reduceRight() メソッド
reduceRight() メソッドは reduce() メソッドと同じ方式で実行され、配列の最後の要素から減らし始める。
var arr = [1, 2, 3, 4, 5];
function sumOfValues(x, y) {
return x - y;
}
arr.reduceRight(sumOfValues); // 5 - 4 - 3 - 2 - 1 = -5
entries() メソッド
entries() メソッドは、配列要素ごとにキーと値のペアで構成された新しい配列イテレーターオブジェクトを、配列の形で返す。
このとき、キーにはインデックスが保存され、値には配列要素の値が保存される。
var arr = [1, true, "JavaScript"];
var arrEntries = arr.entries();
for (var entry of arrEntries) {
document.write(entry + "<br>"); // 配列のインデックスごとにキーと値のペアを出力する。
}
for / of 文は Internet Explorer ではサポートされない。