Cách lặp qua một mảng chứa các đối tượng và truy cập các thuộc tính của chúng


188

Tôi muốn chuyển qua các đối tượng có trong một mảng và thay đổi các thuộc tính của từng đối tượng. Nếu tôi làm điều này:

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

console.log(myArray[j]);

}

Bảng điều khiển sẽ hiển thị mọi đối tượng trong mảng, phải không? Nhưng thực tế nó chỉ hiển thị đối tượng đầu tiên. Nếu tôi điều khiển đăng nhập mảng bên ngoài vòng lặp, tất cả các đối tượng xuất hiện để chắc chắn có nhiều hơn trong đó.

Dù sao, đây là vấn đề tiếp theo. Làm cách nào để tôi truy cập, ví dụ Object1.x trong mảng, sử dụng vòng lặp?

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

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

}

Điều này trả về "không xác định." Một lần nữa, bảng điều khiển đăng nhập bên ngoài vòng lặp cho tôi biết rằng tất cả các đối tượng đều có giá trị cho "x". Làm thế nào để tôi truy cập các thuộc tính này trong vòng lặp?

Tôi đã được đề nghị sử dụng các mảng riêng biệt cho từng thuộc tính, nhưng tôi muốn chắc chắn rằng tôi đã sử dụng hết con đường này trước tiên.

Cảm ơn bạn!


2
Bạn có thể gửi một mẫu của mảng của bạn? Đoạn mã đầu tiên có vẻ đúng.
Sirko

jlà một con số Bạn đã xác định nó ở đầu vòng lặp của bạn.

2
Có lẽ myArraythực sự không phải chỉ là một mảng ??
techfoobar

chúng tôi cần thêm thông tin về cách myArray được xây dựng
bgusach

Với tất cả các câu trả lời sau đây và có một câu trả lời được chấp nhận, không ai giải thích được tại sao vấn đề xảy ra và cách giải quyết nó bằng vòng lặp. #forEachlàm. Nhưng câu hỏi là về vòng lặp.
FreeLightman

Câu trả lời:


341

Sử dụng forEach một hàm mảng tích hợp. Array.forEach():

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

2
rất vui khi được giúp đỡ..Javascript đang trở nên khá tuyệt vời .. cộng với forEach sẽ tốt hơn và dễ dàng hơn để đọc các vòng lặp phức tạp ..
Dory Zion

3
Tôi sợ rằng nó forEachkhông được hỗ trợ trong IE 9. Đừng đổ lỗi cho tôi! Sản phẩm của chủ nhân của tôi hỗ trợ cho điều đó!
fatCop

1
@DoryZidon: forEach không hỗ trợ ngắt hoặc dừng - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/
trộm

2
Lưu ý rằng điều quan trọng là bạn thực sự có một mảng. Nếu bạn nhận được yourArraytừ một cái gì đó như thế document.getElementsByClassNamesẽ là HTMLCollection, không phải là một mảng. Sau đó, câu hỏi này có thể hữu ích.
J0ANMM

Lưu ý: forEachđang chặn và không hỗ trợ await. for...ofVòng lặp sẽ.
PotatoFarmer

107

Một số trường hợp sử dụng lặp qua một mảng theo cách lập trình chức năng trong JavaScript:

1. Chỉ cần lặp qua một mảng

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

Lưu ý: Array.prototype.forEach () không phải là một cách chức năng nói đúng, vì hàm này làm tham số đầu vào không được phép trả về một giá trị, do đó không thể được coi là một hàm thuần túy.

2. Kiểm tra xem có bất kỳ phần tử nào trong một mảng vượt qua kiểm tra không

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. Chuyển đổi sang một mảng mới

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

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

Lưu ý: Phương thức map () tạo ra một mảng mới với kết quả gọi một hàm được cung cấp trên mọi phần tử trong mảng gọi.

4. Tính tổng một tài sản cụ thể và tính trung bình của nó

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. Tạo một mảng mới dựa trên bản gốc nhưng không sửa đổi nó

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. Đếm số lượng của từng loại

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. Lấy một tập hợp con của một mảng dựa trên các tiêu chí cụ thể

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

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

Lưu ý: Phương thức filter () tạo ra một mảng mới với tất cả các phần tử vượt qua kiểm tra được thực hiện bởi hàm được cung cấp.

8. Sắp xếp một mảng

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

nhập mô tả hình ảnh ở đây

9. Tìm một phần tử trong một mảng

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

