जावास्क्रिप्ट में कथनों में (के लिए) और (के लिए) के बीच क्या अंतर है?

409

मुझे पता है कि for... inलूप क्या है (यह कुंजी पर पुनरावृत्त होता है), लेकिन पहली बार के बारे में सुना for... of(यह मूल्य से अधिक पुनरावृत्त करता है)।

मैं for... ofलूप से उलझन में हूं । मुझे विशेषण नहीं मिला। यह नीचे दिया गया कोड है:

var arr = [3, 5, 7];
arr.foo = "hello";

for (var i in arr) {
  console.log(i); // logs "0", "1", "2", "foo"
}

for (var i of arr) {
  console.log(i); // logs "3", "5", "7"
  // it is does not log "3", "5", "7", "hello"
}

मुझे जो मिला है, वह for... ofसंपत्ति मूल्यों पर आधारित है। तो फिर "3", "5", "7", "hello"इसके बजाय लॉग (रिटर्न) क्यों नहीं किया जाता है "3", "5", "7"? लेकिन for... inलूप प्रत्येक कुंजी पर निर्भर करता है ( "0", "1", "2", "foo")। यहाँ for... inलूप भी fooकुंजी पर पुनरावृत्त करता है। लेकिन संपत्ति for... ofके मूल्य से अधिक पुनरावृति नहीं करता है । ऐसा क्यों है?foo"hello"

संक्षेप में लंबी कहानी:

यहां मैंने for... ofलूप को सांत्वना दी । इसे लॉग इन करना चाहिए "3", "5", "7","hello"लेकिन यहां यह लॉग होता है "3", "5", "7"। क्यों ?

उदाहरण लिंक

javascript  arrays  object 
— मुकुंद कुमार
स्रोत
1
यदि आप इसे याद करते हैं, तो यहां इंसेप्शन लिंक डेवलपर.
— एंथनी रसेल
1
जहाँ तक मेरी समझ जाती है, for ... ofभाषा में एरर्स के साथ उपयोग करने के for ... inसाथ समस्याओं को ठीक करने के लिए लाया गया था । Array.prototypeइस तरह से संशोधन किया जा सकता है कि अतिरिक्त गुण उपलब्ध हैं, यह उन्हें असुरक्षित बनाने के लिए असुरक्षित है क्योंकि आप गैर-संख्यात्मक कुंजी प्राप्त कर सकते हैं जो आप उम्मीद नहीं कर रहे थे।
— Phylogenesis
2
भविष्य के पाठकों के लिए: यह शायद जावास्क्रिप्ट ofकीवर्ड ( डुप्लिकेट ऑफ़ लूप्स) का डुप्लिकेट नहीं है , क्योंकि यह सामान्य अवलोकन के लिए पूछने के बजाय फीचर के एक विशिष्ट व्यवहार के बारे में पूछता है।
— अप्सिलर्स
2
बस " for <key> in" और " for <value> of" कहने की आदत for..of
— बॉटनेट
गणनीय के बारे में महान लेख medium.com/@shivamethical/...
— Kalhan.Toress

जवाबों:

304

for in किसी वस्तु के असंख्य गुण नामों पर लूप।

for of(ES6 में नया) एक वस्तु-विशेष पुनरावृत्ति का उपयोग करता है और उसके द्वारा उत्पन्न मूल्यों पर लूप करता है।

आपके उदाहरण में, सरणी इटरेटर सरणी में सभी मानों (गैर-सूचकांक गुणों को अनदेखा) करता है।

— Bergi
स्रोत
9
for ... ofES6 में मानकीकृत है।
— जस्टिन
2
यह अजीब है, मैं कसम खाता हूं मैंने पढ़ा है कि इसे ईएस 7 में वापस ले जाया गया था, लेकिन जाहिर तौर पर यह सच नहीं था। मेरी गलती।
— अलेक्जेंडर ओ'मैरा
40
एक महामारी: 'o'f -> नहीं' o'bjects, 'i'n -> नहीं' i'terables
— Placoplatr
4
एक और महामारी: for... of:: सरणियाँ :: सरणियों की हमेशा एक लंबाई होती है, इसलिए आप सोच सकते हैं for.. [nth तत्व] of.. [q तत्व]
— Nathan Smith
14
एक और महामारी ... for..in..keys=== विदेशी कुंजियाँ === for...inकुंजियों के लिए उपयोग! जैसे, for...ofमान के लिए उपयोग करें ।
— गनर
237

