JavaScript 數組中的 indexOf 方法

468122151 發布于2019-08-21 14:35 / 3132人閱讀

摘要：數組方法大家再熟悉不過了，卻忽略了數組有這個方法我個人感覺。輸出因為是數組的第個元素，匹配到并返回下標。輸出因為此方法從頭匹配直到匹配到時返回第一個數組元素的下表，而不是返回全部匹配的下標。

最近項目遇到一個小問題代碼我會簡化成小例子展示給大家。

用心看到最后會有收獲哈，基礎扎實的童鞋可以直接跳到數組類型使用。

說到 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).

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

總結

小知識點積累，不作為深入討論的話題，因此這里沒有解釋 indexOf() 的第二個參數，相信大家都知道第二個參數的作用，不知道的可以看這里String.prototype.indexOf(),然后結合上面數組的鏈接也看一下第二個參數。

文章出自 orange 的個人博客 http://orangexc.xyz/

云服務器 GPU云服務器 javascript中的二維數組 javascript數組方法數組indexof的用法 javascript中的

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

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

JS專題之數組去重

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

only_do 2019-08-26 13:29 評論0 收藏0
Javascript數組系列二之迭代方法2

摘要：該方法接受兩個參數，一個是元素每一項執行的回調函數，一個是可選參數，回調函數運行時的值。今天我們來繼續 Javascript 數組系列的文章，上文《Javascript數組系列二之迭代方法1》我們說到一些數組的迭代方法，我們在開發項目實戰的過程中熟練的使用可以大大提高我們的開發效率以及數據的處理。接下來我們繼續來講解其他的一些迭代的方法。天也黑了，時間也不早了，話不多說，擼起袖...

fredshare 2019-08-23 11:56 評論0 收藏0
JavaScript es5中的Array常用的forEach、map、filter、indexOf

摘要：的的區別和相同之處就是數組的遍歷循環，回調支持三個參數，第個是遍歷的數組內容第個是對應的數組索引，第個是數組本身他是沒有返回值得，不需要再下面，更進一步，除了接受一個必須的回調函數參數，還可以接受一個可選的上下文參數改變回調函數里面 Array的forEach、map的區別和相同之處 forEach 1、 forEach就是數組的遍歷、循環，回調支持三個參數，第1個是遍歷的數組內容；...

xuexiangjys 2019-08-20 15:37 評論0 收藏0
JavaScript數組知多少

摘要：數組中的元素自動前移，比慢的多。該方法接受一個返回值為布爾類型的函數，對數組中得每個元素使用該函數，如果對于所有的元素，該函數都返回則該方法返回。數組的維基百科定義是：在編程語言中，數組數據結構（英語：array data structure），簡稱數組（英語：Array），是一種數據結構，是數據元素（elements）的集合。元素可以通過索引來任意存取，索引通常是數字，用來計算元...

Coding01 2019-08-21 11:18 評論0 收藏0
JavaScript面向對象編程——Array類型

摘要：中并沒有明確的數組數據類型。返回數組對象的原始值。專門用于篩選出數組中符合函數判斷條件的元素組成的心數組。專門用于對原數組中每個元素執行相同的函數對象規定的操作。概述一維數組數組是一個有序的數據集合，可以通過數組名稱和索引進行訪問。JavaScript中并沒有明確的數組數據類型。二維數組數組是可以嵌套的，這就意味著一個數組可以作為一個袁旭被包含在另一個數組里面。利用JavaS...

DirtyMind 2019-08-26 12:16 評論0 收藏0