0
0

連番の配列をつくるのが意外と頭使った(JavaScript)

Posted at

前座問題

Q. (JavaScript)20 ~ 50 までの連番からなる配列arrを作成せよ。

真っ先に思い浮かんだやつ

const arr = []

for (let i = 20; i <= 50; i++) {
  arr.push(i)
}

console.log(arr)
// arr=[20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50]

👶「...」
👶「なんかださい」
👶「一個ずつ入れるんじゃなくて、map関数みたいにできないものか」
(うまく言語化できなかったので雰囲気掴んでください)

本問題

Q. (JavaScript)20 ~ 50 までの連番からなる配列arrをスマートに作成せよ。

解答

MDNを参考に作ってみましょう
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from#%E3%82%A2%E3%83%AD%E3%83%BC%E9%96%A2%E6%95%B0%E3%81%A8_array.from_%E3%81%AE%E4%BD%BF%E7%94%A8

(MDN引用)

// 連番の生成
// 配列はそれぞれの場所が `undefined` で初期化されるため、
// 以下の `v` の値は `undefined` になる
Array.from({ length: 5 }, (v, i) => i);
// [0, 1, 2, 3, 4]

これを元に考えた回答がこちら

const arr = Array.from({ length: 31 },(v,i) => i + 20)

すこし深掘り

👶「Array.from()かあ、あんま使ってないから調べよか」

構文
Array.from(arrayLike, mapFn)

引数
arrayLike
配列に変換する反復可能オブジェクトまたは配列風オブジェクト。

mapFn (省略可)
配列の各要素に対して呼び出す関数です。指定された場合、配列に追加されるすべての値は最初にこの関数に渡され、代わりに mapFn の返値が配列に追加されます。この関数は以下の引数で呼び出されます。

element
配列内で現在処理中の要素です。

index
配列内で現在処理中の要素のインデックスです。

👶「おい、待てぃ。arrayLikeに入った{length:5}の説明がないやん」

Array.from() は、以下のものから Array を生成します。

  • 反復可能オブジェクト(Map や Set のような要素を取得するオブジェクト)
  • オブジェクトが反復可能でない場合は、配列風オブジェクト(length プロパティおよび添字の付いた要素を持つオブジェクト)

👶「ほーん。今回は『length プロパティを持つ配列風オブジェクト』ってわけか」

const a = Array.from({length: 5})
console.log(a) //[undefined,undefined,undefined,undefined,undefined]
const b = Array.from({length: 5,2: 'hoge'})
console.log(b) //[undefined, undefined, 'hoge', undefined, undefined]

👶「なんとなくわかった」

おしまい

0
0
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0