Mảng vòng lặp javascript của các đối tượng

Trong bài viết này, chúng ta sẽ chứng minh việc lặp qua một mảng các đối tượng trong JavaScript bằng một ví dụ thực tế về danh sách nhân viên. Trong ví dụ bên dưới, mỗi nhân viên có các thuộc tính tên, chức vụ, profile_url và thẻ. Vì chúng tôi đang xem xét một danh sách nhân viên, tất cả các đối tượng nhân viên sẽ được đặt trong một mảng JS

Biểu diễn dựa trên JavaScript dưới dạng một mảng đối tượng của ví dụ trên như sau

let employeeList = [ 

{first_name:"Eleanor", last_name:"Bolton", designation:"CEO, Co-Founder", tags: ["Finance","San Francisco", "Mentor", "Top Management"], age:45},

{first_name:"Caspian", last_name:"Shields", designation:"CTO, Co-Founder", tags:["Engineering","San Francisco", "Mentor", "Top Management"], age:34},

{first_name:"Marek", last_name:"Goodman", designation:"CFO", tags:["Operations","New York", "Mentor", "Top Management"], age:31},
                         
{first_name:"Lisa", last_name:"Whitehouse", designation:"CMO", tags:["People","San Francisco", "Mentor", "Top Management"], age:39},

{first_name:"Buster", last_name:"Mackenzi", designation:"COO", tags:["Product","New York", "Mentor", "Top Management"], age:43}
                       
];

Cách lặp qua một Mảng đối tượng

1. Mảng. forEach() để lặp lại đơn giản
2. Mảng. map() để biến đổi mọi đối tượng của mảng
3. Mảng. filter() để tạo tập hợp con của các đối tượng từ mảng
4. Mảng. reduce() để kết hợp các phần tử mảng thành một đối tượng
5. Mảng. every() cho tất cả các đối tượng trong mảng thỏa mãn một điều kiện
6. Mảng. sort() để sắp xếp lại danh sách các đối tượng
7. Mảng. find() để tìm kiếm một đối tượng trong mảng

Trên đây là các cách khác nhau để lặp qua một mảng đối tượng, chúng ta sẽ thảo luận chi tiết về từng phương pháp riêng lẻ ở phần sau của bài viết này. Bản thân việc lặp trên một mảng các đối tượng rất giống với phép lặp mảng đơn giản, tuy nhiên, thao tác trên các đối tượng mảng phức tạp hơn vì mỗi mục là một đối tượng so với một chuỗi hoặc số

Lặp lại đơn giản trên mảng đối tượng

Việc truy cập các mục của một mảng các đối tượng được thực hiện bằng Array. forEach() với chức năng gọi lại trong đó mọi đối tượng trong mảng có thể được truy cập dưới dạng tham số. Tuy nhiên, không giống như phép lặp mảng đơn giản, các tham số là các đối tượng do đó các thuộc tính của nó có thể được hủy cấu trúc trực tiếp nếu cần

Trong ví dụ dưới đây, chúng tôi truy cập từng đối tượng nhân viên từ employeeList và hủy cấu trúc các thuộc tính “first_name”, “last_name” và “designation”. Ngoài ra, chúng tôi sẽ in chi tiết trên màn hình bằng câu lệnh nhật ký bảng điều khiển

// Print first name, last name and designation of every employee on the list

employeeList.forEach(({first_name, last_name, designation})=>{ 

console.log(`${first_name} ${last_name} is the ${designation}`)});

// "Eleanor Bolton is the CEO, Co-Founder"
// "Caspian Shields is the CTO, Co-Founder"
// "Marek Goodman is the CFO"
// "Lisa Whitehouse is the CMO"
// "Buster Mackenzi is the COO"

Chuyển đổi Mảng đối tượng thành một mảng mới

Một mảng các đối tượng có thể được chuyển đổi bằng Array. map() là hàm bậc cao hơn, tham khảo nhà phát triển. to/higher-order-functions để tìm hiểu thêm về hàm bậc cao. Điều quan trọng cần lưu ý là Mảng. map() không sửa đổi mảng ban đầu và thay vào đó trả về mảng đã chuyển đổi

Trong ví dụ dưới đây, chúng tôi tạo một mảng mới bao gồm tất cả tên nhân viên bằng cách sử dụng Array. map() trên đối tượng employeeList. Trong hàm gọi lại, chúng tôi trả về giá trị kết hợp của cả hai thuộc tính first_name và last_name. Kết quả cuối cùng sẽ là một mảng các giá trị chuỗi tên nhân viên từ employeeList

// Create new array from employeeList with all employee names 

const employeeNames = employeeList.map(

({first_name, last_name})=> first_name + " " + last_name);

console.log(employeeNames);

// ["Eleanor Bolton", "Caspian Shields", "Marek Goodman", "Lisa Whitehouse", "Buster Mackenzi"]

Thêm, xóa thuộc tính trong mảng đối tượng

Để thêm một thuộc tính mới cho mọi đối tượng của mảng, chúng ta cần sử dụng mảng. map() tương tự như chuyển đổi mảng nhưng giá trị được gán cho cùng một mảng thay vì một mảng mới. Hơn nữa, chúng ta cần sử dụng toán tử trải phổ để giữ lại các thuộc tính hiện có, theo sau là các cặp khóa/giá trị thuộc tính mới cần được thêm vào, tức là {…object, newProperty. giá trị tài sản}. Đọc thêm về toán tử trải rộng từ nhà phát triển. mozilla. org/Spread_syntax

Trong ví dụ dưới đây, chúng tôi đang thêm thuộc tính “name” vào mọi đối tượng trong mảng employeeList với giá trị là chuỗi nối của thuộc tính first_name và last_name. Giá trị của mảng employeeList được cập nhật với giá trị được trả về bởi employeeList. hàm map()

