iT邦幫忙

2021 iThome 鐵人賽

DAY 6
1
Modern Web

追求JS小姊姊30天系列 第 6

追求JS小姊姊系列 Day6 -- 鄭列展現的工具力(上)

  • 分享至 

  • xImage
  •  

前情提要

鄭列疑似烙下狠話,正要展現工具實力?!

鄭列:我說啊,你知道身為工具人要會做哪些事嗎?

答案是:實在是太多了

因此,很明確知道自己的獨特性是很重要的。
像我就很明確認知了自己的替身 工具能力,並區分出了幾個面向:

  1. 快速找出:亂堆中朋友們送的雜物(元素)的方法
    a.find()
    b.includes()
  2. 快速找出亂堆中朋友們送的雜物位置(索引值)的方法
    a.lastIndexOf()
    b.indexOf()

還有...

不過廢話不多說,先讓你見識一下我的實力吧。


工具力啟動之 -- 姊,忘記東西是否存在也沒關係喔

鄭列:只要是人,東西難免增加,增加了就會亂堆,亂堆了就找不太到。
如果今天,JS只是想確認特定內容(像是:數值)是否存在。
只要東西放在我這裡,就可以使用我的這個能力: find()includes()

Array.prototype.find():

公式:find(callback((element,index))
公式解釋:

  1. callback:所有陣列內的元素都會被這個函式執行
  2. element:目標陣列內的元素
  3. index:元素的索引值位置(選擇性)

是否會回傳值

  1. 符合條件:會回傳找到符合條件的第一個元素
  2. 不符合條件:回傳undefined

Q1:想確認是否有收過價值 $9000以上的東西?
今天JS想確定收過的禮物價值,該怎麼做?交給鄭列


//當你想確認陣列是否包含54
let x = [54,53,52,51,55,9100,13];

let y = x.find(element => element > 9000);
console.log(y,"如果有內容,代表有的喔!");

Q2:確認是否有誰沒送禮物
感覺字串那傢伙跟我有點疏遠,是不是她其實沒送過我禮物,交給鄭列!

let x = 
["string",55,56,70,80,305,1330,1400,"Hi"];

//檢查是否有字串型別內容
console.log(x.find((element)=>(element === typeof "String")));

備註:姐妹們送的東西,代表各型別內容(像是數字姐送的就是Number內容)

Array.prototype.includes():

公式:includes(callback((element,index))
公式解釋:

  1. callback:所有陣列內的元素都會被這個函式執行
  2. element:目標陣列內的元素
  3. fromIndex:開始搜尋的元素索引值位置(選擇性),如果輸入值大於等於陣列長度,不會執行搜尋,會直接回傳false

是否會回傳值

  1. 符合條件:會回傳布林值
  2. 不符合條件:回傳undefined

let x = [54,{strangePerson:"安迪",age: "??",tall:"??"},[1,2,3,5,6]];

console.log(x.includes(54));
//印出:true


工具力啟動之 -- 姊,忘記東西位置也沒關係喔

Array.prototype.findIndex()

公式:findIndex(callback((element,index))
公式解釋:

  1. callback:所有陣列內的元素都會被這個函式執行
  2. element:目標陣列內的元素
  3. index:元素的索引值位置(選擇性)

是否會回傳值

  1. 符合條件:會回傳目標元素的索引值
  2. 不符合條件:回傳-1

Q1:知道東西名稱,但不知道位置時
總之,交給鄭列!

let x = [12,543,75,true,"我要找這個"];

let trys = (value)=> typeof value === "string";
console.log(x.findIndex(trys));

Array.prototype.lastIndexOf()

公式:lastIndexOf(callback((element,index))
公式解釋:

  1. callback:所有陣列內的元素都會被這個函式執行
  2. element:目標陣列內的元素
  3. fromIndex:開始搜尋元素的索引值位置(選擇性)

是否會回傳值

  1. 符合條件:會回傳目標值的最大索引值位置
  2. 不符合條件:回傳undefined

Q1:JS不太需要這個能力,不過還是交給..鄭列

let jsBox = ["JS的工具人","字串姊的禮物",54,true,"初代的禮物","字串姊的禮物","JS的工具人"];

//有這東西的情境
console.log(jsBox.lastIndexOf("JS的工具人"))

//沒這東西的情境
console.log(jsBox.lastIndexOf("JS的男友"))

鄭列:哼哼,是不是被我的能力嚇到了~
:不.. 只是能理解為何你只能當工具人。
鄭列:...我看你是完全不懂喔,這還不是我的全部呢!

-- to be continued --


那今天就到這邊摟!今天分享喜歡的歌是:
Guns N' Roses - Sweet Child O' Mine (Official Music Video)
https://www.youtube.com/watch?v=1w7OgIMMRc4

每天的休息,是為了後面的追求,明天見。

參考資料:

https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/find


上一篇
追求JS小姊姊系列 Day5 -- 工具人登場
下一篇
追求JS小姊姊系列 Day7 -- 鄭列展現的工具力(中)
系列文
追求JS小姊姊30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

1
Hooo
iT邦新手 4 級 ‧ 2021-09-21 15:54:45

這篇的陣列方法串接到故事情節很棒欸

0
Rex
iT邦新手 3 級 ‧ 2021-09-21 17:14:56

答案是:實在是太多了

🤣🤣🤣

我要留言

立即登入留言