मुझे इसका पूरा उत्तर यहां मिलता है: https://www.typescriptlang.org/docs/handbook/iterators-and-generators.html (हालांकि यह टाइप स्क्रिप्ट के लिए है, यह जावास्क्रिप्ट के लिए भी यही है)

दोनों for..ofऔर for..inबयान सूचियों पर पुनरावृति; मान पुनरावृत्त होते हुए भिन्न होते हैं, हालांकि for..inपुनरावृत्त होने वाली वस्तु पर कुंजियों की for..ofएक सूची देता है , जबकि पुनरावृत्त होने वाली वस्तु के संख्यात्मक गुणों के मूल्यों की एक सूची देता है।

यहाँ एक उदाहरण है जो इस भेद को प्रदर्शित करता है:

let list = [4, 5, 6];

for (let i in list) {
   console.log(i); // "0", "1", "2",
}

for (let i of list) {
   console.log(i); // "4", "5", "6"
}

एक और अंतर यह है कि for..in किसी भी वस्तु पर काम करता है; यह इस ऑब्जेक्ट पर गुणों का निरीक्षण करने के तरीके के रूप में कार्य करता है। for..ofदूसरी ओर, मुख्य रूप से चलने योग्य वस्तुओं के मूल्यों में दिलचस्पी है। निर्मित वस्तुओं जैसे मानचित्र और सेट implement Symbol.iteratorसंपत्ति जिसमें संग्रहीत मूल्यों तक पहुंच की अनुमति है।

let pets = new Set(["Cat", "Dog", "Hamster"]);
pets["species"] = "mammals";

for (let pet in pets) {
   console.log(pet); // "species"
}

for (let pet of pets) {
    console.log(pet); // "Cat", "Dog", "Hamster"
}
— अलीरज़ा फ़ताही
स्रोत
1
फ़ुथर्मोर, कुछ इस तरह के लिए बुला रहा है (चलो मैं {}) {कंसोल.लॉग (i); } एक TypeError को फेंक देगा: VM391: 1 बिना पढ़ा हुआ TypeError: {} <गुमनाम>: 1: 14 में कम से कम क्रोम में नहीं है
— kboom
जीत के लिए टीएस - उदाहरण गलत है, बाद में "स्तनधारियों" को लौटना चाहिए, न कि // "कैट", "डॉग", "हैम्स्टर" को
— martinp999
8
मुझे यह याद है: "के लिए" में index। और फिर "के लिए" valuesप्रत्येक सूचकांक / कुंजी / आइटम का होगा।
— शेरलहोमन
अच्छा, यह मेरे लिए राजा होने जा रहा है: वस्तुओं के पुनरावृत्ति के लिए इन-इन्स का उपयोग करके मुझे आमतौर पर एक let thisItem = items[all];चर बनाना पड़ता है , for...ofजो शॉर्टकट की मदद करता है!
— वसीली हॉल
मुझे यह याद है: के for...inरूप में Object.keys(), लगता है क्या? Arrays ऑब्जेक्ट्स हैं, sot जो उनकी इंबोलोड भी लौटाते हैं। :)
— सुजीत अग्रहरी
38

के लिए ... पाश में

के लिए ... लूप में गिनती तर्क और बाहर निकलने की स्थिति को समाप्त करके लूप के लिए कमजोरियों पर सुधार होता है।

उदाहरण:

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const index in digits) {
  console.log(digits[index]);
}

लेकिन, आपको अभी भी सरणी के मूल्यों तक पहुंचने के लिए एक सूचकांक का उपयोग करने के मुद्दे से निपटना होगा, और यह बदबू आ रही है; यह लगभग पहले की तुलना में अधिक भ्रमित करता है।

इसके अलावा, के लिए ... पाश में आप बड़ी मुसीबत में पड़ सकते हैं जब आपको एक सरणी (या किसी अन्य वस्तु) में एक अतिरिक्त विधि जोड़ने की आवश्यकता होती है। क्योंकि ... सभी प्रगणित गुणों पर लूप लूप में, इसका मतलब है कि यदि आप सरणी के प्रोटोटाइप में कोई अतिरिक्त गुण जोड़ते हैं, तो वे गुण लूप में भी दिखाई देंगे।

Array.prototype.decimalfy = function() {
  for (let i = 0; i < this.length; i++) {
    this[i] = this[i].toFixed(2);
  }
};

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const index in digits) {
  console.log(digits[index]);
}

प्रिंटों:

0

1

2

3

4

5

6

7

8

9

