js imageオブジェクトを持つ配列をワンライナーで定義したい

Question

↓今はこうやっています

var imageArray = [];
for(var i = 0, len = length; i < length; i = i + 1) {
    imageArray[i] = new Image();
}

↓こうやるとimageが同じものになってしまいます

var imageArray = new Array(length).fill(new Image());

うまい方法ありませんでしょうか。
↓map を使おうと思って失敗しました

var imageArray = new Array(length).map(() => new Image());

Answer 1

var imageArray = Array.from( new Array(length), () => new Image() );

とか？

Comments

[Lhankor_Mhy]

あ、解決してましたか。

[kimurayu]

fromは初めて知りました!こんな方法もあるんですね!ありがとうございます!

[kimurayu]

こちらの方がメソッドが一つでスマートな感じがしますね

[Lhankor_Mhy]

蛇足ですが。

もし、lengthの値を
document.getElementsByClassName('hoge').length
とかで取得しているなら、arraylikeですから、
Array.from( document.getElementsByClassName('hoge'), () => new Image() )
みたいに直接書くことができます。

arraylikeを利用した裏技的なのだと、
Array.from( {length:length}, () => new Image() )
とか
Array.from( ' '.repeat(length), () => new Image() )
でも動作します。
あまり意味はないですが。

[kimurayu]

ありがとうございます! ArrayLike という言葉も知りませんでした! {length: length} なんて書き方もあるんですね ありがとうございます

Answer 2

  const count = 3;
  const result = new Array(count).fill().map(() => ({}));
  expect(result).toEqual([{}, {}, {}]); // true
  expect(result[0]).not.toBe(result[1]); // true

Comments

[HayatoKamono]

おっと、解決済みでしたね。

[kimurayu]

ありがとうございます!Expect.jsは知りませんでした 便利そうですね

Answer 3

var imageArray = new Array(length).map(() => new Image());

の結果が長さlengthでemptyだったので、mapの前に何か入れたらいいのかな？と思い

var imageArray = new Array(length).fill(1).map(() => new Image());

とやったらできました！

var imageArray = new Array(length).fill().map(() => new Image());

でもできました

Comments

[kimurayu]

fill().map でもできました