質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.92%

JavaScript の Array の初期化につきまして

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 604

nico25

score 824

array1 と array2 は同じものに見えますが map を適用すると結果が異なる理由がわからず苦慮しております。

var array1 = new Array(3);
var array2 = Array.apply(null, Array(3));

console.log(array1);  // [undefined, undefined, undefined]
console.log(array2);  // [undefined, undefined, undefined]

console.log(array1.map(()=>3));  // [undefined, undefined, undefined]
console.log(array2.map(()=>3));  // [3, 3, 3]

こちらのサイトを見て配列の初期化を知りました。

new Array で初期化すると、空の配列になってしまうため、map 処理がスキップされてしまう。
そのため、Array.prototype.map()を使っても、ゼロで初期化することができない。
【JavaScript】配列をゼロで初期化する方法

また apply についてはこちらの記事を参考にして、理解はまだ及んでないのですが、現在確認しております。

applyとcallの使い方を丁寧に説明してみる

何か参考になるページ等ご教示いただけましたら、幸いでございます。
どうぞ、よろしくお願いいたします。


ご回答いただき、誠にありがとうございます。
ご指導いただいた内容を元に再度整理いたしまいた。

上記は CodePen での実行結果
以下は Chrome での実行結果

var array1 = Array(3);  // new Array(3); と等価
var array2 = Array.apply(null, Array(3));

// 
console.log(array1);  // [empty,     empty,     empty    ]
console.log(array2);  // [undefined, undefined, undefined]

// 1) CodePen だと empty ではなく undefined と表示されてしまう。
//    console.log(array1);  
//    -> [undefined, undefined, undefined]

// 2) empty は、存在しない。
//    console.log(empty);
//    -> Uncaught ReferenceError: empty is not defined

// 3) empty は null とも違いそう。




// 4) インデックスを指定して empty を取得しようとすると 
//    empty が undefined になる。
//    このとき undefined との厳密等価演算は true になる。
console.log(array1[0]);  // undefined
console.log(array2[0]);  // undefined
console.log(array1[0] === array1[1]);  // true

// 配列の型も
console.log(typeof(array1));  // object
console.log(typeof(array2));  // object

// その中の要素の型も同じ
console.log(typeof(array1[0]));  // undefined
console.log(typeof(array2[0]));  // undefined
console.log(typeof(array1[0]) == typeof(array2[0]))  // true

// keys は異なる
console.log(Object.keys(array1)) // => []
console.log(Object.keys(array2)) // => [0, 1, 2]

// 結果 map の結果も異なる。
console.log(array1.map(()=>3));  // [empty, empty, empty]
console.log(array2.map(()=>3));  // [3, 3, 3]

/* ここで... */
// ここで次のようにすると
array1[0] = 0;
array1[2] = 2;

// 以下のようになる。
console.log(array1);  // [0, empty, 2]
console.log(Object.keys(array1)) // => [0, 2]
console.log(array1.map(()=>3));  // [3, empty, 3]
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+4

array1 と array2 は同じものに見えますが map を適用すると結果が異なる理由がわからず苦慮しております。

array2の方は、Array.applyとなっていますが、.applyにはlengthを見て添字の値をコピーする機能がありますので、その過程でArray(undefined, undefined, undefined)と呼んだのと同じ扱いになって、本当にundefinedが3つはいった配列が出来上がります。

両者の違いはObject.keysではっきりします。

console.log(Object.keys(array1)) // => []
console.log(Object.keys(array2)) // => [0, 1, 2]

(なお、Arrayに関してはnewありでもなしでも動作は変わりません)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/18 09:27

    ご回答いただき、誠にありがとうございます。
    おそらくまだ理解には届いていないと思うのですが、
    とても参考になりました。
    今後とも、どうぞよろしくお願い申し上げます。

    キャンセル

  • 2018/12/18 09:33

    また new Array(3) と Array(3) の違いも
    実は気になっていたので
    教えていただいて本当に助かりました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る