function () {for (let i = 0; i <this.length; i ++) {this [i] = [[i] .toFixed (2); }}

यही कारण है कि ... लूप में जब सरणियों पर लूपिंग को हतोत्साहित किया जाता है।

नोट : forEach लूप जावास्क्रिप्ट में लूप के लिए एक और प्रकार है। हालांकि, forEach()वास्तव में एक सरणी विधि है, इसलिए इसका उपयोग केवल विशेष रूप से सरणियों के साथ किया जा सकता है। फ़ोरच लूप को रोकने या तोड़ने का कोई तरीका नहीं है। यदि आपको अपने लूप में इस प्रकार के व्यवहार की आवश्यकता है, तो आपको लूप के लिए एक मूल का उपयोग करना होगा।

के लिए ... पाश की

के लिए ... लूप का उपयोग किसी भी प्रकार के डेटा पर लूप करने के लिए किया जाता है जो कि चलने योग्य है।

उदाहरण:

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const digit of digits) {
  console.log(digit);
}

प्रिंटों:

0

1

2

3

4

5

6

7

8

9

यह लूप के लिए सभी का सबसे संक्षिप्त संस्करण लूप बनाता है।

लेकिन रुकिए, और भी है! के लिए ... लूप के कुछ अतिरिक्त लाभ भी हैं जो लूप में और उसके लिए ... की कमजोरियों को ठीक करते हैं।

आप किसी भी समय लूप के लिए ... को रोक या तोड़ सकते हैं।

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const digit of digits) {
  if (digit % 2 === 0) {
    continue;
  }
  console.log(digit);
}

प्रिंटों:

1

3

5

7

9

और आपको वस्तुओं में नए गुण जोड़ने के बारे में चिंता करने की ज़रूरत नहीं है। लूप के लिए ... ऑब्जेक्ट में मूल्यों पर केवल लूप होगा।

— Elar
स्रोत
2
" फॉर ... लूप में काउंटिंग लॉजिक और एक्जिट कंडीशन को खत्म करके लूप की कमजोरियों पर सुधार किया जाता है " - नहीं, ऐसा नहीं है। हर्गिज नहीं।
— बेर्गी
1
@Bergi शायद आप स्पष्ट कर सकते हैं कि आपको क्यों लगता है कि यह क्या नहीं करता है, और क्या आप वास्तव में सोचते हैं कि इसमें सुधार होता है?
— एल्लर
2
यह किसी भी चीज़ में सुधार नहीं करता है, इसका अपना स्वयं का डी'आर्ट्रे है। यह for (var index=0; index<arr.length; index++)लूप की तुलना में पूरी तरह से कुछ अलग करता है (जहां indexकाउंटर एक पूर्णांक है, आपके उदाहरण के विपरीत)।
— बर्गी
यह इस तरह का भ्रम पैदा करता है कि उदाहरण के लिए आपके द्वारा चुना गया ऐरे वैल्यू एरे इंडेक्स वैल्यू के अनुरूप है ...
— सर्गेई
18

अंतर for..inऔर for..of:

दोनों for..inऔर for..ofलूपिंग निर्माण हैं जो डेटा संरचनाओं पर पुनरावृति करने के लिए उपयोग किए जाते हैं। फर्क सिर्फ इतना है कि वे क्या करते हैं:

  1. for..inकिसी ऑब्जेक्ट की सभी गणना करने योग्य संपत्ति कुंजियों पर पुनरावृत्त करता है
  2. for..ofपुनरावृत्त वस्तु के मूल्यों पर पुनरावृति। पुनरावृत्त वस्तुओं के उदाहरण सरणियाँ, तार और नोडलिस्ट हैं।

उदाहरण:

let arr = ['el1', 'el2', 'el3'];

arr.addedProp = 'arrProp';

// elKey are the property keys
for (let elKey in arr) {
  console.log(elKey);
}

// elValue are the property values
for (let elValue of arr) {
  console.log(elValue)
}
स्निपेट का विस्तार करें

इस उदाहरण में हम देख सकते हैं कि for..inलूप ऑब्जेक्ट की कुंजियों पर निर्भर करता है, जो इस उदाहरण में एक ऐरे ऑब्जेक्ट है। चाबियाँ 0, 1, 2 हैं जो हमारे द्वारा जोड़े गए सरणी तत्वों के अनुरूप हैं और addedProp। इस तरह से arrसरणी वस्तु क्रोम devtools में दिखता है:

यहां छवि विवरण दर्ज करें

आप देखते हैं कि हमारा for..inलूप इन मूल्यों पर ध्यान देने से ज्यादा कुछ नहीं करता है।

