ऑब्जेक्ट युक्त सरणी के माध्यम से लूप कैसे करें और उनके गुणों तक पहुंचें


186

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

for (var j = 0; j < myArray.length; j++){

console.log(myArray[j]);

}

कंसोल को सरणी में प्रत्येक वस्तु को लाना चाहिए, है ना? लेकिन वास्तव में यह केवल पहली वस्तु को प्रदर्शित करता है। अगर मैं कंसोल को लूप के बाहर लॉग करता हूं, तो सभी ऑब्जेक्ट दिखाई देते हैं, इसलिए वहां निश्चित रूप से अधिक है।

वैसे भी, यहाँ अगली समस्या है। मैं कैसे पहुँच सकता हूँ, उदाहरण के लिए Object1.x सरणी में, लूप का उपयोग करके?

for (var j = 0; j < myArray.length; j++){

console.log(myArray[j.x]);

}

यह "अपरिभाषित" देता है। फिर से लूप के बाहर कंसोल लॉग मुझे बताता है कि सभी वस्तुओं में "x" के लिए मान हैं। मैं इन संपत्तियों को लूप में कैसे एक्सेस करूं?

मुझे प्रत्येक संपत्ति के लिए अलग-अलग सरणियों का उपयोग करने के लिए कहीं और सिफारिश की गई थी, लेकिन मैं यह सुनिश्चित करना चाहता हूं कि मैंने इस एवेन्यू को पहले समाप्त कर दिया है।

धन्यवाद!


2
आप अपने सरणी का एक नमूना पोस्ट कर सकते हैं? पहला कोड स्निपेट सही लगता है।
सिरको

jएक संख्या है। आपने इसे अपने पाश के शीर्ष पर परिभाषित किया।

2
शायद myArrayसब के बाद वास्तव में सिर्फ एक सरणी नहीं है ??
Techfoobar

हमें अधिक जानकारी की आवश्यकता है कि myArray का निर्माण कैसे किया जाता है
bgusach

निम्नलिखित सभी उत्तरों और स्वीकृत उत्तर के साथ कोई भी नहीं बताता है कि समस्या क्यों होती है और इसे लूप के साथ कैसे हल किया जाए। #forEachकाम करता है। लेकिन सवाल लूप के बारे में था।
FreeLightman

जवाबों:


339

इसके बिल्ट-इन ऐरे फंक्शन का उपयोग करें। Array.forEach():

yourArray.forEach(function (arrayItem) {
    var x = arrayItem.prop1 + 2;
    console.log(x);
});

2
मदद करने के लिए खुश..जैवास्क्रिप्ट बहुत अच्छा बन रहा है..जबकि आगे जटिल लूप पढ़ने के लिए बहुत बेहतर और आसान है ..
डोरी ज़िडन

3
मुझे डर है कि यह forEachIE 9 में समर्थित नहीं है। मुझे दोष मत दो! मेरे नियोक्ता का उत्पाद उसको समर्थन देता है!
fatCop

1
@DoryZidon: forEach ने ब्रेक या स्टॉप का समर्थन नहीं किया
अंकुर लोरिया

2
ध्यान दें कि यह महत्वपूर्ण है कि आपके पास वास्तव में एक सरणी हो। यदि आपको yourArrayऐसा कुछ मिला है जो document.getElementsByClassNameकि HTMLCollection होगा, तो कोई सरणी नहीं। तब यह सवाल मददगार हो सकता है।
J0ANMM

नोट: forEachअवरुद्ध है और समर्थन नहीं करता है awaitfor...ofलूप करेगा।
आलू फ़ार्म

103

जावास्क्रिप्ट में कार्यात्मक प्रोग्रामिंग तरीके से एक सरणी के माध्यम से लूपिंग के कुछ मामलों का उपयोग करें :

1. बस एक सरणी के माध्यम से लूप

const myArray = [{x:100}, {x:200}, {x:300}];

myArray.forEach((element, index, array) => {
    console.log(element.x); // 100, 200, 300
    console.log(index); // 0, 1, 2
    console.log(array); // same myArray object 3 times
});

