Làm cách nào để tìm một phần tử trong một mảng đối tượng trong JavaScript?

Đối tượng mảng JavaScript

Đối tượng Array được sử dụng để lưu trữ nhiều giá trị trong một biến duy nhất

---

Các phương thức và thuộc tính của mảng JavaScript

NameDescripconcat() Nối các mảng và trả về một mảng với các mảng đã tham giaconstructorTrả về hàm đã tạo nguyên mẫu của đối tượng ArraycopyWithin() Sao chép các phần tử mảng trong mảng, đến và từ các vị trí đã chỉ địnhentries()Trả về một cặp khóa/giá trị Array Iteration Objectevery()Kiểm tra nếu

Bạn có thể đã thấy mình trong tình huống này khi viết mã bằng JavaScript. bạn có một mảng các đối tượng và bạn cần tìm một số đối tượng cụ thể bên trong mảng này dựa trên một số thuộc tính của đối tượng. Có RẤT NHIỀU cách để đạt được điều này, vì vậy tôi quyết định tổng hợp một số cách trong bài đăng này để giúp bạn dễ dàng chọn ra cách phù hợp nhất với mình. Hãy kiểm tra xem chúng ra

Đầu tiên, giả sử rằng chúng ta có mảng đối tượng được gọi là "objArray"

var objArray = [
    { id: 0, name: 'Object 0', otherProp: '321' },
    { id: 1, name: 'O1', otherProp: '648' },
    { id: 2, name: 'Another Object', otherProp: '850' },
    { id: 3, name: 'Almost There', otherProp: '046' },
    { id: 4, name: 'Last Obj', otherProp: '984' }
];

Và giả sử rằng chúng ta muốn lấy đối tượng có id bằng 3, hãy xem cách chúng ta có thể đạt được điều đó

Sử dụng Vanilla JS (còn gọi là JavaScript cũ đơn giản)

Nếu muốn sử dụng javascript cũ đơn giản, bạn có thể tạo một hàm lặp qua mảng rồi trả về đối tượng khi id khớp với id bạn đang tìm kiếm (hoặc trả về null nếu không tìm thấy kết quả khớp)

function findObjectByKey(array, key, value) {
    for (var i = 0; i < array.length; i++) {
        if (array[i][key] === value) {
            return array[i];
        }
    }
    return null;
}

Sau đó, bạn có thể chuyển mảng bạn muốn tra cứu, thuộc tính bạn đang tìm kiếm và giá trị của nó. Trong trường hợp của chúng tôi, chúng tôi sẽ sử dụng nó như thế này

var obj = findObjectByKey(objArray, 'id', 3);

Sử dụng ES6

Nếu thích sử dụng các hàm ES6 mới hơn, bạn cũng có thể sử dụng hàm tìm tích hợp sẵn, vì vậy chúng ta có thể đạt được kết quả tương tự mà không cần triển khai hàm riêng để tra cứu một đối tượng trong một mảng

let obj = objArray.find(obj => obj.id == 3);

TUYÊN BỐ MIỄN TRỪ TRÁCH NHIỆM. Về cơ bản, như mọi người đã nói trong các nhận xét, vâng, bạn có thể sử dụng chức năng lọc thay vì tìm, nó cũng đơn giản như nhau, nhưng mục đích của bài viết này ở đây là để tìm hiểu về chức năng tìm. Nếu bạn không biết về chức năng lọc và muốn xem qua nó, tôi cũng đã viết một bài viết nhỏ này nói về nó. =)

Nó khiến mọi thứ trở nên dễ dàng hơn bao giờ hết, TUY NHIÊN, bạn nên biết rằng ES6 không được hỗ trợ bởi một số trình duyệt cũ, vì vậy bạn nên chú ý một chút về điều này. Một trong những điều bạn có thể làm để tránh các sự cố về khả năng tương thích với trình duyệt khi sử dụng các chức năng chỉ dành cho ES6 là sử dụng thư viện javascript bên ngoài, chẳng hạn như Dấu gạch dưới. js, bởi vì các thư viện như vậy triển khai các chức năng ES6 theo cách cho phép chúng tôi sử dụng các chức năng này mà không phải lo lắng về sự hỗ trợ của các trình duyệt cũ hơn (và hơn nữa, những loại thư viện đó thậm chí có thể có thêm một số chức năng thú vị nữa)

Sử dụng dấu gạch dưới. js

Nếu chúng tôi chọn sử dụng Gạch dưới. js, mã của chúng tôi để tìm đối tượng có id bằng 3 sẽ thay đổi thành mã này

var obj = _.find(objArray, function (obj) { return obj.id === 3; });

Sử dụng jQuery

Có thể bạn đã sử dụng jQuery trong dự án của mình và nếu đúng như vậy, bạn có thể sử dụng hàm grep của jQuery để đạt được kết quả mong muốn của chúng tôi, nó sẽ như thế này

var obj = $.grep(objArray, function(obj){return obj.id === 3;})[0];

Sử dụng bộ lọc $ AngularJS

Nếu bạn đã làm việc với AngularJS, bạn cũng có thể sử dụng mô-đun $filter để lọc mảng. Sử dụng $filter của AngularJS, nó trông như thế này

Làm cách nào để tìm một đối tượng trong một mảng đối tượng JavaScript?

Làm cách nào để tìm chỉ mục của phần tử trong mảng đối tượng trong JavaScript?

Làm cách nào để lấy một phần tử từ mảng trong JavaScript?

Làm cách nào để lấy tất cả các giá trị từ mảng đối tượng trong JavaScript?