for..ofहमारे उदाहरण में पाश से अधिक iterates मूल्यों एक डेटा संरचना की। इस विशिष्ट उदाहरण में मान हैं 'el1', 'el2', 'el3'। वे मान जो एक पुनरावृत्ति डेटा संरचना का उपयोग करके वापस आएंगे, for..ofवह चलने योग्य वस्तु के प्रकार पर निर्भर है। उदाहरण के लिए एक सरणी सभी सरणी तत्वों के मूल्यों को लौटाएगी जबकि एक स्ट्रिंग स्ट्रिंग के प्रत्येक व्यक्ति के चरित्र को लौटाती है।

— विलेम वैन डेर वेन
स्रोत
8

यह for...inकथन एक मनमाने क्रम में किसी वस्तु के असंख्य गुणों पर निर्भर करता है। Enumerable गुण वे गुण होते हैं जिनके आंतरिक [[Enumerable]] ध्वज को सही पर सेट किया जाता है, इसलिए यदि प्रोटोटाइप श्रृंखला में कोई भी असंख्य संपत्ति है, तो for...inलूप उन पर भी पुनरावृति करेगा।

for...ofबयान डेटा पर iterates कि iterable वस्तु परिभाषित करता है से अधिक दोहराया जा सकता है।

उदाहरण:

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};

let iterable = [3, 5, 7];

for (let i in iterable) {
  console.log(i); // logs: 0, 1, 2, "arrCustom", "objCustom"
}

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // logs: 0, 1, 2,
  }
}

for (let i of iterable) {
  console.log(i); // logs: 3, 5, 7
}

पहले की तरह, आप लूप hasOwnPropertyमें जोड़ना छोड़ सकते हैं for...of।

— रमनदीप सोही
स्रोत
7

फॉर-इन स्टेटमेंट किसी वस्तु के असंख्य गुणों पर, मनमाने क्रम में पुनरावृत्ति करता है।

लूप स्वयं वस्तु के सभी प्रगणनीय गुणों पर आधारित होगा और वे वस्तुएं इसके निर्माता के प्रोटोटाइप से विरासत में मिली हैं

आप इसे मूल रूप से पुनरावृत्त कर सकते हैं और सभी कुंजियों को सूचीबद्ध कर सकते हैं।

var str = 'abc';
var arrForOf = [];
var arrForIn = [];

for(value of str){
  arrForOf.push(value);
}

for(value in str){
  arrForIn.push(value);
}

console.log(arrForOf); 
// ["a", "b", "c"]
console.log(arrForIn); 
// ["0", "1", "2", "formatUnicorn", "truncate", "splitOnLast", "contains"]
— देवदत्त नटू
स्रोत
for in केवल चाबियाँ दिखाएगा अगर वे हमारे द्वारा जोड़ रहे हैं, यह formatUnicorn दिखाने वाला नहीं है
— मिलाद
1
"formatUnicorn", "truncate", "splitOnLast", "इसमें" प्रिंट आउट होता है क्योंकि स्टैकओवरफ़्लो ओवरराइड होता है String.prototype।
— jasonxia23
6

कुछ पहले से परिभाषित डेटा प्रकार हैं जो हमें उन पर आसानी से पुनरावृत्त करने की अनुमति देता है जैसे कि सरणी, मानचित्र, स्ट्रिंग ऑब्जेक्ट

सामान्य से अधिक पुनरावृत्तियों में पुनरावृत्तियों के लिए और प्रतिक्रिया में हमें उन कुंजियों के साथ प्रदान करता है जो प्रविष्टि के क्रम में हैं जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है।

  const numbers = [1,2,3,4,5];
   for(let number in number) {
     console.log(number);
   }

   // result: 0, 1, 2, 3, 4

अब अगर हम उसी के साथ प्रयास करते हैं , तो जवाब में यह हमें मूल्यों के साथ प्रदान करता है न कि चाबियाँ। जैसे

  const numbers = [1,2,3,4,5];
   for(let numbers of numbers) {
    console.log(number);
  }

  // result: 1, 2, 3, 4, 5

इसलिए दोनों पुनरावृत्तियों को देखते हुए हम आसानी से दोनों के बीच के अंतर को अलग कर सकते हैं।

नोट: - के लिए केवल Symbol.iterator साथ काम करता है

इसलिए यदि हम सामान्य वस्तु पर पुनरावृति करने की कोशिश करते हैं, तो यह हमें एक त्रुटि देगा जैसे-

const Room = {
   area: 1000,
   height: 7,
   floor: 2
 }

for(let prop in Room) {
 console.log(prop);
 } 

// Result area, height, floor

for(let prop of Room) {
  console.log(prop);
 }

कमरा चलने योग्य नहीं है

अब हम इसे एक ES6 Symbol.iterator जैसे परिभाषित करने की जरूरत है

  const Room= {
    area: 1000, height: 7, floor: 2,
   [Symbol.iterator]: function* (){
    yield this.area;
    yield this.height;
    yield this.floors;
  }
}


for(let prop of Room) {
  console.log(prop);
 } 

//Result 1000, 7, 2

यह For और In के बीच का अंतर है । आशा है कि यह अंतर स्पष्ट कर सकता है।

— अमित मूंदड़ा
स्रोत
5

दो छोरों के बीच एक और अंतर , जिसका किसी ने पहले उल्लेख नहीं किया है:

विनाशकारी for...inवंचित है। for...ofइसके बजाय उपयोग करें ।

स्रोत

इसलिए यदि हम लूप में विनाशकारी का उपयोग करना चाहते हैं , तो प्रत्येक सरणी तत्व के सूचकांक और मूल्य दोनों प्राप्त करने के लिए, हमें लूप का उपयोग ऐरे विधि से करना चाहिए :for...ofentries()

for (const [idx, el] of arr.entries()) {
    console.log( idx + ': ' + el );
}
— simhumileco
स्रोत
1
हां @GarMargalit, मैंने इसे ध्यान से पढ़ा। मैं मानता हूं कि for each...inपदावनत (पहला बिंदु) है, लेकिन मैंने इसके बारे में नहीं लिखा था ... मैंने लिखा है कि "विनाशकारी for...inअपवित्र है। for...ofइसके बजाय उपयोग करें ।" (दूसरा बिंदु): developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… क्या आप मुझसे @GalMargalit सहमत हैं?
— सिम्हुमेलेको
1
हाहा आप सही कह रहे हैं, मैंने ध्यान से नहीं पढ़ा! सच है, मैं मूल रूप से एक ही बात सोच रहा था और सोचा था कि आप दूसरे का जिक्र कर रहे हैं।
— गैल मारगालिट
2

हर किसी ने समझाया कि यह समस्या क्यों होती है, लेकिन इसके बारे में भूलना और फिर अपने सिर को खरोंचने के लिए बहुत आसान है कि आपको गलत परिणाम क्यों मिले। खासकर जब आप डेटा के बड़े सेट पर काम कर रहे होते हैं, जब परिणाम पहली नज़र में ठीक लगते हैं।

का उपयोग करते हुए Object.entriesआप सभी गुण गर्त में जाने के लिए सुनिश्चित:

var arr = [3, 5, 7];
arr.foo = "hello";

for ( var [key, val] of Object.entries( arr ) ) {
   console.log( val );
}

/* Result:

3
5
7
hello

*/
— डेविड सी।
स्रोत
2

बहुत सारे अच्छे जवाब मिलते हैं, लेकिन मैं अपने 5 सेंट लगाने का फैसला करता हूं, केवल अच्छा उदाहरण देने के लिए:

पाश में

सभी असंख्य प्रॉप्स पर पुनरावृति

let nodes = document.documentElement.childNodes;

for (var key in nodes) {
  console.log( key );
}
स्निपेट का विस्तार करें

पाश के लिए

सभी पुनरावृत्त मूल्यों पर पुनरावृत्तियों

let nodes = document.documentElement.childNodes;

for (var node of nodes) {
  console.log( node.toString() );
}
स्निपेट का विस्तार करें

— WebBrother
स्रोत
2

जब मैं पहली बार बाहर शुरू कर दिया सीखने में के लिए और पाश की , मैं अपने उत्पादन के साथ भी उलझन में था, लेकिन अनुसंधान के एक जोड़े के साथ और समझ आप निम्नलिखित की तरह अलग-अलग पाश के बारे में सोच सकते हैं:

  1. के लिए ... लूप में व्यक्तिगत संपत्तिके अनुक्रमित कोलौटाता हैऔर संपत्ति के मूल्य पर प्रभाव का कोई प्रभाव नहीं पड़ता है, यह संपत्ति पर जानकारी को लूप और रिटर्न करता हैन कि मूल्य पर । उदाहरण के लिए

let profile = { name : "Naphtali", age : 24, favCar : "Mustang", favDrink : "Baileys" }

उपरोक्त कोड केवल प्रोफ़ाइल नामक एक ऑब्जेक्ट बना रहा है , हम इसका उपयोग हमारे दोनों उदाहरणों के लिए करेंगे , इसलिए, जब आप प्रोफ़ाइल ऑब्जेक्ट को एक उदाहरण पर देखते हैं , तो भ्रमित न हों , बस यह जानें कि इसे बनाया गया था।

तो अब हम नीचे में लूप के लिए ... का उपयोग करते हैं

for(let myIndex in profile){
    console.log(`The index of my object property is ${myIndex}`)
}
 // Outputs : 
        The index of my object property is 0
        The index of my object property is 1
        The index of my object property is 2
        The index of my object property is 3

अब आउटपुट होने का कारण यह है कि हमारे प्रोफाइल ऑब्जेक्ट में चार (4) गुण हैं और जैसा कि हम सभी जानते हैं कि 0 से शुरू होता है ... n , इसलिए, हम 0,1,2,3 गुणों का सूचकांक प्राप्त करते हैं क्योंकि हम हैं for..in लूप के साथ काम करना ।

  1. के लिए ... पाश * या तो संपत्ति , मूल्य या दोनों वापस कर सकते हैं , आइए देखें कि कैसे। JavaScript में, हम ऑब्जेक्ट्स के माध्यम से सामान्य रूप से लूप नहीं कर सकते हैं, जैसा कि हम सरणियों पर हैं, इसलिए, कुछ तत्व हैं जो हम किसी भी विकल्प को किसी ऑब्जेक्ट से एक्सेस करने के लिए उपयोग कर सकते हैं।

    • Object.keys ( ऑब्जेक्ट-नेम- गो -यहाँ ) >>> किसी ऑब्जेक्ट की कुंजियाँ या गुण लौटाता है ।

    • Object.values ( ऑब्जेक्ट-नेम- गो -यहाँ ) >>> किसी ऑब्जेक्ट के मान लौटाता है ।

    • Object.entries ( ऑब्जेक्ट-नाम-यहाँ जाता है ) >>> किसी ऑब्जेक्ट की कुंजी और मान दोनों लौटाता है ।

नीचे उनके उपयोग के उदाहरण हैं, Object.entries () पर ध्यान दें :

Step One: Convert the object to get either its key, value, or both.
Step Two: loop through.


// Getting the keys/property

   Step One: let myKeys = ***Object.keys(profile)***
   Step Two: for(let keys of myKeys){
             console.log(`The key of my object property is ${keys}`)
           }

// Getting the values of the property

    Step One: let myValues = ***Object.values(profile)***
    Step Two : for(let values of myValues){
                 console.log(`The value of my object property is ${values}`)
               }

Object.entries () का उपयोग करते समय यह होता है कि आप ऑब्जेक्ट पर दो प्रविष्टियाँ कॉल कर रहे हैं, अर्थात कुंजी और मान। आप दोनों में से किसी भी प्रविष्टि से कॉल कर सकते हैं। उदाहरण नीचे।

Step One: Convert the object to entries, using ***Object.entries(object-name)***
Step Two: **Destructure** the ***entries object which carries the keys and values*** 
like so **[keys, values]**, by so doing, you have access to either or both content.


    // Getting the keys/property

       Step One: let myKeysEntry = ***Object.entries(profile)***
       Step Two: for(let [keys, values] of myKeysEntry){
                 console.log(`The key of my object property is ${keys}`)
               }

    // Getting the values of the property

        Step One: let myValuesEntry = ***Object.entries(profile)***
        Step Two : for(let [keys, values] of myValuesEntry){
                     console.log(`The value of my object property is ${values}`)
                   }

    // Getting both keys and values

        Step One: let myBothEntry = ***Object.entries(profile)***
        Step Two : for(let [keys, values] of myBothEntry){
                     console.log(`The keys of my object is ${keys} and its value 
is ${values}`)
                   }

अस्पष्ट भागों अनुभाग पर टिप्पणी करें।

— नप्ताली दुनीया
स्रोत
1

for-inपाश

for-inलूप का उपयोग संग्रह के अनगिनत गुणों के माध्यम से एक अनियंत्रित क्रम में पार करने के लिए किया जाता है । एक संग्रह एक कंटेनर प्रकार की वस्तु है जिसका आइटम एक इंडेक्स या एक कुंजी का उपयोग कर सकता है।

var myObject = {a: 1, b: 2, c: 3};
var myArray = [1, 2, 3];
var myString = "123";

console.log( myObject[ 'a' ], myArray[ 1 ], myString[ 2 ] );
स्निपेट का विस्तार करें

for-inलूप एक बार में एक संग्रह के असंख्य गुण ( कुंजियाँ ) निकालता है और एक बार में एक से अधिक पुनरावृत्त करता है। एक प्राप्य संपत्ति एक संग्रह की संपत्ति है जो लूप में दिखाई दे सकती है ।for-in