नोट: Array.prototyp.forEach () कड़ाई से बोलने का एक कार्यात्मक तरीका नहीं है, क्योंकि इनपुट पैरामीटर के रूप में इसे लेने वाले फ़ंक्शन को मान वापस करने के लिए नहीं माना जाता है, जिसे इस प्रकार शुद्ध फ़ंक्शन के रूप में नहीं माना जा सकता है।

2. जांचें कि क्या सरणी में कोई भी तत्व एक परीक्षा पास करता है

const people = [
    {name: 'John', age: 23}, 
    {name: 'Andrew', age: 3}, 
    {name: 'Peter', age: 8}, 
    {name: 'Hanna', age: 14}, 
    {name: 'Adam', age: 37}];

const anyAdult = people.some(person => person.age >= 18);
console.log(anyAdult); // true

3. एक नई सरणी में बदलना

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray= myArray.map(element => element.x);
console.log(newArray); // [100, 200, 300]

नोट: मानचित्र () विधि कॉलिंग एरे में प्रत्येक तत्व पर दिए गए फ़ंक्शन को कॉल करने के परिणामों के साथ एक नया सरणी बनाता है।

4. एक विशेष संपत्ति को जोड़ो, और इसकी औसत गणना करें

const myArray = [{x:100}, {x:200}, {x:300}];

const sum = myArray.map(element => element.x).reduce((a, b) => a + b, 0);
console.log(sum); // 600 = 0 + 100 + 200 + 300

const average = sum / myArray.length;
console.log(average); // 200

5. मूल के आधार पर एक नया सरणी बनाएं लेकिन इसे संशोधित किए बिना

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray= myArray.map(element => {
    return {
        ...element,
        x: element.x * 2
    };
});

console.log(myArray); // [100, 200, 300]
console.log(newArray); // [200, 400, 600]

6. प्रत्येक श्रेणी की संख्या गिनें

const people = [
    {name: 'John', group: 'A'}, 
    {name: 'Andrew', group: 'C'}, 
    {name: 'Peter', group: 'A'}, 
    {name: 'James', group: 'B'}, 
    {name: 'Hanna', group: 'A'}, 
    {name: 'Adam', group: 'B'}];

const groupInfo = people.reduce((groups, person) => {
    const {A = 0, B = 0, C = 0} = groups;
    if (person.group === 'A') {
        return {...groups, A: A + 1};
    } else if (person.group === 'B') {
        return {...groups, B: B + 1};
    } else {
        return {...groups, C: C + 1};
    }
}, {});

console.log(groupInfo); // {A: 3, C: 1, B: 2}

7. विशेष मापदंड के आधार पर एक सरणी के सबसेट को पुनः प्राप्त करें

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray = myArray.filter(element => element.x > 250);
console.log(newArray); // [{x:300}] 

नोट: फ़िल्टर () विधि सभी तत्वों के साथ एक नया सरणी बनाता है जो प्रदान किए गए फ़ंक्शन द्वारा कार्यान्वित परीक्षण को पास करता है।

8. एक क्रमबद्ध करें

const people = [
  { name: "John", age: 21 },
  { name: "Peter", age: 31 },
  { name: "Andrew", age: 29 },
  { name: "Thomas", age: 25 }
];

let sortByAge = people.sort(function (p1, p2) {
  return p1.age - p2.age;
});

console.log(sortByAge);

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

9. एक सरणी में एक तत्व का पता लगाएं

const people = [ {name: "john", age:23},
                {name: "john", age:43},
                {name: "jim", age:101},
                {name: "bob", age:67} ];

const john = people.find(person => person.name === 'john');
console.log(john);

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

Array.prototyp.find () विधि सरणी में पहले तत्व का मान लौटाता है जो प्रदान किए गए परीक्षण फ़ंक्शन को संतुष्ट करता है।

संदर्भ


1
यह एक शानदार संदर्भ है - क्या यह इस सवाल का मूल है या क्या आपके पास इस तरह की मेजबानी कहीं और है?
साल्वर्टो

