ජාවාස්ක්‍රිප්ට් වස්තුවක ඇති සියලුම සාමාජිකයින් හරහා වස්තූන් වන අගයන් ඇතුළුව මම ලූප කරන්නේ කෙසේද?

උදාහරණයක් ලෙස, මම මෙය හරහා ලූප කරන්නේ කෙසේද (එක් එක් සඳහා "your_name" සහ "your_message" වෙත පිවිසීම)?

var validation_messages = {
    "key_1": {
        "your_name": "jimmy",
        "your_msg": "hello world"
    },
    "key_2": {
        "your_name": "billy",
        "your_msg": "foo equals bar"
    }
}

for (var key in validation_messages) {
    // skip loop if the property is from prototype
    if (!validation_messages.hasOwnProperty(key)) continue;

    var obj = validation_messages[key];
    for (var prop in obj) {
        // skip loop if the property is from prototype
        if (!obj.hasOwnProperty(prop)) continue;

        // your code
        alert(prop + " = " + obj[prop]);
    }
}

සම්මතයන් 5 යටතේ, ඔබ ඒකාබද්ධ කළ හැකි Object.keys()හා Array.prototype.forEach():

var obj = {
  first: "John",
  last: "Doe"
};

//
//	Visit non-inherited enumerable keys
//
Object.keys(obj).forEach(function(key) {

  console.log(key, obj[key]);

});

මේ සමඟ ඇති ගැටළුව

for (var key in validation_messages) {
   var obj = validation_messages[key];
   for (var prop in obj) {
      alert(prop + " = " + obj[prop]);
   }
}

එනම් ඔබ ප්‍රාථමික වස්තුවේ මූලාකෘතිය හරහා ද ලූප වීමයි.

මෙය සමඟ ඔබ එය වළක්වනු ඇත:

for (var key in validation_messages) {
   if (validation_messages.hasOwnProperty(key)) {
      var obj = validation_messages[key];
      for (var prop in obj) {
         if (obj.hasOwnProperty(prop)) {
            alert(prop + " = " + obj[prop]);
         }
      }
   }
}

දී ES6 / 2015 (භාවිතා: ඔබ මේ වගේ වස්තුව මගින් පුඩුවක් හැකි ඊතලය කාර්යය )

Object.keys(myObj).forEach(key => {
  console.log(key);        // the name of the current key.
  console.log(myObj[key]); // the value of the current key.
});

jsbin

දී ES7 / 2016 ඔබට භාවිතා කළ හැකි Object.entriesවෙනුවට Object.keysමේ වගේ වස්තුව මගින් හා ලූප:

Object.entries(myObj).forEach(([key, val]) => {
  console.log(key); // the name of the current key.
  console.log(val); // the value of the current key.
});

ඉහත දැක්වෙන්නේ එක් ලයිනර් එකක් ලෙස ය :

Object.entries(myObj).forEach(([key, val]) => console.log(key, val));

jsbin

ඔබට කැදැලි වස්තූන් හරහා ලූපයක් ලබා ගැනීමට අවශ්‍ය නම්, ඔබට පුනරාවර්තන ශ්‍රිතයක් (ES6) භාවිතා කළ හැකිය :

const loopNestedObj = obj => {
  Object.keys(obj).forEach(key => {
    if (obj[key] && typeof obj[key] === "object") loopNestedObj(obj[key]); // recurse.
    else console.log(key, obj[key]); // or do something with key and val.
  });
};

jsbin

ඉහත ක්‍රියාකාරීත්වයට සමාන නමුත් ඒ වෙනුවට ES7 සමඟ :Object.entries()Object.keys()

const loopNestedObj = obj => {
  Object.entries(obj).forEach(([key, val]) => {
    if (val && typeof val === "object") loopNestedObj(val); // recurse.
    else console.log(key, val); // or do something with key and val.
  });
};

මෙන්න අපි කැදැලි වස්තූන් හරහා අගයන් වෙනස් Object.entries()කර Object.fromEntries()( ES10 / 2019 ) සමඟ ඒකාබද්ධව නව වස්තුවක් නැවත ලබා දෙන්නෙමු :