nhập mô tả hình ảnh ở đây

Phương thức Array.prototype.find () trả về giá trị của phần tử đầu tiên trong mảng thỏa mãn hàm kiểm tra được cung cấp.

Người giới thiệu


1
Đây là một tài liệu tham khảo tuyệt vời - đây có phải là bản gốc cho câu hỏi này hay bạn có một cái gì đó như thế này được lưu trữ ở nơi khác?
Salvatore

Giải thích rất tốt và trả lời kỹ lưỡng, cảm ơn bạn đã đóng góp.
Erica Summers

xin chào, nếu tôi muốn hiển thị tất cả tên và sau đó làm so sánh, bạn có biết làm thế nào để làm điều đó?
Dipgirl

@dipgirl, có phải như thế không? 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);
Yuci

1
Xin chúc mừng cho phiếu bầu thứ 100 :)
Syed

46

Bạn có thể sử dụng vòng lặp for..of để lặp qua một mảng các đối tượng.

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

Một trong những điều tốt nhất về for..ofcác vòng lặp là chúng có thể lặp đi lặp lại nhiều hơn là chỉ các mảng. Bạn có thể lặp lại trên bất kỳ loại lặp nào, bao gồm cả bản đồ và đối tượng. Hãy chắc chắn rằng bạn sử dụng một bộ chuyển mã hoặc một cái gì đó như TypeScript nếu bạn cần hỗ trợ các trình duyệt cũ hơn.

Nếu bạn muốn lặp lại trên bản đồ, cú pháp phần lớn giống như ở trên, ngoại trừ nó xử lý cả khóa và giá trị.

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

Tôi sử dụng for..ofcác vòng lặp cho hầu hết các loại lặp tôi làm trong Javascript. Hơn nữa, một trong những điều thú vị nhất là chúng cũng hoạt động với async / await.


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

Tuy nhiên, đó chỉ là giải pháp cho câu hỏi thứ hai.
Sirko

18

Đây là một ví dụ về cách bạn có thể làm điều đó :)

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


Làm thế nào bạn có thể nhận được giá trị của thuộc tracktính cho mỗi phần tử và gán nó cho một biến để sử dụng hoặc nội suy trong một phần khác của mã?
Chris22

7

Vòng qua một loạt các đối tượng là một chức năng khá cơ bản. Đây là những gì làm việc cho tôi.

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] là không chính xác.

Sử dụng (myArray[j].x);thay thế

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

@ Cyborgx37 Oh .. Ý tôi là jx được coi là một tên biến không chính xác.
Vivek Sadh

5

Thật đơn giản khi sử dụng phương thức forEach kể từ ES5 +. Bạn có thể trực tiếp thay đổi từng thuộc tính của từng đối tượng trong mảng của bạn.

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

Nếu bạn muốn truy cập một thuộc tính cụ thể trên từng đối tượng:

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

4

Đây là một cách khác để lặp qua một mảng các đối tượng (bạn cần đưa thư viện jQuery vào tài liệu của mình cho các đối tượng này).

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

1
Câu trả lời của bạn thiếu thông tin quan trọng về nhu cầu tải thư viện jQuery để sử dụng $.eachphương thức.
Matthew Morek

4

Điều này sẽ làm việc. Vòng lặp kỹ lưỡng mảng (yourArray). Sau đó lặp qua các thuộc tính trực tiếp của từng đối tượng (EachObj).

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

2

Lặp lại đối tượng mảng, sử dụng jQuery, (sử dụng tham số thứ hai để in chuỗi).

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

Đây là một trong những cách tôi có thể đạt được nó.


1

Câu trả lời được chấp nhận sử dụng chức năng bình thường. Vì vậy, đăng cùng một mã với sửa đổi nhỏ bằng cách sử dụng chức năng mũi tên trên forEach

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

Ngoài ra, trong $ .each bạn có thể sử dụng chức năng mũi tên như bên dưới

 $.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;

Hãy cẩn thận về các mẹo sau (`)


0

Điều này có thể giúp ai đó. Có lẽ đó là một lỗi trong Node.

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

Điều này không hoạt động:

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

Nhưng điều này hoạt động ...

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

Điều này cũng hoạt động ...

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

NHƯNG chỉ đơn giản là đảo ngược thứ tự không hoạt động. Tôi đoán có một số loại tối ưu hóa nội bộ ở đây phá vỡ Node.

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

Lỗi cho biết mảng không được xác định, nhưng không phải là: - / Node v11.15.0

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.