iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 13
2
自我挑戰組

JavaScript之一定要了解的 Array 與方法系列 第 13

JS 遍歷陣列 Array 的方法

Day 13

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

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

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

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

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

https://ithelp.ithome.com.tw/upload/images/20190928/20104175SagETy0KNh.png

迴圈和陣列有什麼關係?

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

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

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

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

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

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

遇到稀疏陣列怎麼辦?

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

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

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]

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

今天就先到這裡囉,寫著寫著也快兩週了,時光荏苒啊~ 在假文青什麼啊~

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


上一篇
JS 以陣列 Array 的複製談型別(下)
下一篇
JS_陣列 Array 方法概觀
系列文
JavaScript之一定要了解的 Array 與方法34

2 則留言

0
letter liu
iT邦新手 5 級 ‧ 2019-09-28 12:24:12

真的棒棒

tsuifei iT邦新手 5 級 ‧ 2019-10-11 12:12:27 檢舉

感謝稱讚!一步步慢慢往前~一起加油!握拳!

0
cheerfulkid74
iT邦新手 5 級 ‧ 2020-06-22 10:40:38

感謝 對於實際應用上很有幫助!

tsuifei iT邦新手 5 級 ‧ 2020-07-29 04:56:04 檢舉

謝謝~ 的確陣列在處理資料上很實用啊~

我要留言

立即登入留言