JavaScript/Array

Array オブジェクトは、配列（順番に並んだデータのリスト）を表します。配列は、基本型の配列とオブジェクトの配列のいずれも保持できます。Array オブジェクトのメソッドとプロパティは、配列オブジェクトを操作するための多数のヘルパー機能を提供します。

Arrayオブジェクト

「配列」も参照

Arrayオブジェクトは、配列を扱うための機能を組み込んだJavaScriptの組み込みオブジェクトです。配列の作成には、new Array()を使用できますが、配列リテラルと呼ばれる簡潔な記法があり、以下のように記述できます。

配列リテラルを使ったコード例

const ary = ['a', 'b', 'c', 'd'];

JavaScriptの配列は、データ型に制約がないため、様々なデータ型を同時に含むことができます。例えば以下のように、数値、文字列、真偽値、配列などを組み合わせることができます。

JavaScriptでは様々なデータ型を同時に含むことができます

const ary2 = [1, 2, 3, '4', true, [3, 4, 5]];

配列は、インデックス番号を使って要素にアクセスすることができます。また、配列には多くの組み込みメソッドが用意されており、配列の要素を追加、変更、削除するための便利な機能が提供されています。

プロパティ

Array.prototype.length

配列の有効な最大インデックス+1 を取得する。

静的プロパティ

Array.length: 1; コンストラクタの引数の数
Array.name: "Array"
Array.prototype
[object]

静的メソッド

Array.from()

Array-likeまたはIterableなオブジェクトから新しい Array インスタンスを生成します。

Array.isArray()

配列であれば true を、配列でなければ false を返します。

Array.of(element0　[　, element1　[　, ...　]　]　]　)

可変個の引数から、新しい Array インスタンスを生成します。コンストラクタと似た働きをしますが、コンストラクタに1つの整数を渡すとその数だけ empty が詰まった配列を返すが、Arrray.ofメソッドはその数1つを要素とする配列を返します。

インスタンスメソッド

この節は書きかけです。この節を編集してくれる方を心からお待ちしています。

Array.prototype.at()

Array.prototype.at() メソッドは、配列内の指定されたインデックスにある要素を返します。このメソッドは、引数に数値を受け取り、戻り値でそのインデックスの値を返します。インデックスが負数の場合、配列を末尾から数えた位置に対応する正のインデックスに置き換えられます。存在しないインデックスにアクセスした場合、undefined を返します。

const array1 = ['a', 'b', 'c', 'd', 'e'];

console.log(array1.at(2));  // "c"
console.log(array1.at(-3)); // "c"

しかし、パラメータに整数でないものを渡すと、.at(0) として機能してしまうという仕様バグがあります。これは、メソッドが引数を整数に強制的に変換して、その後インデックス0の要素を返すからです。

const array1 = ['a', 'b', 'c', 'd', 'e']; 
console.log(array1.at('a')); // "a" : 'a' は整数に変換され 0 となり，array1[0]の "a" を返す
console.log(array1.at({})); // "a" : {} は整数に変換され NaN となり，array1[0]の "a" を返す
console.log(array1.at([])); // "a" : [] は整数に変換され "" となり，array1[0]の "a" を返す

この問題を回避するには、引数の型を事前にチェックするか、配列の長さと比較してインデックスの範囲を確認する必要があります。

そこまでして、Array.prototype.at() メソッドの負のインデックスを許容する機能を使うべきかは十分検討すべきです。

この仕様バグは、String.prototype.at() および TypedArray.prototype.at() にもあります。

Array.prototype.concat( [ item1 [ , item2 [ , ... ] ] ] )

配列の連結を行い新しい Array インスタンスを生成する

Array.prototype.constructor()

Array.prototype.constructor === Array // ==> true

この式はJavaScriptのプロトタイプチェーンに関わることを示しています。 Arrayオブジェクトは、Array.prototypeオブジェクトを継承します。そして、Array.prototypeオブジェクトのコンストラクタは、Array関数そのものです。つまり、この式は「ArrayオブジェクトのコンストラクタはArray関数である」ということを意味します。

Array.prototype.copyWithin()

Array.prototype.entries()

