Array.prototyp.includes बनाम Array.prototype.indexOf


112

बेहतर पठनीयता के अलावा, के लिए किसी भी लाभ है includesसे अधिक indexOf? वे मुझे समान लगते हैं।

इसमें क्या अंतर है

var x = [1,2,3].indexOf(1) > -1; //true

और इस?

var y = [1,2,3].includes(1); //true

12
includesबहुत बुरा ब्राउज़र समर्थन है।
क्वेंटिन

4
ध्यान दें कि includesES6 / ES2015 का हिस्सा नहीं है। यह ECMAScript के अगले संस्करण के लिए एक प्रस्ताव है और इसे इसी साल जोड़ा जाएगा।
फेलिक्स क्लिंग

4
बस यह भी उल्लेख करना चाहता था कि includesIE में समर्थित नहीं है
ZvKa

जवाबों:


138

tl; dr: NaN अलग तरह से व्यवहार किया जाता है:

  • [NaN].indexOf(NaN) > -1 है false
  • [NaN].includes(NaN) है true

से प्रस्ताव :

प्रेरणा

ECMAScript सरणियों का उपयोग करते समय, यह निर्धारित करना आम तौर पर वांछित होता है कि सरणी में कोई तत्व शामिल है या नहीं। इसके लिए प्रचलित पैटर्न है

if (arr.indexOf(el) !== -1) {
    ...
}

विभिन्न अन्य संभावनाओं के साथ, जैसे arr.indexOf(el) >= 0, या यहां तक ​​कि ~arr.indexOf(el)

ये पैटर्न दो समस्याओं को प्रदर्शित करते हैं:

  • वे "यह कहने में विफल हैं कि आपका क्या मतलब है": यह पूछने के बजाय कि क्या सरणी में कोई तत्व शामिल है, आप पूछते हैं कि सरणी में उस तत्व की पहली घटना का सूचकांक क्या है, और फिर इसे निर्धारित करने के लिए इसकी तुलना करें या बिट-ट्वीड करें। आपके वास्तविक प्रश्न का उत्तर।
  • वे इसके लिए असफल हैं NaN, जैसा कि indexOfसख्त समानता तुलना और इस प्रकार उपयोग करता है[NaN].indexOf(NaN) === -1

प्रस्तावित समाधान

हम एक Array.prototype.includesविधि को जोड़ने का प्रस्ताव करते हैं , जैसे कि उपरोक्त पैटर्न को फिर से लिखा जा सकता है

if (arr.includes(el)) {
    ...
}

यह ऊपर के रूप में लगभग एक ही शब्दार्थ है, सिवाय इसके कि यह साम्य समानता की तुलना में SameValueZero तुलना एल्गोरिथ्म का उपयोग करता है, इस प्रकार बना रहा है [NaN].includes(NaN) सच है।

इस प्रकार, यह प्रस्ताव मौजूदा कोड में देखी गई दोनों समस्याओं को हल करता है।

हम इसके अलावा एक जोड़ने fromIndexपैरामीटर, के समान Array.prototype.indexOfऔर String.prototype.includesस्थिरता के लिए,।


अग्रिम जानकारी:


1
केवल आधा सच। इसके अलावा अलग: लापता तत्वों के रूप में माना जाता undefinedहै .includes()और द्वारा नहीं माना जाता है .indexOf()
रॉबर्ट सिएमर

11

यदि आप प्रदर्शन के बारे में आश्चर्यचकित करते हैं, फिलहाल, indexOf तेज है, लेकिन यह JSperf परीक्षण यह दर्शाता है कि जितना अधिक समय बीतता है , उससे अधिक includes()तेज होगाindexOf (मुझे लगता है कि इसे आगे अनुकूलित किया जाएगा)।

IMHO, मैं भी लिखना पसंद करता हूं if (arr.includes(el)) {}क्योंकि यह स्पष्ट और अधिक से अधिक रखरखाव योग्य हैif (arr.indexOf(el) !== -1) {}


1
ऐसा लगता है कि प्रदर्शन में अंतर स्पष्ट नहीं है। मेरा मोबाइल फ़ायरफ़ॉक्स दिखाता है कि indexOf वास्तव में तेज़ है। कुछ क्रोम संस्करण समान कार्य करते हैं ... लेकिन अंतर आज के कार्यान्वयन में वैसे भी नगण्य लगता है।
नक्स

8

.indexOf()और .includes()विधियों का उपयोग किसी सरणी में एक तत्व की खोज के लिए या किसी दिए गए स्ट्रिंग में एक चरित्र / विकल्प को खोजने के लिए किया जा सकता है।

ऐरे में उपयोग

( ECMAScript स्पेसिफिकेशन से लिंक )

  1. indexOfका उपयोग करता सख्त समानता तुलना जबकि includesका उपयोग करता है SameValueZero एल्गोरिथ्म। इस कारण से, मतभेद के दो बिंदु उत्पन्न होते हैं।

  2. जैसा कि फेलिक्स क्लिंग ने कहा है , व्यवहार अलग है NaN