const loopNestedObj = obj =>
  Object.fromEntries(
    Object.entries(obj).map(([key, val]) => {
      if (val && typeof val === "object") [key, loopNestedObj(val)]; // recurse
      else [key, updateMyVal(val)]; // or do something with key and val.
    })
  );

Underscore.js_.each භාවිතා කිරීම :

_.each(validation_messages, function(value, key){
    _.each(value, function(value, key){
        console.log(value);
    });
});

ඔබ පුනරාවර්තනය භාවිතා කරන්නේ නම් ඔබට ඕනෑම ගැඹුරක වස්තු ගුණාංග ආපසු ලබා දිය හැකිය-

function lookdeep(object){
    var collection= [], index= 0, next, item;
    for(item in object){
        if(object.hasOwnProperty(item)){
            next= object[item];
            if(typeof next== 'object' && next!= null){
                collection[index++]= item +
                ':{ '+ lookdeep(next).join(', ')+'}';
            }
            else collection[index++]= [item+':'+String(next)];
        }
    }
    return collection;
}

//example

var O={
    a:1, b:2, c:{
        c1:3, c2:4, c3:{
            t:true, f:false
        }
    },
    d:11
};
var lookdeepSample= 'O={'+ lookdeep(O).join(',\n')+'}';


/*  returned value: (String)
O={
    a:1, 
    b:2, 
    c:{
        c1:3, c2:4, c3:{
            t:true, f:false
        }
    },
    d:11
}

*/

මෙම පිළිතුර සමහර කාර්ය සාධන ප්‍රතිපෝෂණ සමඟ මෙම ලිපියේ ලබා දී ඇති විසඳුම්වල එකතුවකි . මම හිතන්නේ භාවිත අවස්ථා 2 ක් ඇති අතර ලූප් ක්‍රියාවලියේදී යතුරු භාවිතා කිරීම සඳහා යතුරු වෙත ප්‍රවේශ වීමට අවශ්‍ය දැයි OP සඳහන් කර නැත.

I. යතුරු වෙත ප්‍රවේශ විය යුතුය,

And ofසහ Object.keysප්රවේශය

let k;
for (k of Object.keys(obj)) {

    /*        k : key
     *   obj[k] : value
     */
}

✔ මේ inප්රවේශය

let k;
for (k in obj) {

    /*        k : key
     *   obj[k] : value
     */
}

මූලාකෘති ගුණාංග මුද්‍රණය කළ හැකි බැවින් මෙය ප්‍රවේශමෙන් භාවිතා කරන්න obj

7 ES7 ප්රවේශය

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

}

කෙසේ වෙතත්, සංස්කරණය කරන අවස්ථාවේ දී මම ES7 ක්‍රමය නිර්දේශ නොකරමි, මන්ද මෙම ක්‍රියා පටිපාටිය ගොඩනැගීම සඳහා ජාවාස්ක්‍රිප්ට් අභ්‍යන්තරව විචල්‍යයන් රාශියක් ආරම්භ කරයි (සාක්ෂි සඳහා ප්‍රතිපෝෂණ බලන්න). ඔබ ප්‍රශස්තිකරණයට සුදුසු විශාල යෙදුමක් සංවර්ධනය නොකරන්නේ නම් එය කමක් නැත, නමුත් ප්‍රශස්තිකරණය ඔබේ ප්‍රමුඛතාවය නම් ඔබ ඒ ගැන සිතා බැලිය යුතුය.

II. අපට අවශ්‍ය වන්නේ එක් එක් අගයන්ට ප්‍රවේශ වීමයි,

And ofසහ Object.valuesප්රවේශය

let v;
for (v of Object.values(obj)) {

}

පරීක්ෂණ පිළිබඳ තවත් ප්‍රතිපෝෂණ:

• හැඹිලි Object.keysහෝ Object.valuesකාර්ය සාධනය නොසැලකිය

උදාහරණයක් වශයෙන්,

const keys = Object.keys(obj);
let i;
for (i of keys) {
  //
}
// same as
for (i of Object.keys(obj)) {
  //
}