Array.prototype.every()

Array.prototype.fill()

Array.prototype.filter()

Array.prototype.find()

Array.prototype.findIndex()

Array.prototype.findLast()

Array.prototype.findLastIndex()

Array.prototype.flat()

Array.prototype.flatMap()

Array.prototype.forEach()

Array.prototype.includes()

配列の要素に値に含まれているか^[1]？

const arr = ['a','b','c','d','e','f','g','h','i','j','k'];
console.log(arr.includes('f')); // true
console.log(arr.includes('m')); // false

Array.prototype.includes() の歴史

Array.prototype.includes()は、プロポーザルを経てES2016で採用されました^[2]。

Array.prototype.indexOf()

Array.prototype.join(separator=",")

配列を指定した文字を連結子として連結して文字列として返します。

const d = [ 2007, 11, 21 ];
console.log( d.join("-") );	// 2007-11-21 と表示する。

Array.prototype.keys()

Array.prototype.lastIndexOf()

Array.prototype.map()

Array.prototype.pop()

配列末尾から要素を取り除く。このメソッドは破壊的メソッドなので、再代入の必要はありません。返り値としては、取り除かれた末尾の要素が返ります。

const arr = ['a','b','c','d','e','f','g','h','i','j','k'];
arr.pop():	// 「k」が返ります
console.log(arr);	// 「k」を取り除いたa,b,c,d,e,f,g,h,i,jが返ります 
([]).pop();  // 配列の中身が空の場合はnullが返ります

Array.prototype.push( [ item1 [ , item2 [ , ... ] ] ] )

配列の末尾に要素を追加して、その配列の長さを返します。このメソッドは破壊的メソッドなので再代入の必要はありません。

const arr = [1,2,3,4,5,6,7,8,9,10];
arr.push(11);
console.log( arr );

Array.prototype.reduce()

Array.prototype.reduceRight()

Array.prototype.reverse()

配列の要素の順番を入れ替える。これは破壊的メソッドであるため。再代入の必要はありません。

const arr = [1,2,3,4,5,6,7,8,9,10];
arr.reverse();	// [10,9,8,7,6,5,4,3,2,1,0] になる。

Array.prototype.shift()

配列の最初の要素を取り除く。このメソッドは破壊的メソッドのため再代入の必要はありません。返り値として取り除いた要素を返します。

const arr = [1,2,3,4,5,6,7,8,9,10];
arr.shift();
console.log( arr );

Array.prototype.slice(start, end)

startからend番目の1つ前の配列要素を取得する。引数に負の数を指定すると、配列の末尾からのインデックスでデータの取得を行える^[3]。 endを省略する、あるいは undefined を指定すればstartから配列の末尾までを取得できます。さらに start も省略する、あるいは 0 を指定すると浅いコピー(shallow copy) を取得できます。

const arr = ['a','b','c','d','e','f','g','h','i','j','k'];
console.log(arr.slice(3, 8));	// d,e,f,g,h が返ります
console.log(arr.slice(-5, -1));	// g,h,i,j が返ります

console.log(arr.slice(3, undefined));	// 配列の4番目から最後までが返ります
console.log(arr.slice(3));	// d,e,f,g,h,i,j,k が返ります

console.log(arr.slice(0));	// a,b,c,d,e,f,g,h,i,j,k が返ります
console.log(arr.slice());	// a,b,c,d,e,f,g,h,i,j,k が返ります

最後の、浅いコピー(shallow copy) を取得する用途で slice() を使うことが多いですが、、

const a = [];
for (let i = 0; i < 999; i++)
  a.push(i);

console.time("dhry");
for (let i = 0; i < 999999; i++)
    ;
console.timeEnd("dhry");

console.time("slice");
for (let i = 0; i < 999999; i++)
  v = a.slice(0);
console.timeEnd("slice");

console.time("spred");
for (let i = 0; i < 999999; i++)
  v = [...a];
console.timeEnd("spred");
/* dhry: 4.679931640625 ms
 * slice: 1456.339111328125 ms
 * spred: 1302.201904296875 ms
 */

微差ですがスプレッド構文の方が早く、意図もはっきりします。

Array.prototype.some()

