JS數組中的indexOf方法

rickchen 發布于2019-08-23 13:09 / 2359人閱讀

摘要：數組方法大家再熟悉不過了，卻忽略了數組有這個方法我個人感覺。輸出因為是數組的第個元素，匹配到并返回下標。數組同樣有方法，只不過做類型判斷時，使用的嚴格相等，也就是。

本人微信公眾號：前端修煉之路，歡迎關注

前言

這兩天在家中幫朋友做項目，項目中使用了數組的indexOf 方法，找到了一篇文章，感覺非常不錯，順便整理下以防鏈接丟失。

相信說到 indexOf 大家并不陌生，判斷字符串是否包涵子字符串時特別常用，正則不熟練同學的利器。這篇文章就最近遇到的一個問題，用實例再說說說indexOf方法。本文是小知識點積累，不作為深入討論的話題，因此這里沒有解釋indexOf()的第二個參數，相信大家都知道第二個參數的作用。

String 類型的使用

溫習一下大家熟知的字符串用法，舉個例子

let str = "orange";
 
str.indexOf("o"); //0
str.indexOf("n"); //3
str.indexOf("c"); //-1

這里 0 和 3 分別是 o 和 n 在字符串中出現的位置。起始下標是 0。而 -1 代表未匹配。
曾經有人問我為什么偏偏是 -1 不是 null 或者 undefined。你去問制定規則的人啊！一臉無奈。
大家看到這里感覺沒什么亮點啊，別急接著再來一個例子

let numStr = "2016";
 
numStr.indexOf("2"); //0
numStr.indexOf(2); //0

看到這里有個小點就是 indexOf 會做簡單的類型轉換，把數字轉換成字符串 "2" 然后再執行。

Number 類型的使用

大家可能會想 number 類型有沒有 indexOf 方法因為會做隱式轉換嘛！明確告訴大家沒有，上例子

let num = 2016;
 
num.indexOf(2); //Uncaught TypeError: num.indexOf is not a function

非要對 number 類型使用 indexOf 方法嘞？那就轉換成字符串咯，接著上例來寫

//二逼青年的寫法
num = "2016";
num.indexOf(2); //0
 
//普通青年的寫法
num.toString().indexOf(2); //0
 
//文藝青年的寫法
("" + num).indexOf(2); //0

第一種寫法簡單直接，對于已知的較短的數字也不是不可行。但是 num 變量針對不同數據是變化的時候，怎么辦呢？

第二種寫法最為常用,但對比第三種寫法長了一點。哈哈，其實都可以，代碼潔癖的人喜歡第三種 √ 。

array 類型的使用

大家提起精神，大boss來了。
數組方法大家再熟悉不過了，卻忽略了數組有 indexOf 這個方法（我個人感覺）。
干說不練瞎扯淡，遇到了什么問題，注意要點又在哪里？

let arr = ["orange", "2016", "2016"];
 
arr.indexOf("orange"); //0
arr.indexOf("o"); //-1
 
arr.indexOf("2016"); //1
arr.indexOf(2016); //-1

這里沒把例子拆的那么細，四個用例足以說明問題。

arr.indexOf(‘orange") 輸出 0 因為 ‘orange" 是數組的第 0 個元素，匹配到并返回下標。
arr.indexOf(‘o") 輸出 -1 因為此方法不會在每一個元素的基礎上再次執行 indexOf 匹配。
arr.indexOf(‘2016") 輸出 1 因為此方法從頭匹配直到匹配到時返回第一個數組元素的下表，而不是返回全部匹配的下標。
arr.indexOf(2016) 輸出 -1 注意：這里不會做隱式類型轉換。

既然坑已經發現我們不妨刨根問底。去MDN官網一看究竟。對此話題感興趣的朋友可以直接跳轉到Array.prototype.indexOf()。

只想了解的朋友下面給大家官方的 Description。

indexOf() compares searchElement to elements of the Array using strict equality (the same method used by the === or triple-equals operator).

一目了然，這里用的是嚴格等于（===）。大家做類似判斷的時候多留意。不要誤認為數字會轉成字符串，同理字符串也不會轉換成數字。

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

String：indexOf 會將數字0做類型轉換，轉換為字符串"0"。

Number：沒有indexOf 方法。需要將數字類型轉換為字符串。方法有三種。直接字符串、字符串toString、字符串拼接。

Array：數組同樣有indexOf 方法，只不過做類型判斷時，使用的嚴格相等(strict equality)，也就是 === 。

GPU云服務器云服務器數組indexof的用法 js中的replace方法 js返回數組中的值 js取數組中的數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99252.html

JS專題之數組去重

摘要：將元素作為對象的鍵，默認鍵對應的值為如果對象中沒有這個鍵，則將這個元素放入結果數組中去。前言數組去重在日常開發中的使用頻率還是較高的，也是網上隨便一抓一大把的話題，所以，我寫這篇文章目的在于歸納和總結，既然很多人都在提的數組去重，自己到底了解多少呢。又或者是如果自己在開發中遇到了去重的需求，自己能想到更好的解決方案嗎。這次我們來理一理怎么做數組去重才能做得最合適，既要考慮兼容性，...

only_do 2019-08-26 13:29 評論0 收藏0
關于js數組去重

摘要：測試排序后相鄰去除法思路先將數組經過排序，這時候相同的元素處于相鄰的位置所以在便利數組的時候我們只將與前一值不重復的值注意這里測試中方式補充這種方式兼容性但是可以通過轉不太好，但是非常簡潔。不管是面試還是平時寫程序的過程中我們經常會遇到要對數組進行去重的問題，該文總結了一些常見的數組去重的方法。對象鍵值對法思路：新建一js對象json以及新數組reArr，遍歷數組元素是否為jso...

callmewhy 2019-08-22 10:58 評論0 收藏0
js幾個常被忽略的基礎知識點

摘要：參數數組片段結束處的后一個元素的數組下標。返回值一個新數組，包含從到不包括該元素指定的元素。描述方法將返回數組的一部分，或者說是一個子數組。輸出因為此方法不會在每一個元素的基礎上再次執行匹配。 array.slice(start, end) 參數start 數組片段開始處的數組下標。如果是負數，它聲明從數組尾部開始算起的位置。也就是說，-1指最后一個元素，-2指倒數第二個元素，以此類...

PascalXie 2019-08-20 14:12 評論0 收藏0
js數組方法的總結

摘要：例如會刪除當前數組位置的項，然后再從位置開始插入字符串。對數組中的每一項運行給定函數，返回該函數會返回的項組成的數組。則從數組的最后一項開始，向前遍歷到第一項。 1、隊尾插入push var colors = [red,green]; colors.push(black): console.log(colors); //[red,green,black] 2、隊尾刪除...

lufficc 2019-08-23 10:24 評論0 收藏0
【underscore 源碼解讀】如何優雅地寫一個『在數組中尋找指定元素』的方法

摘要：今天要講的是，如何在數組中尋找元素，對應中的，，，以及方法。如果往一個有序數組中插入元素，使得數組繼續保持有序，那么這個插入位置是這就是這個方法的作用，有序，很顯然用二分查找即可。 Why underscore （覺得這部分眼熟的可以直接跳到下一段了...）最近開始看 underscore.js 源碼，并將 underscore.js 源碼解讀放在了我的 2016 計劃中。閱讀一...

0x584a 2019-08-21 10:51 評論0 收藏0