let arr = [NaN];

arr.indexOf(NaN); // returns -1; meaning NaN is not present
arr.includes(NaN); // returns true
  1. के मामले में व्यवहार भी अलग है undefined
let arr = [ , , ];

arr.indexOf(undefined); // returns -1; meaning undefined is not present
arr.includes(undefined); // returns true

स्ट्रिंग में उपयोग

( ECMAScript स्पेसिफिकेशन से लिंक )

  1. यदि आप एक RegExp पास करते हैं indexOf, तो यह RegExp को एक स्ट्रिंग के रूप में मानेगा और यदि यह पाया जाता है, तो स्ट्रिंग के सूचकांक को लौटा देगा। हालाँकि, यदि आप एक RegExp पास करते हैं, तो includesयह एक अपवाद फेंक देगा।
let str = "javascript";

str.indexOf(/\w/); // returns -1 even though the elements match the regex because /\w/ is treated as string
str.includes(/\w/); // throws TypeError: First argument to String.prototype.includes must not be a regular expression

प्रदर्शन

जैसा कि 538ROMEO ने बताया, includesथोड़ा (बहुत छोटा) थोड़ा धीमा हो सकता है (इसके लिए पहले तर्क के रूप में एक रेगेक्स की जांच करना आवश्यक है)indexOf लेकिन वास्तव में, इससे बहुत फर्क नहीं पड़ता और नगण्य है।

इतिहास

String.prototype.includes()ECMAScript 2015 Array.prototype.includes()में पेश किया गया था जबकि ECMAScript 2016 में पेश किया गया था। ब्राउज़र समर्थन के संबंध में, उन्हें बुद्धिमानी से उपयोग करें।

String.prototype.indexOf()और Array.prototype.indexOf()ईसीएमएस्क्रिप्ट के ईएस 5 संस्करण में मौजूद हैं और इसलिए सभी ब्राउज़रों द्वारा समर्थित हैं।


indexOfएक सरणी में trueस्पष्ट रूप से सेटिंग के बाद देता है undefined: let arr=[undefined];या let arr=[];arr[0]=undefined;अबarr.indexOf(undefined) === 0
जय दादानिया

आप केवल एक अंतर के साथ संकेत कर रहे हैं undefined: इसका कारण यह है कि .includesलापता तत्वों के साथ व्यवहार करता है undefined, जबकि .indexOf()उन्हें अनदेखा करता है। आप लापता तत्वों को "बना" भी सकते हैं arr[number beyond length] = whatever
रॉबर्ट सीमर

कोई भी स्ट्रिंग्स के लिए नहीं कह रहा था, लेकिन आपकी टिप्पणी यह ​​सुझाव देती है कि .includes()केवल स्ट्रिंग्स खाती है। हकीकत में दोनों ही तरीके किसी भी चीज को उतना ही मजबूत कर सकते हैं जितना कि वह कर सकते हैं। Regex विशेष रूप से करने के लिए तर्क के रूप में बाहर रखा गया है .includes()करने के लिए मानक के भविष्य परिवर्धन के लिए अनुमति मौजूदा मसौदा के अनुसार।
रॉबर्ट सिएमर

4

वैचारिक रूप से आपको इंडेक्सऑफ का उपयोग करना चाहिए जब आप स्थिति इंडेक्स का उपयोग करना चाहते हैं, तो आप तत्व के स्थान को प्राप्त करने के बाद आपको मूल्य निकालने या सरणी पर काम करने का मौका देंगे, अर्थात स्लाइस, शिफ्ट या विभाजन का उपयोग करें। दूसरी ओर, Array.includes का उपयोग केवल यह जानने के लिए करें कि क्या मान सरणी के अंदर है और स्थिति नहीं है क्योंकि आपको इसकी परवाह नहीं है।


0

indexOf()और includes()दोनों एक सरणी में तत्वों को खोजने के लिए इस्तेमाल किया जा सकता है, हालांकि प्रत्येक फ़ंक्शन अलग-अलग रिटर्न मान देता है।

indexOfएक संख्या देता है ( -1यदि तत्व तत्व में मौजूद नहीं है, या तत्व मौजूद है तो सरणी स्थिति)।

includes()एक बूलियन मान लौटाता है ( trueया false)।


हाय कृति, इस प्रश्न का उत्तर पहले ही दिया जा चुका है और इसका एक स्वीकृत उत्तर है। इसके अलावा, आप देख सकते हैं कि आपके उत्तर में केवल वही जानकारी है जो पहले से ही अन्य उत्तरों में बताई गई है। प्रश्न, अंत में, पहले से ही 4 साल पुराना है। कृपया नवीनतम प्रश्नों या अनुत्तरित लोगों पर मार्गदर्शन प्रदान करें। धन्यवाद
leonardfactory
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.