Array.prototype.sort(comparefn)

配列要素を引数で指定した方法でソート(並べ替え)する。ちなみにこのメソッドは破壊的メソッドです。並べ替えの方法は、引数の中で規則を定めた関数として与える。

説明だけでは分かりにくい実例を挙げる。例えばバラバラに並んだ数字を、昇順(ascending order)に並べ替えたいとき等には次の様な関数を作成して引数として指定する。

function  ascendingOrder( _n1 , _n2 ){
    console.log(`ascendingOrder( ${_n1} , ${_n2} )`);
	return _n1 - _n2;
}
const arr = [5,8,7,2,4,3,9,1,6,0];
arr.sort(ascendingOrder);	// ここで並べ替えを実行する
console.log(arr);	// 0,1,2,3,4,5,6,7,8,9が表示される

作成する関数は、配列要素から2つずつ値を受け取ってそれを比較することにより、正、ゼロ、負、NaNのいずれかの値を返します。

並べ替えの規則を指定する場合、関数は非常に簡潔で短いものが非常に多いので実際には次の様にアロー関数を比較に用いる例が多く見られます。

arr.sort((a, b) => a - b);	// ここで並べ替えを実行する

Array.prototype.splice(start, deleteCount [ , item1 [ , item2 [ , ... ] ] ] )

このメソッドは、分割(split)と切り取り(slice)の似た機能を兼ね合わせてもたせたメソッドです。また、このメソッドは破壊的メソッドです。また返り値として取り除いた値を返します。

文のみの説明では分かりにくい所があるので、サンプルコードを提示する。配列からn番目の要素を取り除きたい場合には次の様なコードを記述する。

const arr = ['a','b','c','d','e','f','g','h','i','j','k'];
const n=3;
arr.splice( n, 1 );	// インデックスが3の「d」を取り除く
console.log( arr );	// 「d」が無いa,b,c,e,f,g,h,i,j,kが返ります

spliceメソッドの第2引数は取り除く範囲の大きさです。そのため例えば第2引数に4を指定すると配列の4番目から8番目の要素が取り除かれる。

第3引数以降を利用すると、配列要素の取り除きではなく置き換えができるようになっている。つまり、第1、第2引数で配列の入れ替え箇所と範囲を指定した後に、そこに入れ替えたい要素を第3引数以降で指定する。

const arr = ['a','b','c','d','e','f','g','h','i','j','k'];
arr.splice( 3, 4, 'x','y','z' );	// インデックスが3～7の間の、つまりd,e,f,gをx,y,zに置き換える
console.log( arr );	// a,b,c,x,y,z,h,i,j,k が表示される。

Array.prototype.toLocaleString()

配列を、使用している環境の言語や文化に合わせた読みやすい形式の文字列に変換して返します。変換は、配列内部の要素を再帰的に文字列化し連結するので要素のtoLocaleString()での変換結果に留意する必要があります。

Array.prototype.toReversed()

Array.prototype.reverse() の非破壊メソッド版。

Array.prototype.toSorted()

Array.prototype.sort() の非破壊メソッド版。

Array.prototype.toSpliced()

Array.prototype.splice() の非破壊メソッド版。

Array.prototype.toString()

配列を文字列化する。

Array.prototype.unshift( [ item1 [ , item2 [ , ... ] ] ] )

配列の先頭にアイテムを追加して、その配列の長さを返します。このメソッドは破壊的メソッドなので再代入の必要はありません。

const arr = ['a','b','c','d','e','f','g','h','i','j','k'];
arr.unshift('z','y','x');	// 配列の最初にz,x,yを追加
console.log( arr );	// z,y,x,a,b,c,d,e,f,g,h,i,j,k が返ります

Array.prototype.values()

Array.prototype.with()

脚注

外部リンク

[1] ECMA-262::23.1.3.13 Array.prototype.includes ( searchElement [ , fromIndex ] )

[2] tc39/proposal-Array.prototype.includes: Spec, tests, reference implementation, and docs for ESnext-track Array.prototype.includes

[3] ECMA-262::23.1.3.25 Array.prototype.slice (start, end)

[1]

[2]

[3]