javascript استنتاج حاجات - يتكرر من خلال خصائص الكائن





12 Answers

اعتبارًا من JavaScript 1.8.5 يمكنك استخدام Object.keys(obj) للحصول على صفيف من الخصائص المحددة على الكائن نفسه (تلك التي ترجع true إلى obj.hasOwnProperty(key) ).

Object.keys(obj).forEach(function(key,index) {
    // key: the name of the object key
    // index: the ordinal position of the key within the object 
});

هذا أفضل (وأكثر قابلية للقراءة) من استخدام حلقة for-in.

دعمه على هذه المتصفحات:

  • فايرفوكس (جيكو): 4 (2.0)
  • Chrome: 5
  • Internet Explorer: 9

راجع developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… للحصول على مزيد من المعلومات.

المخلوقات الحيه الحياة
var obj = {
    name: "Simon",
    age: "20",
    clothing: {
        style: "simple",
        hipster: false
    }
}

for(var propt in obj){
    alert(propt + ': ' + obj[propt]);
}

كيف تمثل propt المتغير خصائص الكائن؟ انها ليست طريقة مدمجة ، أو خاصية. ثم لماذا يأتي مع كل خاصية في الكائن؟




فتيات وشباب نحن في 2017 ونحن لا نملك الكثير من الوقت للكتابة ... لذا لنفعل هذا الأمر الرائع الجديد ECMAScript 2016:

Object.keys(obj).map(e => console.log(`key=${e}  value=${obj[e]}`));






يمكنك استخدام Lodash. وثائق

var obj = {a: 1, b: 2, c: 3};
_.keys(obj).forEach(function (key) {
    ...
});



الإجابات المذكورة أعلاه مزعجة بعض الشيء لأنها لا تفسر ما تفعله داخل الحلقة for بعد التأكد من أنه كائن: لا يمكنك الوصول إليه مباشرة! في الواقع يتم تسليم مفتاح KEY الذي تحتاج إلى تقديمه إلى OBJ:

var obj = {
  a: "foo",
  b: "bar",
  c: "foobar"
};

// We need to iterate the string keys (not the objects)
for(var someKey in obj)
{
  // We check if this key exists in the obj
  if (obj.hasOwnProperty(someKey))
  {
    // someKey is only the KEY (string)! Use it to get the obj:
    var myActualPropFromObj = obj[someKey]; // Since dynamic, use [] since the key isn't literally named "someKey"

    // NOW you can treat it like an obj
    var shouldBeBar = myActualPropFromObj.b;
  }
}

هذا هو كل ECMA5 آمنة. حتى يعمل في إصدارات JS عرجاء مثل Rhino؛)




إذا كانت البيئة الخاصة بك تدعم ES2017 ثم أوصي Object.entries :

Object.entries(obj).forEach(([key, value]) => {
  console.log(`${key} ${value}`);
});

كما هو موضح في وثائق Mozilla Object.entries () :

إرجاع الأسلوب Object.entries () صفيف من الخاصية الخاصة enumerable الخاصية [المفتاح ، القيمة] ، بنفس الترتيب كتلك التي تم توفيرها من قبل لـ ... في حلقة (الفرق هو أن حلقة for-in تعداد خصائص في سلسلة النموذج الأولي كذلك.

بشكل أساسي مع Object.entries يمكننا التخلي عن الخطوة الإضافية التالية المطلوبة مع الأقدم لـ ... في حلقة:

// This step is not necessary with Object.entries
if (object.hasOwnProperty(property)) {
  // do stuff
}



في الوقت الحالي ، يمكنك تحويل كائن JS قياسي إلى كائن قابل للتكرار فقط عن طريق إضافة طريقة Symbol.iterator. يمكنك بعد ذلك استخدام حلقة for و empceess قيمها مباشرة أو حتى يمكن استخدام عامل توزيع على الكائن أيضًا. رائع. دعونا نرى كيف يمكننا أن نجعلها:

var o = {a:1,b:2,c:3},
    a = [];
o[Symbol.iterator] = function*(){
                       var ok = Object.keys(this);
                            i = 0;
                       while (i < ok.length) yield this[ok[i++]];
                     };
for (var value of o) console.log(value);
// or you can even do like
a = [...o];
console.log(a);




مضيفا أيضا بطريقة متكررة:

function iterate(obj) {
    // watch for objects we've already iterated so we won't end in endless cycle
    // for cases like var foo = {}; foo.bar = foo; iterate(foo);
    var walked = [];
    var stack = [{obj: obj, stack: ''}];
    while(stack.length > 0)
    {
        var item = stack.pop();
        var obj = item.obj;
        for (var property in obj) {
            if (obj.hasOwnProperty(property)) {
                if (typeof obj[property] == "object") {
                  // check if we haven't iterated through the reference yet
                  var alreadyFound = false;
                  for(var i = 0; i < walked.length; i++)
                  {
                    if (walked[i] === obj[property])
                    {
                      alreadyFound = true;
                      break;
                    }
                  }
                  // new object reference
                  if (!alreadyFound)
                  {
                    walked.push(obj[property]);
                    stack.push({obj: obj[property], stack: item.stack + '.' + property});
                  }
                }
                else
                {
                    console.log(item.stack + '.' + property + "=" + obj[property]);
                }
            }
        }
    }
}

الاستعمال:

iterate({ foo: "foo", bar: { foo: "foo"} }); 



في حالة تشغيل عقدة ، أوصيك:

Object.keys(obj).forEach((key, index) => {
    console.log(key);
});



أنا هنا تكرار كل عقدة وإنشاء أسماء عقدة ذات مغزى. إذا لاحظت ، exampleOre Array و instanceOf Object تشبه إلى حد كبير نفس الشيء (في طلبي ، أعطي منطقًا مختلفًا على الرغم من ذلك)

function iterate(obj,parent_node) {
    parent_node = parent_node || '';
    for (var property in obj) {
        if (obj.hasOwnProperty(property)) {
            var node = parent_node + "/" + property;
            if(obj[property] instanceof Array) {
                //console.log('array: ' + node + ":" + obj[property]);
                iterate(obj[property],node)
            } else if(obj[property] instanceof Object){
                //console.log('Object: ' + node + ":" + obj[property]);
                iterate(obj[property],node)
            }
            else {
                console.log(node + ":" + obj[property]);
            }
        }
    }
}

ملاحظة - مستوحاة من إجابة Ondrej Svejdar. لكن هذا الحل لديه أداء أفضل وأقل غموضا




ماذا لـ ... في الحلقة هو أنه ينشئ متغير جديد (var someVariable) ثم يقوم بتخزين كل خاصية للكائن المحدد في هذا المتغير الجديد (someVariable) واحدًا تلو الآخر. لذلك إذا كنت تستخدم block {} ، فيمكنك التكرار. خذ بعين الاعتبار المثال التالي.

var obj = {
     name:'raman',
     hobby:'coding',
     planet:'earth'
     };

for(var someVariable in obj) {
  //do nothing..
}

console.log(someVariable); // outputs planet



Object.keys(obj).forEach(key =>
  console.log(`key=${key} value=${obj[key]}`)
);





Related