डिफ़ॉल्ट रूप से, ऐरे और ऑब्जेक्ट के सभी गुण for-inलूप में दिखाई देते हैं । हालाँकि, हम किसी संग्रह के गुणों को मैन्युअल रूप से कॉन्फ़िगर करने के लिए Object.defineProperty विधि का उपयोग कर सकते हैं ।

var myObject = {a: 1, b: 2, c: 3};
var myArray = [1, 2, 3];

Object.defineProperty( myObject, 'd', { value: 4, enumerable: false } );
Object.defineProperty( myArray, 3, { value: 4, enumerable: false } );

for( var i in myObject ){ console.log( 'myObject:i =>', i ); }
for( var i in myArray ){ console.log( 'myArray:i  =>', i ); }
स्निपेट का विस्तार करें

उपरोक्त उदाहरण में, संपत्ति dकी myObjectऔर सूचकांक 3के myArrayमें प्रकट नहीं होता for-inपाश क्योंकि वे के साथ कॉन्फ़िगर किया गया है enumerable: false।

for-inछोरों के साथ कुछ मुद्दे हैं । Arrays के मामले में, for-inलूप भी सिंटैक्स methodsका उपयोग करते हुए सरणी पर जोड़ा जाएगा myArray.someMethod = f, हालांकि, myArray.lengthबनी हुई है 4।

for-ofपाश

यह एक गलत धारणा है कि for-ofएक संग्रह के मूल्यों पर लूप होता है। for-ofपाश एक Iterableवस्तु पर पुनरावृति करता है। एक चलने योग्य एक ऐसी वस्तु है जिसके पास Symbol.iteratorअपने एक प्रोटोटाइप पर सीधे नाम के साथ विधि है ।

Symbol.iteratorविधि को एक Iterator वापस करना चाहिए । एक पुनरावृत्ति एक वस्तु है जो एक nextविधि है। यह विधि जब रिटर्न valueऔर doneगुण कहा जाता है ।

जब हम एक पुनरावृति iterable का उपयोग कर वस्तु for-ofपाश, Symbol.iteratorविधि एक बार एक मिल बुलाया जाएगा इटरेटर वस्तु। for-ofलूप के प्रत्येक पुनरावृत्ति के लिए , nextइस पुनरावृत्ति ऑब्जेक्ट की विधि doneको next()कॉल रिटर्न के गलत होने तक कहा जाएगा । for-ofप्रत्येक पुनरावृत्ति के लिए लूप द्वारा प्राप्त मूल्य यदि valueसंपत्ति next()कॉल द्वारा वापस आ गई ।

var myObject = { a: 1, b: 2, c: 3, d: 4 };

// make `myObject` iterable by adding `Symbol.iterator` function directlty on it
myObject[ Symbol.iterator ] = function(){
  console.log( `LOG: called 'Symbol.iterator' method` );
  var _myObject = this; // `this` points to `myObject`
  
  // return an iterator object
  return {
    keys: Object.keys( _myObject ), 
    current: 0,
    next: function() {
      console.log( `LOG: called 'next' method: index ${ this.current }` );
      
      if( this.current === this.keys.length ){
        return { done: true, value: null }; // Here, `value` is ignored by `for-of` loop
      } else {
        return { done: false, value: _myObject[ this.keys[ this.current++ ] ] };
      }
    }
  };
}

// use `for-of` loop on `myObject` iterable
for( let value of myObject ) {
  console.log( 'myObject: value => ', value );
}
स्निपेट का विस्तार करें

for-ofपाश ES6 में नया है और इसलिए कर रहे हैं Iterable और Iterables । Arrayनिर्माता प्रकार है Symbol.iteratorअपने प्रोटोटाइप पर विधि। Objectनिर्माता उदासी यह नहीं है लेकिन Object.keys(), Object.values()और Object.entries()तरीकों एक iterable वापसी ( आप उपयोग कर सकते हैं console.dir(obj)प्रोटोटाइप तरीकों की जांच करने के )। for-ofलूप का लाभ यह है कि किसी भी ऑब्जेक्ट को चलने योग्य बनाया जा सकता है, यहां तक ​​कि आपके कस्टम Dogऔर Animalकक्षाएं भी।

किसी वस्तु को चलने योग्य बनाने का आसान तरीका है कस्टम पुनरावृत्ति कार्यान्वयन के बजाय ES6 जनरेटर को लागू करना।