बहुत अच्छी तरह से समझाया और पूरी तरह से जवाब, योगदान देने के लिए धन्यवाद।
एरिका समर्स

नमस्ते, अगर मैं सभी नाम दिखाना चाहता हूं और फिर तुलना करना चाहता हूं, तो क्या आप जानते हैं कि यह कैसे करना है?
डिपलगर्ल

@ दीपगर्ल, क्या यह नीचे की तरह कुछ है? const people = [ {name: "john", age:23}, {name: "john", age:43}, {name: "jim", age:101}, {name: "bob", age:67} ]; const sortByAge = people.map(p => { console.log(p.name) return p }).sort(function (p1, p2) { return p1.age - p2.age; }); console.log(sortByAge);
यूसी

1
100 वें वोट के लिए बधाई :)
सैयद

44

आप ऑब्जेक्ट के एक सरणी पर लूप के लिए for..of लूप का उपयोग कर सकते हैं ।

for (let item of items) {
    console.log(item); // Will display contents of the object inside the array
}

सबसे अच्छी चीजों में से एक for..ofछोरों के एक यह है कि वे केवल सरणियों से अधिक पुनरावृति कर सकते हैं। आप नक्शे और वस्तुओं सहित किसी भी प्रकार के चलने योग्य पर पुनरावृति कर सकते हैं। यदि आपको पुराने ब्राउज़रों का समर्थन करने की आवश्यकता है, तो सुनिश्चित करें कि आप ट्रांसपिलर या टाइपस्क्रिप्ट जैसी किसी चीज़ का उपयोग करते हैं।

यदि आप एक नक्शे पर पुनरावृति करना चाहते हैं, तो सिंटैक्स मोटे तौर पर ऊपर के समान है, सिवाय इसके कि यह कुंजी और मूल्य दोनों को संभालता है।

for (const [key, value] of items) {
  console.log(value);
}

मैं for..ofजावास्क्रिप्ट में हर तरह के पुनरावृत्ति के लिए लूप्स का उपयोग करता हूं। इसके अलावा, सबसे अच्छी चीजों में से एक यह भी है कि वे एसिंक्स के साथ भी काम करते हैं।


29
for (var j = 0; j < myArray.length; j++){
  console.log(myArray[j].x);
}

यह सिर्फ दूसरे प्रश्न के लिए समाधान है, हालांकि।
सिरको

18

यहाँ एक उदाहरण है कि आप इसे कैसे कर सकते हैं :)

var students = [{
    name: "Mike",
    track: "track-a",
    achievements: 23,
    points: 400,
  },
  {
    name: "james",
    track: "track-a",
    achievements: 2,
    points: 21,
  },
]

students.forEach(myFunction);

function myFunction(item, index) {
  for (var key in item) {
    console.log(item[key])
  }
}


आप trackप्रत्येक तत्व के लिए संपत्ति का मूल्य कैसे प्राप्त करेंगे और इसे कोड के किसी अन्य भाग में उपयोग या प्रक्षेपित करने के लिए एक चर को निर्दिष्ट करेंगे?
क्रिस 22

7

वस्तुओं की एक सरणी के माध्यम से लूपिंग एक बहुत मौलिक कार्यक्षमता है। मेरे लिए यही काम करता है।

var person = [];
person[0] = {
  firstName: "John",
  lastName: "Doe",
  age: 60
};

var i, item;

for (i = 0; i < person.length; i++) {
  for (item in person[i]) {
    document.write(item + ": " + person[i][item] + "<br>");
  }
}


6

myArray[j.x] तार्किक रूप से गलत है।

(myArray[j].x);इसके बजाय उपयोग करें

for (var j = 0; j < myArray.length; j++){
  console.log(myArray[j].x);
}

@ Cyborgx37 ओह .. मेरा मतलब है कि jx को एक चर नाम के रूप में माना जाता है जो गलत है।
विवेक साधु १13'१३ को १h:०३

5

ES5 + के बाद से forEach पद्धति का उपयोग करना वास्तव में सरल है। आप अपने सरणी में प्रत्येक ऑब्जेक्ट की प्रत्येक संपत्ति को सीधे बदल सकते हैं।

