Help us understand the problem. What is going on with this article?

(初心者向け) JavaScript 配列の作成と初期化

More than 1 year has passed since last update.

概要

JavaScript の配列は動的なもので、他の言語で言えば ArrayList に近いものです。そして、作成(構築)と初期化の方法も様々なので、ここでまとめてみました。

  • Array コンストラクタを使って長さ 0 の配列を作成する。
  • [] を使って長さ 0 の配列を作成する。
  • 初期値を持つ配列を Array コンストラクタを使って作成する。
  • 初期値を持つ配列を [] を使って作成する。
  • 初期値を持たない指定した長さの配列を作成する。
  • from メソッドを使って配列から新しい配列を作成する。
  • from メソッドを使って文字列から文字の配列を作成する。
  • of メソッドを使って値の並びから配列を作成する。

サンプル

Array コンストラクタを使って長さ 0 の配列を作成する。

昔の JavaScript ではこういう書き方しかできなかった気がします。

var a0 = new Array();
console.log(a0.length);  // 0 と表示

[] を使って長さ 0 の配列を作成する。

この書き方が簡潔でわかりやすいです。

var a0 = [];
console.log(a0.length);  // 0 と表示

初期値を持つ配列を Array コンストラクタを使って作成する。

昔の JavaScript ではこういう書き方しかできなかった気がします。

var a1 = new Array(5, -2, 8, 11, -7, 5, 0);
console.log(a1); // [ 5, -2, 8, 11, -7, 5, 0 ] と表示

初期値を持つ配列を [] を使って作成する。

この書き方が一般的かと。それに簡潔でわかりやすいです。

var a1 = [6, 3, 0, -1, 3, 16];
console.log(a1);  // [ 6, 3, 0, -1, 3, 16 ] と表示

初期値を持たない指定した長さの配列を作成する。

とにかく中身はどうでもいいから、ある長さの配列を作りたいときのやり方です。要素はすべて undefined になります。とりあえず 0 などで初期化したいときは fill() メソッドを使います。

// 長さ 7 の配列を作成する。
var a5 = Array(7);
console.log(a5); // [ <7 empty items> ] と表示
console.log(a5[0]);  // undefined と表示
// 配列の要素の値を確定する。
a5.fill(0);
console.log(a5);  // [ 0, 0, 0, 0, 0, 0, 0 ] と表示

from メソッドを使って配列から新しい配列を作成する。

コンストラクタを使って配列を作成するのと同じ結果になりますが、同じ内容の配列を複数作る場合は、こちらを使ったほうがスマートかと。

const a03 = [10, 2, -6];
var a33 = Array.from(a03);  // [ 10, 2, -6 ] と表示
console.log(a33);
console.log(a33 === a03);  // false と表示。つまり配列のインスタンスは別。

from メソッドを使って文字列から文字の配列を作成する。

文字列も文字の配列の一種なので、文字列を from メソッドで文字の配列に変換できます。

var a3 = Array.from('Japan');
console.log(a3);  // [ 'J', 'a', 'p', 'a', 'n' ] と表示

of メソッドを使って値の並びから配列を作成する。

コンストラクタを使っても同じ事が可能です。

var a4 = Array.of(0, 1, 2, 3);
console.log(a4);  // [ 0, 1, 2, 3 ] と表示

注意:from メソッドは TypedArray には使えない。

つぎのようなコードは正しく動きませんでした。

const a16 = new Int16Array(0, 64, 256, 1024);
var a36 = Array.from(a16);
console.log(a36);  // [] になる。

終わり

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした