JavaScriptの配列(Array) constructorプロパティの使い方

JavaScriptのArray.constructorについて記載します。
概要、実際のサンプルコードを交えて構文などの使い方をまとめてみました。

JavaScriptの配列(Array)とは？
JavaScriptのArray.constructor概要
サンプルコードの紹介
JavaScriptの他のArrayメソッドについて

JavaScriptの配列(Array)とは？

JavaScriptの配列は、異なる要素を格納するために使用される単一の変数です。
要素のリストを格納し、単一の変数でアクセスしたい場合によく使用されています。
配列が複数の変数への参照である他の多くのプログラミング言語とは異なり、JavaScriptでは、配列は複数の要素を格納する単一の変数です。

小難しい説明になりますが、JavaScriptでの配列処理は非常に多くの処理が出来るということです。そして、JavaScriptを使ってコード、システムを作っていくうえで配列処理の基本動作、JSが持っている関数を理解しておくことは非常に重要だと個人に考えています。

開発の現場でも配列処理を正しくそして深く理解していることが求められます。

JSの配列処理はES5,ES6などでアップデートが行われており、本来なら簡潔なコードで記載できるにもかかわらず、冗長なコードで記載してしまったがゆえにバグを発生してしまったり、予期せぬ動作を配列処理が起こしてしまうといったことが起こっていたりもします。

配列処理は頻繁に使用し、そして、もっともバグを生みやすい部分だとも思っているので個人的にJavaScriptで一番重要だと筆者は考えています。

次に本題の説明に移ります。

JavaScriptのArray.constructor概要

Array.constructorは、新しい配列オブジェクトを作成するためのJavaScriptのコンストラクタ関数です。

引数を渡すことで、配列の要素を指定したり、配列のサイズを指定したりすることができます。

このメソッドを利用した便利なテクニック

Array.constructorを使うと、配列を作成する際に新しいインスタンスを作成し、そのインスタンスを指定した長さで初期化することができます。

例えば、以下のように指定した長さの配列を作成することができます。

let arr = new Array(10); // 10個の要素を持つ配列を作成

1	let arr = new Array(10); // 10個の要素を持つ配列を作成

現場で実際にどのように使われているか

Array.constructorは、新しい配列を作成するために現場でも頻繁に使用されています。

例えば、次のようなコードを使用して、新しい配列を作成することができます。

var myArray = new Array.constructor(1,2,3);

1	var myArray = new Array.constructor(1,2,3);

JavaScriptのArray.constructorでよく使われる処理

Array.prototype.map()がよく使われます。

なぜなら、Array.prototype.map()を使うと、配列の要素を反復処理して新しい配列を作成できるからです。

おそらく、map関数を使った配列処理は、Gitやブログなどのサンプルコードで見かけたことも多いと思います。

使用する上での注意点

・Array.constructorは、新しい配列を作成するために使用されます。
・引数には、新しい配列に格納する要素を指定します。
・Array.constructorは、既存の配列を変更したり、新しい配列を作成したりするときに使用します。

サンプルコードの紹介

Array.Constructorを使用したサンプルコードを順に紹介していきます。

Array.constructorを使ったサンプル1

// 配列を作成
var arr = new Array.constructor(1, 2, 3);

// 配列を表示
console.log(arr);

// 配列を作成

var arr = new Array.constructor(1, 2, 3);

// 配列を表示

console.log(arr);

[1, 2, 3]

Array.constructorを使ったサンプル2

// 文字列を配列に変換
var str = ""Hello World"";
var arr = new Array.constructor(str);

// 配列を表示
console.log(arr);

// 文字列を配列に変換

var str = ""Hello World"";

var arr = new Array.constructor(str);

// 配列を表示

console.log(arr);

[“”Hello World””]

Array.constructorを使ったサンプル3

// 配列を作成
var arr = new Array.constructor(1, 2, 3);

// 配列を逆順に並び替え
arr.reverse();

// 配列を表示
console.log(arr);

// 配列を作成

var arr = new Array.constructor(1, 2, 3);

// 配列を逆順に並び替え

arr.reverse();

// 配列を表示

console.log(arr);

[3, 2, 1]

Array.constructorを使ったサンプル4

// 配列を作成
var arr = new Array.constructor(1, 2, 3);

// 配列をソート
arr.sort();

// 配列を表示
console.log(arr);

// 配列を作成

var arr = new Array.constructor(1, 2, 3);

// 配列をソート

arr.sort();

// 配列を表示

console.log(arr);

[1, 2, 3]

Array.constructorを使ったサンプル5

// 配列を作成
var arr = new Array.constructor(1, 2, 3);

// 配列を結合
var newArr = arr.concat(4, 5, 6);

// 配列を表示
console.log(newArr);

// 配列を作成

var arr = new Array.constructor(1, 2, 3);

// 配列を結合

var newArr = arr.concat(4, 5, 6);

// 配列を表示