myArray.forEach(function (arrayElem){ 
  arrayElem = newPropertyValue;
});

यदि आप प्रत्येक वस्तु पर एक विशिष्ट संपत्ति का उपयोग करना चाहते हैं:

myArray.forEach(function (arrayElem){ 
      arrayElem.nameOfYourProperty = newPropertyValue;
    });

4

यहाँ वस्तुओं की एक सरणी के माध्यम से पुनरावृत्ति करने का एक और तरीका है (आपको इन के लिए अपने दस्तावेज़ में jQuery लाइब्रेरी शामिल करने की आवश्यकता है)।

$.each(array, function(element) {
  // do some operations with each element... 
});

1
आपका उत्तर $.eachविधि का उपयोग करने के लिए jQuery लाइब्रेरी को लोड करने की आवश्यकता के बारे में महत्वपूर्ण जानकारी गायब है ।
मैथ्यू मोरक

4

यह काम करेगा। लूपिंग पूरी तरह से सरणी (आपका सरणी)। फिर प्रत्येक वस्तु के प्रत्यक्ष गुणों (प्रत्येक ओओबीजे) के माध्यम से लूप।

yourArray.forEach( function (eachObj){
    for (var key in eachObj) {
        if (eachObj.hasOwnProperty(key)){
           console.log(key,eachObj[key]);
        }
    }
});

2

JQuery का उपयोग करके ऑब्जेक्ट पुनरावृत्ति को व्यवस्थित करें, (स्ट्रिंग को प्रिंट करने के लिए दूसरे पैरामीटर का उपयोग करें)।

$.each(array, function(index, item) {
       console.log(index, item);
});

2

var c = {
    myProperty: [
        { name: 'this' },
        { name: 'can' },
        { name: 'get' },
        { name: 'crazy' }
    ]
};

c.myProperty.forEach(function(myProperty_element) {
    var x = myProperty_element.name;
    console.log('the name of the member is : ' + x);
})

यह उन तरीकों में से एक है कि मैं इसे कैसे प्राप्त करने में सक्षम था।


1

स्वीकृत उत्तर सामान्य फ़ंक्शन का उपयोग करता है। इसलिए forEach पर एरो फंक्शन का उपयोग करके मामूली संशोधन के साथ एक ही कोड पोस्ट करना

  yourArray.forEach(arrayItem => {
      var x = arrayItem.prop1 + 2;
      console.log(x);
  });

इसके अलावा $ .each में आप नीचे की तरह एरो फंक्शन का उपयोग कर सकते हैं

 $.each(array, (item, index) => {
       console.log(index, item);
 });

1

const jobs = [
    {
        name: "sipher",
        family: "sipherplus",
        job: "Devops"
    },
    {
        name: "john",
        family: "Doe",
        job: "Devops"
    },
    {
        name: "jim",
        family: "smith",
        job: "Devops"
    }
];

const txt = 
   ` <ul>
        ${jobs.map(job => `<li>${job.name} ${job.family} -> ${job.job}</li>`).join('')}
    </ul>`
;

document.body.innerHTML = txt;

वापस टिक्स के बारे में सावधान रहें (`)


0

यह किसी की मदद कर सकता है। शायद यह नोड में एक बग है।

var arr = [ { name: 'a' }, { name: 'b' }, { name: 'c' } ];
var c = 0;

यह काम नहीं करता है:

while (arr[c].name) { c++; } // TypeError: Cannot read property 'name' of undefined

लेकिन यह काम करता है ...

while (arr[c]) { c++; } // Inside the loop arr[c].name works as expected.

यह भी काम करता है ...

while ((arr[c]) && (arr[c].name)) { c++; }

लेकिन बस आदेश उलट काम नहीं करता है। मैं अनुमान लगा रहा हूं कि यहां कुछ प्रकार का आंतरिक अनुकूलन है जो नोड को तोड़ता है।

while ((arr[c].name) && (arr[c])) { c++; }

त्रुटि कहती है कि सरणी अपरिभाषित है, लेकिन यह नहीं है: - / Node v11.15.0

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