iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 28
4
自我挑戰組

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

JS 陣列 Array 方法,找出最後一個元素的索引值 lastIndexOf()

  • 分享至 

  • xImage
  •  
Day 28

你!就是你。那個最後一個戴黑帽黑衣的站出來!你認識那位排在前頭和你穿ㄧ樣的俠客嗎?

昨天我們介紹了indexOf(),今天要來介紹和它算是一對的lastIndexOf()
lastIndexOf()會把我們指定的元素,在陣列裡查找,並將陣列裡「最後一個」找到的元素索引值 其實也是第一個,傳回來給我們。

但這兩個方法有什麼不同?我們先來看一下範例。

const arr = ["a", "b", "hi", "D", "hi", "b", "hi",];

arr.indexOf("hi"); // 2 第一個 "hi"

arr.lastIndexOf("hi"); // 6 最後一個 "hi"

兩個操作的方式幾乎是ㄧ樣的,只是indexOf()會把第一個找到元素的索引值傳回來,而lastIndexOf()顧名思義,就是把在陣列裡,我們指定要找元素,且是在陣列裡面最後一個的索引值傳回來。且lastIndexOf()在找尋元素時,會從陣列的尾端開始找。因為找尋的順序相反,所以找到的第一個元素,其實也就是從陣列看來的最後一個。

如同indexOf()ㄧ樣,如果我們有給第二個參數(從哪裡開始找),它也會從指定參數開始往「前」找。

如果lastIndexOf()找不到我們想找的元素,也會和indexOf()ㄧ樣,回傳給我們 -1。

Array.prototype.lastIndexOf() - JavaScript | MDN

原型: Array.prototype.lastIndexOf()
功能: 回傳指定元素在陣列中最後一個被找到的索引值。
改變: 不會改變原陣列
語法: arr.lastIndexOf(searchElement[, fromIndex])
回傳值: 在陣列中找到的最後一個元素索引值;沒找到則為 -1。
參數: 要找的元素、從哪裡開始找。

確定這個元素是陣列的唯一

我們是不是可以利用indexOf()lastIndexOf()的特性來確認我們找到的元素,是陣列裡的唯一?我們可以用 === 來比較,如果相同

const arr2 = ["a", "b", "hi", "c", "d", "b"];

let item1 = arr2.indexOf("hi"); // item1 回傳 2
let item2 = arr2.lastIndexOf("hi"); // item2 回傳 2

function testUnique(item1, item2){
  if( item1 === item2){
    return true;
  } else return false;
}

testUnique(item1, item2); // true

找出所有陣列裡指定的索引值

在上一篇indexOf()的介紹裡有提到,我們可透過indexOf()push()將查找到的元素列表,以陣列的方式回傳回來,lastIndexOf()也可以辦到。它會尋找所有在陣列裡,我們指定查找元素的索引值,以push()將索引值集合在一個陣列裡。

const results = [];
const array = ['a', 'b', 'a', 'c', 'a', 'd'];
let element = 'a';
let idx = array.lastIndexOf(element); // 把找到的索引值存在變數裡
while (idx != -1) { // 如果回傳值不是 -1 表示有找到
  results.push(idx); // 將索引值放入陣列

  // 如果索引值大於 0,就回傳 找到的元素索引值,否則就回傳 -1
  idx = (idx > 0 ? array.lastIndexOf(element, idx - 1) : -1);
}

results; // [4, 2, 0]

indexOf的方法不同的是,因為lastIndexOf()是從陣列尾端往前找,所以得到的索引值也會從大到小。

今天的lastIndexOf()就介紹到這裏囉~


我們在學習程式語言的時候,除了會去看一些技術文章或是影片教學外,大家是否會去看一些比較軟性的影片,如勵志或是如何規劃學習的影片?尤其對於轉職的本人來說,到底程式工程師需要有什麼樣的特質與正確的心態,甚至在職場上如何面對工作的壓力,與如何快速的進步 對本人無效,是需要一些技巧的。

發現這個法國的 youtuber 是在兩三個月前,他稱他自己為遊牧開發人員,人住在巴釐島,除了有許多遠端的案子,還有經營 youtube 頻道、做教學影片,甚至前陣子還在巴釐島開了課,請法國人到亞洲包吃包住學程式。

他的影片有許多是在討論他的觀察與想法,因為直接且真誠,所以頗受歡迎。前一陣子看到這個影片覺得頗正面,便把它記錄下來,如果有興趣,可以使用 youtube 的字幕翻譯功能觀看。

如果早知道,對初學者的建議

這支影片聊的主題是,一些他覺得剛開始學習程式語言的人,可以提前了解的學習面向,以下是大約的節錄:
CE QUE J'AURAIS AIMÉ SAVOIR QUAND J'AI DÉBUTÉ LA PROGRAMMATION - YouTube

第一

不要什麼都想學,學你需要用到的技術或程式語言,專注這些就好。例如,如果你想學前端,就必須先瞭解前端需要用到什麼語言,例如 HTML, CSS, JavaScript 就先把這些學好,而不要一下子就跳到 Node 或急著想了解框架。且前端變化大,或許開始學到真正用到這段期間,還會有許多的變化產生。

第二

剛開始學寫程式的時候,只要達到會寫與會動,可以運作就可以了,要讓它運作,需要什麼東西要先思考。初期要寫出來的程式碼完美,是不可能的,可以先試著寫出來,可以運作,再慢慢回頭重構你的碼。

第三

把注意力集中在專案,而不是技術或新的語言。新的技術或者是語言,或許可以做更多的功能,但瀏覽者看到的是什麼?使用者看到的是什麼?看到的是具體的專案呈現。技術語言只是工具,如果學新技術,還是需要實做來呈現,也就是做專案。

希望以上的分享,大家會喜歡。

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


上一篇
JS 找出元素索引值的陣列 Array 方法 indexOf()
下一篇
JS ECMAScript 5 的陣列 Array 方法淺析
系列文
JavaScript之一定要了解的 Array 與方法34
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
chiayinin
iT邦新手 4 級 ‧ 2022-10-09 00:11:15

謝謝你分享這個影片和翻譯,很安慰。
也有分享給其他人這篇好文章。

tsuifei iT邦新手 4 級 ‧ 2022-11-14 18:17:09 檢舉

謝謝妳~

我要留言

立即登入留言