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

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 或急著想了解框架。且前端變化大，或許開始學到真正用到這段期間，還會有許多的變化產生。

第二

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

第三

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

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

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