console.log(newArr);

[1, 2, 3, 4, 5, 6]

JavaScriptの他のArrayメソッドについて

JavaScriptの配列のメソッドについては、下記記事にもまとめていますので参考にしてみてください

メソッド名	機能	リンク
Array.concat()	既存の配列に新しい配列または値を連結するための関数	JavaScriptの配列(Array)のconcatメソッドの使い方
Array.constructor	配列オブジェクトに定義されているプロパティ	JavaScriptの配列(Array)のconstructorプロパティの使い方
Array.copyWithin()	配列内の要素を、同じ配列内の別の位置にコピーする関数	JavaScriptの配列(Array)のcopyWithinメソッドの使い方
Array.entries()	配列内の要素に対応するインデックスと要素のペアを含む新しいイテレータオブジェクトを生成する関数	JavaScriptの配列(Array)のentriesメソッドの使い方
Array.every()	配列内のすべての要素がテスト関数を満たすかどうかを判定する関数	JavaScriptの配列(Array)のeveryメソッドの使い方
Array.fill()	配列内の全てまたは一部の要素を指定の値で埋める関数	JavaScriptの配列(Array)のfillメソッドの使い方
Array.filter()	配列内の要素をテスト関数に基づいてフィルタリングする関数	JavaScriptの配列(Array)のfilterメソッドの使い方
Array.find()	配列内の要素から最初にテスト関数を満たす要素を検索する関数	JavaScriptの配列(Array)のfindメソッドの使い方
Array.findIndex()	配列内の要素から最初にテスト関数を満たす要素のインデックスを検索する関数	JavaScriptの配列(Array)のfindIndexメソッドの使い方
Array.forEach()	配列内のすべての要素に対して処理を実行する関数	JavaScriptの配列(Array)のforEachメソッドの使い方
Array.from()	配列風オブジェクトや反復可能なオブジェクトから新しい配列を生成する関数	JavaScriptの配列(Array)のfromメソッドの使い方
Array.includes()	配列内に特定の要素が含まれているかどうかを判定する関数	JavaScriptの配列(Array)のincludesメソッドの使い方
Array.indexOf()	配列内の指定された要素の最初のインデックスを検索する関数	JavaScriptの配列(Array)のindexOfメソッドの使い方
Array.isArray()	指定されたオブジェクトが配列であるかどうかを判定する関数	JavaScriptの配列(Array)のisArrayメソッドの使い方
Array.join()	配列内の要素を文字列に連結する関数	JavaScriptの配列(Array)のjoinメソッドの使い方
Array.keys()	配列内の要素に対応するインデックスを含む新しいイテレータオブジェクトを生成する関数	JavaScriptの配列(Array)のkeysメソッドの使い方
Array.lastIndexOf()	配列内の指定された要素の最後のインデックスを検索する関数	JavaScriptの配列(Array)のlastIndexOfメソッドの使い方
Array.length	配列内の要素数を表すプロパティ	JavaScriptの配列(Array)のlengthプロパティの使い方
Array.map()	配列内のすべての要素に対して関数を適用し、結果を含む新しい配列を生成する関数	JavaScriptの配列(Array)のmapメソッドの使い方
Array.pop()	配列内の最後の要素を取り除き、その要素を返す関数	JavaScriptの配列(Array)のpopメソッドの使い方
Array.prototype	配列オブジェクトのプロトタイプオブジェクト	JavaScriptの配列(Array)のprototypeプロパティの使い方
Array.push()	配列内の最後に要素を追加する関数	JavaScriptの配列(Array)のpushメソッドの使い方
Array.reduce()	配列内の要素をシンプルな値（通常は数値）に結合する関数	JavaScriptの配列(Array)のreduceメソッドの使い方
Array.reduceRight()	配列内の要素を右から左に向かって結合する関数	JavaScriptの配列(Array)のreduceRightメソッドの使い方
Array.reverse()	配列内の要素の順番を反転する関数	JavaScriptの配列(Array)のreverseメソッドの使い方
Array.shift()	配列内の最初の要素を取り除き、その要素を返す関数	JavaScriptの配列(Array)のshiftメソッドの使い方
Array.slice()	配列内の一部を切り出して、新しい配列として返す関数	JavaScriptの配列(Array)のsliceメソッドの使い方
Array.some()	配列内の要素のいずれかが特定の条件を満たすかどうかをテストする関数	JavaScriptの配列(Array)のsomeメソッドの使い方
Array.sort()	配列内の要素をソートする関数	JavaScriptの配列(Array)のsortメソッドの使い方
Array.toString()	配列を文字列に変換する関数	JavaScriptの配列(Array)のtoStringメソッドの使い方
Array.unshift()	配列内の最初に要素を追加する関数	JavaScriptの配列(Array)のunshiftメソッドの使い方
Array.valueOf()	配列のプリミティブ値を返却	JavaScriptの配列(Array)のvalueOfメソッドの使い方