วิธีการวนซ้ำอาร์เรย์ที่มีวัตถุและเข้าถึงคุณสมบัติของพวกเขา

ฉันต้องการวนรอบวัตถุที่มีอยู่ในอาร์เรย์และเปลี่ยนคุณสมบัติของแต่ละอัน ถ้าฉันทำสิ่งนี้:

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" ฉันจะเข้าถึงคุณสมบัติเหล่านี้ในลูปได้อย่างไร

ฉันแนะนำที่อื่นให้ใช้อาร์เรย์แยกต่างหากสำหรับคุณสมบัติแต่ละอย่าง แต่ฉันต้องการให้แน่ใจว่าฉันหมดถนนสายนี้ก่อน

ขอบคุณ!

ใช้สำหรับแต่ละฟังก์ชั่นอาร์เรย์ในตัว Array.forEach():

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

บางกรณีใช้วนลูปผ่านอาร์เรย์ในวิธีการเขียนโปรแกรมการทำงานใน JavaScript:

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.prototype.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]

หมายเหตุ: เมธอด map () จะสร้างอาร์เรย์ใหม่พร้อมกับผลลัพธ์ของการเรียกฟังก์ชันที่มีให้ในทุกองค์ประกอบในอาร์เรย์ที่เรียก

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}] 

หมายเหตุ: เมธอด filter () จะสร้างอาร์เรย์ใหม่พร้อมองค์ประกอบทั้งหมดที่ผ่านการทดสอบที่ใช้งานโดยฟังก์ชันที่มีให้

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.prototype.find () วิธีการคืนค่าขององค์ประกอบแรกในอาร์เรย์ที่ตอบสนองฟังก์ชั่นการทดสอบที่ให้ไว้

อ้างอิง

• Array.prototype.some ()
• Array.prototype.forEach ()
• Array.prototype.map ()
• Array.prototype.filter ()
• Array.prototype.sort ()
• สเปรดไวยากรณ์
• Array.prototype.find ()

คุณสามารถใช้for..of loopเพื่อวนลูปอาร์เรย์ของออบเจ็กต์ได้

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

หนึ่งในสิ่งที่ดีที่สุดเกี่ยวกับfor..ofลูปคือพวกมันสามารถทำซ้ำได้มากกว่าแค่อาร์เรย์ คุณสามารถทำซ้ำได้ทุกประเภทของ iterable รวมถึงแผนที่และวัตถุ ตรวจสอบให้แน่ใจว่าคุณใช้ transpiler หรือสิ่งอื่น ๆ เช่น TypeScript หากคุณต้องการสนับสนุนเบราว์เซอร์รุ่นเก่า

หากคุณต้องการทำซ้ำบนแผนที่ไวยากรณ์ส่วนใหญ่จะเหมือนกับข้างต้นยกเว้นว่าจะจัดการทั้งคีย์และค่า

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

ฉันใช้for..ofลูปสำหรับการวนซ้ำทุกประเภทที่ฉันทำใน Javascript นอกจากนี้หนึ่งในสิ่งที่เจ๋งที่สุดคือพวกเขายังทำงานกับ async / คอยเช่นกัน

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

นี่คือตัวอย่างของวิธีที่คุณทำได้ :)

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])
  }
}

การวนลูปผ่านอาเรย์ของวัตถุนั้นเป็นฟังก์ชั่นพื้นฐานที่ค่อนข้างดี นี่คือสิ่งที่ได้ผลสำหรับฉัน

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>");
  }
}

myArray[j.x] ไม่ถูกต้องตามหลักเหตุผล

ใช้(myArray[j].x);แทน

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

มันง่ายมากโดยใช้วิธี forEach ตั้งแต่ ES5 + คุณสามารถเปลี่ยนคุณสมบัติแต่ละอย่างของแต่ละวัตถุในอาเรย์ของคุณได้โดยตรง

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

หากคุณต้องการเข้าถึงคุณสมบัติเฉพาะในแต่ละวัตถุ:

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

นี่เป็นอีกวิธีในการวนซ้ำของออบเจ็กต์ต่างๆ (คุณต้องรวมไลบรารี jQuery ในเอกสารของคุณสำหรับสิ่งเหล่านี้)

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

สิ่งนี้จะได้ผล วนลูปอย่างละเอียด (yourArray) จากนั้นวนซ้ำผ่านคุณสมบัติโดยตรงของแต่ละวัตถุ (eachObj)

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

Array การทำซ้ำวัตถุโดยใช้ jQuery (ใช้พารามิเตอร์ที่สองเพื่อพิมพ์สตริง)

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

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);
})

นี่เป็นหนึ่งในวิธีที่ฉันสามารถบรรลุเป้าหมายได้

คำตอบที่ยอมรับใช้ฟังก์ชั่นปกติ ดังนั้นการโพสต์รหัสเดียวกันกับการปรับเปลี่ยนเล็กน้อยโดยใช้ฟังก์ชั่นลูกศรบน forEach

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

นอกจากนี้ใน $. แต่ละที่คุณสามารถใช้ฟังก์ชั่นลูกศรเช่นด้านล่าง

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

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;

ระวังเห็บด้านหลัง (`)

นี่อาจช่วยใครซักคน อาจเป็นข้อผิดพลาดในโหนด

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