• උදාහරණයක් ලෙස Object.values, forෆයර්ෆොක්ස් හි හැඹිලි විචල්යයන් සහිත ස්වදේශීය ලූපයක් භාවිතා කිරීම for...ofලූපයක් භාවිතා කිරීමට වඩා ටිකක් වේගවත් බව පෙනේ . කෙසේ වෙතත් වෙනස එතරම් වැදගත් නොවන අතර for...ofස්වදේශීය forලූපයට වඩා ක්‍රෝම් වේගයෙන් ක්‍රියාත්මක වේ , එබැවින් ඕනෑම අවස්ථාවක (4 වන සහ 6 වන පරීක්ෂණ) for...ofසමඟ කටයුතු කිරීමේදී භාවිතා කිරීමට මම නිර්දේශ කරමි Object.values.

• ෆයර්ෆොක්ස් හි, for...inලූපය සැබවින්ම මන්දගාමී වේ, එබැවින් අපට නැවත කියවීමේදී යතුර හැඹිලි කිරීමට අවශ්‍ය වූ විට එය භාවිතා කිරීම වඩා හොඳය Object.keys. ප්ලස් ක්‍රෝම් දෙකම ව්‍යුහය සමාන වේගයකින් ධාවනය කරයි (1 වන සහ අවසාන පරීක්ෂණ).

ඔබට මෙහි පරීක්ෂණ පරීක්ෂා කළ හැකිය: https://jsperf.com/es7-and-misc-loops

එය ප්‍රමාද වී ඇති බව මම දනිමි, නමුත් AgileJon ගේ පිළිතුරේ මෙම ප්‍රශස්ත හා වැඩිදියුණු කළ අනුවාදය ලිවීමට මට මිනිත්තු 2 ක් ගතවිය:

var key, obj, prop, owns = Object.prototype.hasOwnProperty;

for (key in validation_messages ) {

    if (owns.call(validation_messages, key)) {

        obj = validation_messages[key];

        for (prop in obj ) {

            // using obj.hasOwnProperty might cause you headache if there is
            // obj.hasOwnProperty = function(){return false;}
            // but owns will always work 
            if (owns.call(obj, prop)) {
                console.log(prop, "=", obj[prop]);
            }

        }

    }

}

for(var k in validation_messages) {
    var o = validation_messages[k];
    do_something_with(o.your_name);
    do_something_else_with(o.your_msg);
}

p යනු අගයයි

for (var key in p) {
  alert(key + ' => ' + p[key]);
}

හෝ

Object.keys(p).forEach(key => { console.log(key, p[key]) })

ES7 හි ඔබට කළ හැක්කේ:

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

for(var key in validation_messages){
    for(var subkey in validation_messages[key]){
        //code here
        //subkey being value, key being 'yourname' / 'yourmsg'
    }
}

ඒ සඳහා ක්‍රම කිහිපයක් ...

1) සඳහා ස්ථර 2 ක් ...

for (let key in validation_messages) {
   const vmKeys = validation_messages[key];
   for (let vmKey in vmKeys) {
      console.log(vmKey + vmKeys[vmKey]);
   }
}

2) භාවිතා කිරීමObject.key

Object.keys(validation_messages).forEach(key => {
   const vmKeys = validation_messages[key];
   Object.keys(vmKeys).forEach(key => {
    console.log(vmKeys + vmKeys[key]);
   });
});

3) පුනරාවර්තන ශ්‍රිතය

const recursiveObj = obj => {
  for(let key in obj){
    if(!obj.hasOwnProperty(key)) continue;

    if(typeof obj[key] !== 'object'){
      console.log(key + obj[key]);
    } else {
      recursiveObj(obj[key]);
    }
  }
}

එය මෙසේ අමතන්න:

recursiveObj(validation_messages);

AgileJon හි විසඳුමේ ( ආදර්ශනය ) වැඩිදියුණු කළ හා පුනරාවර්තන අනුවාදය මෙන්න :

function loopThrough(obj){
  for(var key in obj){
    // skip loop if the property is from prototype
    if(!obj.hasOwnProperty(key)) continue;

    if(typeof obj[key] !== 'object'){
      //your code
      console.log(key+" = "+obj[key]);
    } else {
      loopThrough(obj[key]);
    }
  }
}
loopThrough(validation_messages);

