Je code donc je suis là.

0%

遍歷陣列的方法

Posted on Edited on In
Day 13

傻傻以為迴圈是唯一，那只是沙灘上的一塊小岩石。

回想剛開始學程式時，看到 While 迴圈可以透過 ASCII 碼，把英文數字從 ａ 到 Z 印出來，感到好驚訝！到底是怎麼辦到的？但是，經過了幾次無限迴圈的背叛後，才知道如果迴圈不給一個「範圍」，就會出大事。 電腦整個當掉要重開

記得小時候家裡小孩多，當時的台灣經濟正在起飛 馬上透露了世代，家庭代工正興起。記得媽媽總是會叫我們兄弟姐妹來幫忙 是滴，本人兄弟姐妹都有。 當時的手工產品是要寄往北方某個遙遠國度的聖誕節飾品，也就是要掛在樹上的小型禮物盒。媽媽先是叫我們排排坐，開始解說步驟，接著就開始這條要完成「一百個」小禮物的童工生產線：

  • 哥哥把一張包裝紙拿起來放桌上
  • 姊姊把四方形的保麗龍放在包裝紙上
  • 我用包禮物的方法把保麗龍包起來
  • 妹妹用金線把四方形的禮物綑起來 有時還要我幫她
  • 弟弟把印有 Mede in Taiwan 的小金貼紙貼在禮物的底部

這樣就完成了一個小飾品。

圖

迴圈和陣列有什麼關係？

以上述的情境來說，所有要做的小飾品是陣列；童工生產線是迴圈；小童工各自的工作項目，是在迴圈裡的處理步驟。而陣列的範圍是長度「一百個」這個數量。也就是說，這個迴圈要跑一百次。

一般我們想要「批次處理」一堆資料就會想到用迴圈，因為迴圈可以自動化的將我們想做的事「逐ㄧ」套在各個元素上執行，而迴圈又以for迴圈最常被使用。

那我們常聽到的「迭代(iterate)」是什麼？和「遍歷(traversal)」又有什麼不同？請教了前輩才比較清楚的理解，剛剛說的“「逐ㄧ」套在各個元素上執行”，其實就是「迭代」。而迭代是由「遍歷 + 改變」構成的，整個過程即為「迭代 = 遍歷 + 改變」。

對於陣列，for迴圈是最常使用的遍歷方式，我們可以在這個遍歷的方法裡做許多事。例如說在迴圈裡畫星星 或耍廢。例如：

1
2
3
4
5
// 印出五顆星星
for (let star = 0; star < 5; star++) {
  // 執行五次：從star為0到4
  console.log('*'); // 印出星星
}

但是時代不同了，JavaScript 每次更新，都會給我們帶來許多好用的方法，該做的事都和迴圈都幫我們一起包在裡面了，尤其是ECMAScript 5增加了許多功能強大的迭代陣列方法，這就是 JavaScript 的內建陣列函式的巧妙之處了。有關 JavaScript 的內建陣列函式，會在接下來的篇章一一介紹。

遇到稀疏陣列怎麼辦？

遍歷陣列的作法，是逐一的去走訪在陣列的每一個值，看過政治人物在街頭嗎？他們看到民眾時會和民眾逐一握手，那一排的民眾是陣列；每一個民眾就像是元素；握手就是讓元素產生變化 考慮看看要不要投你。
但是，如果這位政治人物在逐一握手的時候，中間卡了座石獅子，他也會跳過這隻不會握手的石獅子，繼續跟下一位民眾握手。這一排民眾就成了稀疏（spars）陣列的民眾、而這隻石獅子就是稀疏陣列裡面無效或空的元素。

通常在使用迭代陣列方法，遇到是稀疏陣列的時候，我們會先把一些無效或空的元素先排除，例如null或undefined，例如：

1
2
3
4
5
6
7
let arr = [1, 2, , null, 5, undefined];
let arr2 = [];
for (let i = 0; i < arr.length; i++) {
  if (!arr[i]) continue;
  arr2.push(arr[i]);
}
arr2; // [1,2,5]

我們希望回傳的是這個陣列被處理過後的結果，但如果是稀疏陣列，這些無效的值也會被一併保留，很沒意義。所以在做處理前，最好先把陣列處理成密集的陣列，這樣迭代才有意義。

如有需要改進的地方，拜託懇求請告知，我會盡量快速度修改，感謝您～