iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 29
3
Modern Web

透過 ESLint 練習 JavaScript ES6系列 第 29

Day29【ES6 小筆記】陣列搜尋新方法 find() findIndex() - 以工具人清單為例

搜尋的方法 find() fideIndex()

find()

在過去如果我們想要找到陣列中符合條件的元素,可能會使用 forEach 或是 for 循環,但是 forEach 是不能跳過或終止的,所以如果當陣列過大時可能會有效能問題,而 for 循環雖然可以終止和跳過,但是可讀性不是那麼高,不能一眼就看出是要找什麼元素。

而 ES6 中的 find() 方法會回傳第一個滿足條件的元素,當找到了就會立馬返回,不會繼續執行,也就優化了原本 forEach 跟 for 循環的缺點嚕!

使用方式

arr.find(element, index, array);

來個練習

以一個工具人清單為例:

const toolMan = [
  {name: '阿華', skill: '買飯吃'},
  {name: '豪豪', skill: '馬伕'},
  {name: '卿哥', skill: '修傢俱'}
];

假如今天桌子有點晃,我們要找出會修傢俱的工具人,就可以這樣寫:

const fixTable = toolMan.find(item => item.skill==='修傢俱');
console.log(fixTable); // {name: "卿哥", skill: "修傢俱"}

findIndex()

那如果想要知道元素在陣列中的索引位置,對他進行刪除等操作,就可以使用 findIndex
假如今天良心發現,覺得把爸爸(也就是卿哥)當工具人很不孝,要從工具人清單移除,就可以這樣寫:

const daddy = toolMan.findIndex(item => item.name==='卿哥'); // 得到 中卿索引位置 2
toolMan.splice(daddy,1); // 刪除中卿元素

上一篇
Day28【ES6 小筆記】 建構式ㄉ語法糖 - Class 超基本使用範例
下一篇
【懶人包閱讀順序】ES6 學習筆記
系列文
透過 ESLint 練習 JavaScript ES630
0
tsuifei
iT邦新手 5 級 ‧ 2019-10-01 08:40:05

文筆輕鬆幽默且清楚,好多好文啊這裡,感謝~

江江好 iT邦新手 5 級 ‧ 2019-10-01 09:22:05 檢舉

謝謝謝謝!!!好開心!

0
ayugioh2003
iT邦新手 5 級 ‧ 2019-10-01 21:45:48

很實用的教學文
toolMan 內的物件屬性可以再加入 tele 這樣方便打電話

江江好 iT邦新手 5 級 ‧ 2019-10-02 11:49:21 檢舉

好建議XDDD!!!

0
阿展展展
iT邦好手 1 級 ‧ 2019-10-17 05:23:27

笑著笑著就....哭惹
/images/emoticon/emoticon26.gif

我要留言

立即登入留言