के लिए .. जावास्क्रिप्ट में लूप - प्रमुख मूल्य जोड़े


414

मैं सोच रहा था कि क्या foreachजावास्क्रिप्ट में PHP लूप जैसा कुछ करने का कोई तरीका है । मैं जिस कार्यक्षमता की तलाश कर रहा हूं वह इस PHP स्निपेट की तरह है:

foreach($data as $key => $value) { }

मैं जेएस for..inलूप को देख रहा था , लेकिन ऐसा प्रतीत नहीं होता कि इसे निर्दिष्ट करने का कोई तरीका है as। अगर मैं लूप ( for(var i = 0; i < data.length; i++) के लिए एक 'सामान्य' के साथ ऐसा करता हूं, तो क्या कुंजी => मूल्य जोड़े को हथियाने का एक तरीका है?

जवाबों:


215

यदि आप मूल रूप से या बाबेल (js संकलक) के साथ ES6 का उपयोग कर सकते हैं तो आप निम्नलिखित कार्य कर सकते हैं:

const test = {a: 1, b: 2, c: 3};

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

जो इस आउटपुट को प्रिंट करेगा:

a 1
b 2
c 3

यह Object.entries()विधि किसी दिए गए ऑब्जेक्ट की अपनी असंख्य संपत्ति [key, value]जोड़े की एक सरणी देती है , उसी क्रम में जो for...inलूप द्वारा प्रदान की जाती है (अंतर यह है कि फॉर-लूप प्रोटोटाइप श्रृंखला में गुणों की गणना करता है)

आशा है ये मदद करेगा! =)


1
यह सही काम करता है, बस सोच रहा है - "वस्तु में कुंजी के लिए तुलना और फिर वस्तु द्वारा मूल्य प्राप्त करें [कुंजी]", जो बेहतर प्रदर्शन देता है?
lsheng

1
इस विशिष्ट मामले में मुझे लगता है कि यह Object.entriesकॉल के कारण धीमी है । हालांकि मैंने कोई परीक्षण नहीं चलाया।
फ्रांसेस्को केसुला

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

4
स्वीकृत उत्तर को अपडेट किया जाना चाहिए क्योंकि यह वास्तव में प्रश्न का उत्तर देता है, हालांकि यह प्रश्न के समय उपलब्ध नहीं था।
मार्क क्वालि