මෙම විසඳුම සියලු වර්ගවල විවිධ ගැඹුර සඳහා ක්රියා කරයි.

තවත් විකල්පයක්:

var testObj = {test: true, test1: false};
for(let x of Object.keys(testObj)){
    console.log(x);
}

මාසයකට පෙර අවසන් කරන ලද ECMAScript-2017, Object.values ​​() හඳුන්වා දෙයි. දැන් ඔබට මෙය කළ හැකිය:

let v;
for (v of Object.values(validation_messages))
   console.log(v.your_name);   // jimmy billy

මම හිතන්නේ jQuery විසින් මෙය මනාව නිරවුල් කරන බව පෙන්වා දීම වටී $.each().

බලන්න: https://api.jquery.com/each/

උදාහරණයක් වශයෙන්:

$('.foo').each(function() {
    console.log($(this));
});

$(this)වස්තුව තුළ ඇති තනි අයිතමය වීම. $('.foo')ඔබට jQuery හි තේරීම් එන්ජිම භාවිතා කිරීමට අවශ්‍ය නැතිනම් විචල්‍යයකට මාරු වන්න .

var obj={
name:"SanD",
age:"27"
}
Object.keys(obj).forEach((key)=>console.log(key,obj[key]));

ජාවාස්ක්‍රිප්ට් වස්තුව හරහා ලූප් කිරීම සඳහා අපට සෑම එකක් සඳහාම භාවිතා කළ හැකි අතර කේතය ප්‍රශස්ත කිරීම සඳහා අපට ඊතල ශ්‍රිතය භාවිතා කළ හැකිය

මට පසුව කළ දේ කිරීමට මට ඉහත තනතුරු ලබා ගැනීමට නොහැකි විය.

මෙහි ඇති අනෙක් පිළිතුරු සමඟ සෙල්ලම් කිරීමෙන් පසුව, මම මෙය සිදු කළෙමි. එය හැක්, නමුත් එය ක්රියා කරයි!

මෙම වස්තුව සඳහා:

var myObj = {
    pageURL    : "BLAH",
    emailBox   : {model:"emailAddress", selector:"#emailAddress"},
    passwordBox: {model:"password"    , selector:"#password"}
};

... මෙම කේතය:

// Get every value in the object into a separate array item ...
function buildArray(p_MainObj, p_Name) {
    var variableList = [];
    var thisVar = "";
    var thisYes = false;
    for (var key in p_MainObj) {
       thisVar = p_Name + "." + key;
       thisYes = false;
       if (p_MainObj.hasOwnProperty(key)) {
          var obj = p_MainObj[key];
          for (var prop in obj) {
            var myregex = /^[0-9]*$/;
            if (myregex.exec(prop) != prop) {
                thisYes = true;
                variableList.push({item:thisVar + "." + prop,value:obj[prop]});
            }
          }
          if ( ! thisYes )
            variableList.push({item:thisVar,value:obj});
       }
    }
    return variableList;
}

// Get the object items into a simple array ...
var objectItems = buildArray(myObj, "myObj");

// Now use them / test them etc... as you need to!
for (var x=0; x < objectItems.length; ++x) {
    console.log(objectItems[x].item + " = " + objectItems[x].value);
}

... මෙය කොන්සෝලය තුළ නිෂ්පාදනය කරයි:

myObj.pageURL = BLAH
myObj.emailBox.model = emailAddress
myObj.emailBox.selector = #emailAddress
myObj.passwordBox.model = password
myObj.passwordBox.selector = #password

මට වැඩ කරන විසඳුම පහත දැක්වේ

_private.convertParams=function(params){
    var params= [];
    Object.keys(values).forEach(function(key) {
        params.push({"id":key,"option":"Igual","value":params[key].id})
    });
    return params;
}

විදේශීය එකක් - ගැඹුරු ගමන්

JSON.stringify(validation_messages,(field,value)=>{
  if(!field) return value;
  
  // ... your code
  
  return value;
})