// Add "name" property to all the objects in the list

employeeList = employeeList.map((employee)=> {

return {...employee, name: employee.first_name + " " + employee.last_name}});

console.log(employeeList);

Trong ví dụ bên dưới, việc xóa các “thẻ” thuộc tính khỏi mọi đối tượng trong mảng employeeList được thực hiện bởi Array. phương thức forEach(). Trong chức năng gọi lại, chúng tôi truy cập mọi đối tượng dưới dạng tham số và “xóa nhân viên. tags” đảm bảo rằng thuộc tính tags bị xóa khỏi mọi tham chiếu đối tượng trong mảng employeeList. Đọc thêm về thao tác xóa từ nhà phát triển. mozilla. org/Người vận hành/xóa

// Delete "tags" property from all the objects in employeeList

employeeList.forEach((employee)=> {

  delete employee.tags

});

console.log(employeeList);

Tổng của một thuộc tính trong mảng các đối tượng

Tổng các thuộc tính của các đối tượng trong mảng được tính bằng Array. phương pháp giảm (). Chức năng chính của

Trong ví dụ dưới đây, chúng tôi áp dụng để giảm trên employeeList với giá trị ban đầu là một đối tượng có thuộc tính age với giá trị 0. Trong chức năng gọi lại, chúng tôi thêm “tổng. tuổi” với giá trị của thuộc tính “tuổi” từ mục nhập đối tượng

// Calculate total age to find the average age of employee list 

const empTotal = employeeList.reduce(

(total, {age})=> { 

total.age = total.age + age;

return total;

}, {age:0}) 

console.log(empTotal) //{age: 192}

const avgAge = empTotal.age/employeeList.length;

console.log(`Average age of employees are: ${avgAge}`);

// "Average age of employees are: 38.4"

Tìm kiếm một phần tử trong mảng đối tượng

Chúng ta có thể thực hiện chức năng tìm kiếm trong một mảng các đối tượng bằng cách sử dụng Array. find() và khớp mọi đối tượng với các giá trị đối tượng tìm kiếm. Mảng. phương thức find() trả về đối tượng khớp đầu tiên từ mảng đối tượng

Trong ví dụ bên dưới, thuộc tính “first_name” của các đối tượng từ employeeList được so khớp với “Caspian” để tìm một nhân viên có tên là “Caspian”. Đối tượng đầu tiên trả về true cho `employee. first_name == “Caspian”` điều kiện được trả về và được gán cho hằng số JavaScript đã tìm kiếmEmployee

// Search employee with first name as "Caspian"

const searchedEmployee = employeeList.find(

(employee) => employee.first_name == "Caspian");

console.log(searchedEmployee);

// {first_name:"Caspian", last_name:"Shields", designation:"CTO, Co-Founder", 
// tags:["Engineering", "San Francisco", "Mentor", "Top Management"], age:34}

Lọc các phần tử dựa trên một tiêu chí

Các mục mảng có thể được lọc bằng cách sử dụng Array. filter(), tuy nhiên, trái ngược với một mảng đơn giản, các phần tử được so khớp bằng cách sử dụng giá trị thuộc tính của mọi đối tượng

Trong ví dụ dưới đây, chúng tôi cần tìm tất cả nhân viên đến từ “New York” thông qua thuộc tính tags trong mục nhập đối tượng. Mảng employeeList được lọc bằng cách sử dụng điều kiện liệu chuỗi “New York” có xuất hiện trong mảng thuộc tính thẻ của đối tượng hay không

// Find subset of employees who are from New York 

const employeesInNewYork = employeeList.filter(

(employee)=> employee.tags.indexOf("New York") != -1);

console.log(employeesInNewYork);

// [{first_name:"Marek", last_name:"Goodman", designation:"CFO", 
// tags:["Operations","New York", "Mentor", "Top Management"], age:31},
                         
// {first_name:"Lisa", last_name:"Whitehouse", designation:"CMO", 
// tags:["People","San Francisco", "Mentor", "Top Management"], age:39},

// {first_name:"Buster", last_name:"Mackenzi", designation:"COO", 
// tags:["Product","New York", "Mentor", "Top Management"], age:43}]

Sắp xếp các phần tử trong mảng đối tượng

Mảng. Phương thức sort() cho phép một mảng được sắp xếp dựa trên các tiêu chí được cung cấp trong hàm gọi lại. Không giống như một mảng đơn giản, một mảng các đối tượng có thể được sắp xếp dựa trên bất kỳ một hoặc nhiều thuộc tính nào của mục nhập đối tượng

Trong ví dụ dưới đây, chúng tôi sắp xếp employeeList theo thứ tự tăng dần của thuộc tính đối tượng “tuổi”. Điều kiện “emp1. tuổi – emp2. age” trả về một giá trị âm khi hai đối tượng của giá trị thuộc tính “age” không được sắp xếp và do đó sắp xếp lại mảng

Xác thực mọi mục nhập đối tượng

Mảng. every() hoàn thành xác thực một mảng và trả về một giá trị boolean dựa trên việc tất cả các đối tượng của mảng có thỏa mãn điều kiện hay không

Trong ví dụ dưới đây, chúng tôi kiểm tra xem mọi nhân viên có trên 18 tuổi hay không. Nếu danh sách nhân viên. Phương thức every() sẽ chỉ trả về true nếu mọi đối tượng thỏa mãn “employee. tuổi > 18”

Làm cách nào để sử dụng vòng lặp for trên mảng đối tượng trong JavaScript?

Làm cách nào để lặp qua danh sách các đối tượng trong JavaScript?

Vòng lặp nào được sử dụng cho mảng đối tượng?

Làm cách nào để lặp một mảng trong JavaScript?