1
: आप इस सवाल का जांच करना चाह सकते stackoverflow.com/questions/47213651/... Object.keys (myObject) .forEach (कुंजी => {...: जो संकेत मिलता है कि इस प्रकार का एक वाक्य रचना की सिफारिश की जाएगी लगता है
Will59

519
for (var k in target){
    if (target.hasOwnProperty(k)) {
         alert("Key is " + k + ", value is " + target[k]);
    }
}

hasOwnPropertyयह जांचने के लिए उपयोग किया जाता targetहै कि क्या आपके पास वास्तव में वह संपत्ति है, बजाय इसके प्रोटोटाइप से विरासत में मिली है। थोड़ा सरल होगा:

for (var k in target){
    if (typeof target[k] !== 'function') {
         alert("Key is " + k + ", value is" + target[k]);
    }
}

यह सिर्फ जांच करता है कि kएक तरीका नहीं है (जैसे कि targetहै arrayआप तरीकों की एक बहुत कुछ मिल जाएगा सतर्क कर दिया है, जैसे indexOf, push, pop, आदि।)


87
केवल "स्वयं" गुणों पर पुनरावृति करने का दूसरा तरीका है Object.keysObject.keys(target).forEach(function (key) { target[key]; });
कट्सपॉंग

3
यदि targetउपयोग करके बनाया गया है Object.create(null), तो काम पर नहीं जाना चाहिए, कोड को बदल दिया जाना चाहिए target.hasOwnProperty(k)->Object.prototype.hasOwnProperty.call(target,k)
एज़डर

प्रश्न में दिए गए चर का उपयोग क्यों नहीं किया जाता है? यहाँ क्या है k, targetऔर property? मेरे लिए, अपरिभाषित इस क्षेत्र का गैर-जावास्क्रिप्ट: :)
गेदमिनस

2
Object.keys (लक्ष्य) .forEach ((key) => {target [key];}); कोणीय के लिए
askilondz

315

किसी ने उल्लेख नहीं किया है Object.keysइसलिए मैं इसका उल्लेख करूंगा।

Object.keys(obj).forEach(function (key) {
   // do something with obj[key]
});

3
नोट: IE8 और नीचे द्वारा समर्थित नहीं है।
एडविन स्टेलर

1
इस बिंदु पर आपको एक ES5 शिम का उपयोग करना चाहिए। यदि आप अच्छे ES6 भविष्य में उपयोग कर रहे हैं for of tc39wiki.calculist.org/es6/for-of
goatslacker

17
यह ध्यान देने योग्य है, कि "एक अपवाद को फेंकने के अलावा () लूप को रोकने या तोड़ने का कोई तरीका नहीं है"
rluks

Object.keys (obj) .forEach ((key) => {}); कोणीय के लिए
Askilondz

यह ES6 पर काम नहीं करता है या मैं इसे नहीं समझता। फेलिक्स का नीचे एक बेहतर और अधिक पठनीय उत्तर है: data.forEach (function (value, index) {कंसोल. (इंडेक्स); // 0, 1, 2 ...});
gtamborero

115

के लिए ... आपके लिए काम करेगा।

for( var key in obj ) {
  var value = obj[key];
}

आधुनिक जावास्क्रिप्ट में आप यह भी कर सकते हैं:

for ( const [key,value] of Object.entries( obj ) ) {

}

64
var obj = {...};
for (var key in obj) {
    var value = obj[key];

}

Php सिंटैक्स सिर्फ चीनी है।


यह सभी विरासत में मिली संपत्तियों पर भी लागू होगा। इससे बचने के लिए .hasOwnProperty () का उपयोग करें।
LSerni

24

मुझे लगता है कि आप जानते हैं कि iयह कुंजी है और आप इसके माध्यम से मूल्य प्राप्त कर सकते हैं data[i](और बस इसके लिए एक शॉर्टकट चाहते हैं)।

ECMAScript5 ने सरणियों के लिए forEach [MDN] पेश किया (ऐसा लगता है कि आपके पास एक सरणी है):

data.forEach(function(value, index) {

});

MDN प्रलेखन ब्राउज़र का समर्थन नहीं करता है के लिए एक शिम प्रदान करता है।

बेशक यह वस्तुओं के लिए काम नहीं करता है, लेकिन आप उनके लिए एक समान कार्य बना सकते हैं:

function forEach(object, callback) {
    for(var prop in object) {
        if(object.hasOwnProperty(prop)) {
            callback(prop, object[prop]);
        }
    }
}

चूंकि आपने प्रश्न को टैग कर दिया है , jQuery प्रदान करता है $.each [डॉक्स] जो कि सरणी और ऑब्जेक्ट संरचना दोनों पर लूप करता है ।


वह ऐरे है forEach, वस्तु नहीं forEach

2
इसलिए? स्पष्ट रूप से ओपी एक सरणी पर लूपिंग है।
फेलिक्स क्लिंग

इसके अलावा मोज़िला (फ़ायरफ़ॉक्स, स्पाइडरमैन-सी, राइनो और सी) में एक गैर-मानक एक्सटेंशन है जो for eachसिंटैक्स की अनुमति देता है। for each (let val in myObj) console.log(val);
कट्सपॉंग

2
@katspaugh: सही है, लेकिन जैसा कि यह केवल मोज़िला है, यह बहुत उपयोगी नहीं लगता है।
फेलिक्स क्लिंग

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


9
for (var key in myMap) {
    if (myMap.hasOwnProperty(key)) {
        console.log("key =" + key);
        console.log("value =" + myMap[key]);
    }
}

जावास्क्रिप्ट में, प्रत्येक ऑब्जेक्ट में अंतर्निहित कुंजी-मूल्य जोड़े का एक गुच्छा होता है जिसमें मेटा-जानकारी होती है। जब आप एक वस्तु के लिए सभी कुंजी-मूल्य जोड़े के माध्यम से लूप करते हैं तो आप उनके माध्यम से भी लूप कर रहे हैं। HasOwnProperty () का उपयोग इनको फ़िल्टर करता है।


2

ES6 Map.prototyp.forEach (कॉलबैक) प्रदान करेगा जिसका उपयोग इस तरह किया जा सकता है

myMap.forEach(function(value, key, myMap) {
                        // Do something
                    });

2
इसके लिए क्या पैरामीटर myMapहै?
फिल्प २

नक्शा कोई वस्तु नहीं है। वे पूरी तरह से अलग चीजें हैं।
दकसन

2
ForEach फ़ंक्शन में सरणी की 'कुंजी' नहीं है, लेकिन उस तत्व का सूचकांक अधिक है जिसे आप वर्तमान में पुनरावृत्त कर रहे हैं।
फ्रांसिस मैलोच

2
let test = {a: 1, b: 2, c: 3};
Object.entries(test).forEach(([key, value]) => console.log(key, value))

// a 1
// b 2
// c 3

5
आप सादे कोड को पोस्ट करने के बजाय आपके द्वारा पोस्ट किए गए कोड के साथ कुछ स्पष्टीकरण जोड़ सकते हैं जो समझ में नहीं आ सकता है।
अनाई

Object.entries मूल ऑब्जेक्ट की कुंजी / मान जोड़े के आधार पर सरणियों की एक सरणी को बाहर निकालती है [['a', 1],['b',2],['c',3]]:। forEachकुंजी / मान सरणियों से प्रत्येक deconstructs और करने के लिए दो चर सेट keyऔर value, जैसा कि आप समारोह में चाहते इस्तेमाल किया जा करने के लिए - में यहां उत्पादन console.log
मार्क स्वार्डस्ट्रॉम


1

नीचे एक उदाहरण दिया गया है जो जितना मिलता है उतना ही पास होता है।

for(var key in data){
  var value = data[key];    
  //your processing here
}

यदि आप jQuery का उपयोग कर रहे हैं तो देखें: http://api.jquery.com/jQuery.each/


1

यदि आप लोदश का उपयोग कर रहे हैं , तो आप उपयोग कर सकते हैं_.forEach

_.forEach({ 'a': 1, 'b': 2 }, function(value, key) {
  console.log(key + ": " + value);
});
// => Logs 'a: 1' then 'b: 2' (iteration order is not guaranteed).

1

पिछले कुछ वर्षों में जब से यह सवाल किया गया था, जावास्क्रिप्ट ने कुछ नई सुविधाएँ जोड़ी हैं। उनमें से एक Object.Entries विधि है।

एमडीएन से सीधे कॉपी किया गया फॉलो कोड स्निपेट है


const object1 = {
  a: 'somestring',
  b: 42
};

for (let [key, value] of Object.entries(object1)) {
  console.log(`${key}: ${value}`);
}

-2

हाँ, आपके पास जावास्क्रिप्ट में साहचर्य सरणियाँ भी हो सकती हैं:

var obj = 
{
    name:'some name',
    otherProperty:'prop value',
    date: new Date()
};
for(i in obj)
{
    var propVal = obj[i]; // i is the key, and obj[i] is the value ...
}

@PaPPRO ... जावास्क्रिप्ट में सब कुछ एक कुंजी-मूल्य जोड़ी है (इस प्रकार, एक वस्तु वास्तव में कुंजी-मूल्य जोड़े का एक साहचर्य सरणी है ...)
एलेक्स पचुरर 10

@AlexPacurar और एसोसियेटिव ऐरे में ऑर्डर है। कोई वस्तु अनियंत्रित है। thats एक बड़ा अंतर
Raynos

@ रेयान्स आप सही हो सकते हैं ... यह वास्तव में समझाने के लिए एक बड़ी मदद होगी कि कोई वस्तु कैसे अनियंत्रित है ... ऊपर दिए गए उदाहरण को देखते हुए, किसी को उम्मीद होगी कि लूप में 'i' होने के लिए [name, otherProperty,] और अंत में तारीख] ... तो किस स्थिति में किसी वस्तु के गुणों का क्रम मिश्रित होगा?
एलेक्स पचुरर

@AlexPacurar वह विशेष क्रम जिसमें वह वस्तु पर लूप करेगा विशिष्ट ब्राउज़र है। कुछ इसे वर्णानुक्रम में करते हैं, कुछ इसे परिभाषा का आदेश देते हैं, आदि
रेयनोस

3
@ रेयानोस: क्या साहचर्य सरणियों का आदेश दिया गया है? मैंने अक्सर देखा है कि इस शब्द का उपयोग आमतौर पर अधिक होता है। उदाहरण के लिए, सहयोगी सरणी विकिपीडिया लेख पर
जेरेमी बैंक्स

-8
var global = (function() {
   return this;
})();

// Pair object, similar to Python

function Pair(key, value) {
    this.key = key;
    this.value = value;

    this.toString = function() {
       return "(" + key + ", " + value + ")";
    };
}

/**
 * as function
 * @param {String} dataName A String holding the name of your pairs list.
 * @return {Array:Pair} The data list filled
 *    with all pair objects.
 */
Object.prototype.as = function(dataName) {
    var value, key, data;
    global[dataName] = data = [];

    for (key in this) {
       if (this.hasOwnProperty(key)) {
          value = this[key];

          (function() {
             var k = key,
                 v = value;

            data.push(new Pair(k, v));
          })();
       }
    }

    return data;
};

var d = {
   'one': 1,
   'two': 2
};

// Loop on your (key, list) pairs in this way
for (var i = 0, max = d.as("data").length; i < max; i += 1) {
   key = data[i].key;
   value = data[i].value;

   console.log("key: " + key + ", value: " + value);
}

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