මෙම විසඳුමේදී අපි ප්‍රතිස්ථාපකය භාවිතා කරන අතර එමඟින් සම්පූර්ණ වස්තුව හා කැදැලි වස්තූන් ගැඹුරින් ගමන් කිරීමට ඉඩ සලසයි - සෑම මට්ටමකින්ම ඔබට සියලු ක්ෂේත්‍ර සහ අගයන් ලැබෙනු ඇත. ඔබට සෑම ක්ෂේත්‍රයක් සඳහාම සම්පූර්ණ මාවතක් ලබා ගැනීමට අවශ්‍ය නම් මෙහි බලන්න

var validation_messages = {
    "key_1": {
        "your_name": "jimmy",
        "your_msg": "hello world"
    },
    "key_2": {
        "your_name": "billy",
        "your_msg": "foo equals bar",
        "deep": {
          "color": "red",
          "size": "10px"
        }
    }
}

JSON.stringify(validation_messages,(field,value)=>{
  if(!field) return value;
  
  console.log(`key: ${field.padEnd(11)} - value: ${value}`);
  
  return value;
})

එම වස්තුව හරහා ලූප් කිරීමට ඔබට පුඩුවක් භාවිතා කළ හැකිය.

2020 දී ඔබට වෙනස් කළ නොහැකි හා විශ්වීය කාර්යයන් අවශ්‍ය වේ

මෙය උප වස්තු, අරා සහ නූල් වලින් සමන්විත ඔබේ බහුමාන වස්තුව හරහා ගමන් කර අභිරුචි ශ්‍රිතයක් යොදන්න

export const iterate = (object, func) => {
  const entries = Object.entries(object).map(([key, value]) =>
    Array.isArray(value)
      ? [key, value.map(e => iterate(e, func))]
      : typeof value === 'object'
      ? [key, iterate(value, func)]
      : [key, func(value)]
  );
  return Object.fromEntries(entries);
};

භාවිතය:

const r = iterate(data, e=>'converted_'+e);
console.log(r);

ES8 Object.entries () භාවිතා කිරීම මෙය සාක්ෂාත් කර ගැනීම සඳහා වඩාත් සංයුක්ත ක්‍රමයක් විය යුතුය.

Object.entries(validation_messages).map(([key,object]) => {

    alert(`Looping through key : ${key}`);

    Object.entries(object).map(([token, value]) => {
        alert(`${token} : ${value}`);
    });
});

මගේ නඩුවේ (පූර්ව පදනම මත) ඕනෑම මට්ටම් ගණනක් කළ හැකිය.

var myObj = {
    rrr: undefined,
    pageURL    : "BLAH",
    emailBox   : {model:"emailAddress", selector:"#emailAddress"},
    passwordBox: {model:"password"    , selector:"#password"},
    proba: {odin:{dva:"rr",trr:"tyuuu"}, od:{ff:5,ppa:{ooo:{lll:'lll'}},tyt:'12345'}}
};


function lookdeep(obj,p_Name,gg){
    var A=[], tem, wrem=[], dd=gg?wrem:A;
    for(var p in obj){
        var y1=gg?'':p_Name, y1=y1 + '.' + p;
        if(obj.hasOwnProperty(p)){
           var tem=obj[p];
           if(tem && typeof tem=='object'){
               a1=arguments.callee(tem,p_Name,true);
               if(a1 && typeof a1=='object'){for(i in a1){dd.push(y1 + a1[i])};}
            }
            else{
               dd.push(y1 + ':' + String(tem));
            }
        }
    };
    return dd
};


var s=lookdeep(myObj,'myObj',false);
for (var x=0; x < s.length; ++x) {
console.log(s[x]+'\n');}

ප්‍රති result ලය:

["myObj.rrr:undefined",
"myObj.pageURL:BLAH",
"myObj.emailBox.model:emailAddress",
"myObj.emailBox.selector:#emailAddress",
"myObj.passwordBox.model:password",
"myObj.passwordBox.selector:#password",
"myObj.proba.odin.dva:rr",
"myObj.proba.odin.trr:tyuuu",
"myObj.proba.od.ff:5",
"myObj.proba.od.ppa.ooo.lll:lll",
"myObj.proba.od.tyt:12345"]