Javascript 初學筆記29 陣列的真面目&Array Constructor

今天在Medium上看到一篇文章挺有意思的，做個簡單的紀錄。
文章的內容主要有幾個重點:

• 不要再用for迴圈了(這句話我經常經常看到，看來是該改改這習慣了)
• 陣列的真面目
• 為什麼mapping在constructed Array會失效

善用高級函數功能，停止你對for的依賴

舉個例子，今天你要建立一個內含1~99數字的陣列會怎麼做?初學的我最直觀的想法大概就如下

let arr = []
for (let i = 0; i < 100; i++){
  arr[i] = i
} 

邏輯上並沒有什麼問題，但之前在寫map、filter等陣列的幾個常用方法時就說過，有著更好的處理方法，等等請見文章的第三段。

陣列的真面目

但首先我們要先探討陣列的真面目，我們之前其實就有提到在JS中，陣列也是一種物件

let arr = ['a','b','c']

其實這個陣列等同於以下的物件
arr = {
  0:'a',
  1:'b',
  2:'c',
  length:3
}

了解這點之後，接下來的第三點才會合乎邏輯!

Array Constructor

Array Constructor 創造一個由你指定長度的空陣列，語法相當簡單

let x = Array(100)
console.log(x.length) //100

但其創造的只有length屬性，其他的keys完全不存在，如以下

x = {
//nothing here
length:100;
}

所以當我們打算利用map配合Array Constructor完成我們原先目的時就會碰上一些問題

const arr = Array(100).map((_, i) => i);
 console.log(arr[0] === undefined);//true  不存在key，自然值為undefined

那要如何解決這樣的問題? 文章的作者也提供了解答，很巧的就是我們之前寫過的陣列扁平化做法

let x = [...Array(100).map(_,i) => i]
console.log(x[0]) // 0

藉由扁平化處理使得原先的陣列變為以下的狀態

{
   0: undefined,
   1: undefined,
   2: undefined,
   …
   99: undefined,
   length: 100
 }

挺有意思的吧?文章的回響不錯，不過也有網友提出我們之前用過的Array.from作法，其實也是挺直覺的!

let ass = Array.from({ length: 100 }, (_, i) => i)
console.log(ass) //一樣的結果

或是利用我還沒學過的fill

Array(100).fill().map((_, i) => i)

每次看到這種文章都會覺得自己學得真的太淺了~!還遠遠不足以應付現實世界呢~!