इसके विपरीत for-in, for-ofलूप प्रत्येक पुनरावृत्ति में पूरा करने के लिए एक async कार्य के लिए प्रतीक्षा कर सकता है। यह कथन प्रलेखन केawait बाद कीवर्ड का उपयोग करके प्राप्त किया जाता है ।for

for-ofलूप के बारे में एक और बढ़िया बात यह है कि इसमें यूनिकोड का समर्थन है। ES6 विनिर्देशों के अनुसार, स्ट्रिंग्स को UTF-16 एन्कोडिंग के साथ संग्रहीत किया जाता है। इसलिए, प्रत्येक चरित्र 16-bitया तो ले सकता है 32-bit। परंपरागत रूप से, स्ट्रिंग्स को यूसीएस -2 एन्कोडिंग के साथ संग्रहीत किया गया था, जिसमें उन पात्रों के लिए समर्थन होता है जिन्हें 16 bitsकेवल भीतर संग्रहीत किया जा सकता है ।

इसलिए, एक स्ट्रिंग में ब्लॉक की String.lengthसंख्या लौटाता है 16-bit। इमोजी चरित्र जैसे आधुनिक पात्रों में 32 बिट्स लगते हैं। इसलिए, यह चरित्र length2. for-inलूप की वापसी 16-bitब्लॉकों पर पुनरावृत्त करता है और गलत लौटाता है index। हालाँकि, for-ofलूप UTF-16 विशिष्टताओं के आधार पर अलग-अलग चरित्र पर निर्भर करता है।

var emoji = "😊🤣";

console.log( 'emoji.length', emoji.length );

for( var index in emoji ){ console.log( 'for-in: emoji.character', emoji[index] ); }
for( var character of emoji ){ console.log( 'for-of: emoji.character', character ); }
स्निपेट का विस्तार करें

— उदय हिरवाले
स्रोत
0

मुझे निम्नलिखित विवरण https://javascript.info/array से बहुत उपयोगी लगे:

सरणी वस्तुओं पर चक्र लगाने के सबसे पुराने तरीकों में से एक अनुक्रमित पर लूप के लिए है:

let arr = ["Apple", "Orange", "Pear"];

for (let i = 0; i < arr.length; i++) { alert( arr[i] ); } But for arrays there is another form of loop, for..of:

let fruits = ["Apple", "Orange", "Plum"];

// iterates over array elements for (let fruit of fruits) { alert( fruit ); } The for..of doesn’t give access to the number of the current element, just its value, but in most cases that’s enough. And it’s shorter.

तकनीकी रूप से, क्योंकि सरणियाँ ऑब्जेक्ट्स हैं, यह for..in का उपयोग करना भी संभव है:

let arr = ["Apple", "Orange", "Pear"];

for (let key in arr) { alert( arr[key] ); // Apple, Orange, Pear } But that’s actually a bad idea. There are potential problems with it:

लूप for..in सभी न्यूमेरिक ही नहीं, सभी प्रॉपर्टीज पर निर्भर करता है।

ब्राउज़र और अन्य वातावरणों में तथाकथित "सरणी जैसी" वस्तुएं हैं, जो सरणियों की तरह दिखती हैं। यही है, उनके पास लंबाई और अनुक्रमित गुण हैं, लेकिन उनके पास अन्य गैर-संख्यात्मक गुण और विधियां भी हो सकती हैं, जिनकी हमें आमतौर पर आवश्यकता नहीं होती है। For..in लूप हालांकि उन्हें सूचीबद्ध करेगा। इसलिए अगर हमें सरणी जैसी वस्तुओं के साथ काम करने की आवश्यकता है, तो ये "अतिरिक्त" गुण समस्या बन सकते हैं।

For..in लूप को जेनेरिक ऑब्जेक्ट्स के लिए ऑप्टिमाइज़ किया गया है, न कि एरेज़ और इस तरह 10-100 गुना धीमा। बेशक, यह अभी भी बहुत तेज है। स्पीडअप केवल अड़चनों में हो सकता है। लेकिन फिर भी हमें अंतर के बारे में पता होना चाहिए।

आम तौर पर, हमें arrays के लिए for..in का उपयोग नहीं करना चाहिए।

— अल्बर्ट लेउंग
स्रोत
0

यहाँ for...inलूप और for...ofलूप के बीच अंतर को याद रखने के लिए एक उपयोगी महामारी है ।

"इंडेक्स इन, ऑब्जेक्ट"

for...in Loop=> सरणी में सूचकांक पर पुनरावृत्त करता है ।

for...of Loop => से अधिक पुनरावृत्त वस्तुओं वस्तु ।

— bnieland
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.