Tìm đối tượng trong mảng đối tượng JavaScript

Bạn đã bao giờ gặp phải yêu cầu tìm một đối tượng cụ thể trong một mảng đối tượng nhất định chưa? . Giả sử rằng chúng ta có một mảng như trong danh sách bên dưới và chúng ta cần tìm xem liệu một đối tượng có id là '4' có tồn tại hay không

    var tasks = [
                { 'Id': '1', 'Title': 'Go to Market 99', 'Status': 'done' },
                { 'Id': '2', 'Title': 'Email to manager', 'Status': 'pending' },
                { 'Id': '3', 'Title': 'Push code to GitHub', 'Status': 'done' },
                { 'Id': '4', 'Title': 'Go for running', 'Status': 'done' },
                { 'Id': '5', 'Title': 'Go to movie', 'Status': 'pending' },
    ];

Để tìm kiếm một đối tượng cụ thể, chúng ta sẽ sử dụng phương thức tìm nguyên mẫu Array. Điều này trả về một giá trị trên một tiêu chí nhất định, nếu không, nó trả về 'không xác định'. Nó nhận hai tham số, một hàm gọi lại bắt buộc và một đối tượng tùy chọn, sẽ được đặt làm giá trị this bên trong hàm gọi lại

1. Hàm gọi lại sẽ được gọi cho từng phần tử của mảng cho đến khi điều kiện đã cho cho một phần tử cụ thể không đúng
2. Một đối tượng sẽ là giá trị của this trong hàm gọi lại là một tham số tùy chọn và nếu nó không được truyền, giá trị sẽ được đặt thành không xác định trong hàm gọi lại

Tham số hàm gọi lại của phương thức tìm có ba tham số

1. yếu tố. phần tử hiện tại đang được xử lý trong mảng
2. mục lục. chỉ mục của phần tử hiện tại đang được xử lý
3. mảng. mảng mà phương thức find đang được gọi

Giả sử chúng ta có chức năng gọi lại như trong danh sách bên dưới. Nó sẽ in phần tử hiện tại, chỉ mục của phần tử và mảng

function CallbackFunctionToFindTaskById(element, index, array) {

        console.log(element);// print element being processed 
        console.log(index); // print index of the element being processed 
        console.log(array); // print the array on which find method is called 

    }

Phương pháp tìm kiếm hoạt động như thế nào?

• Phương thức find của JavaScript sẽ thực thi hàm gọi lại cho từng phần tử của mảng. Vì vậy, nếu có 5 phần tử trong mảng, chức năng gọi lại sẽ được thực hiện năm lần
• Phương thức find của JavaScript sẽ ngắt quá trình thực thi hàm gọi lại khi nó tìm thấy một tiêu chí thực sự cho một phần tử cụ thể
• Nếu tiêu chí đã cho là đúng với một phần tử, phương thức tìm kiếm JavaScript sẽ trả về phần tử cụ thể đó và sẽ không thực thi hàm gọi lại cho các phần tử còn lại
• Nếu tiêu chí không đúng với bất kỳ phần tử nào, phương thức tìm JavaScript sẽ trả về không xác định
• Phương thức tìm JavaScript không thực thi chức năng gọi lại cho các chỉ mục không được đặt hoặc đã bị xóa
• Phương thức tìm JavaScript luôn thực thi hàm gọi lại với ba đối số. phần tử, chỉ mục, mảng

Hãy cho chúng tôi xem một số ví dụ về việc sử dụng phương pháp tìm

  Tìm đối tượng theo tiêu chí cố định

Chúng tôi có một mảng nhiệm vụ như trong danh sách dưới đây

   var tasks = [
                 { 'Id': '1', 'Title': 'Go to Market 99', 'Status': 'done' },
                 { 'Id': '2', 'Title': 'Email to manager', 'Status': 'pending' },
                 { 'Id': '3', 'Title': 'Push code to GitHub', 'Status': 'done' },
                 { 'Id': '4', 'Title': 'Go for running', 'Status': 'done' },
                 { 'Id': '5', 'Title': 'Go to movie', 'Status': 'pending' },
    ];

Chúng tôi muốn tìm một đối tượng có id là '4'. Chúng tôi có thể làm điều đó như thể hiện trong danh sách dưới đây

  function CallbackFunctionToFindTaskById(task) {

        return task.Id === '4';
    }

    var task = tasks.find(CallbackFunctionToFindTaskById);
    console.log(JSON.stringify(task));

Trong danh sách trên, chúng ta đang chuyển hàm gọi lại CallbackFunctionToFindTaskById trong phương thức find của mảng task. Luôn luôn, tham số đầu tiên của hàm gọi lại đại diện cho tham số phần tử. Ở đây nhiệm vụ đại diện cho phần tử bên trong hàm gọi lại. Vì vậy, tác vụ đại diện cho phần tử hiện đang được xử lý

Trong hàm gọi lại, chúng tôi đang kiểm tra Id của tác vụ hiện tại và nếu nó bằng 4, hãy trả lại tác vụ. Trong trường hợp này, tiêu chí được cố định bên trong hàm gọi lại

  Tìm đối tượng theo tiêu chí được đưa vào hàm gọi lại

Trong ví dụ trước, chúng tôi đã có một tiêu chí cố định trả về một đối tượng có id là '4'. Tuy nhiên, có thể có một yêu cầu trong đó chúng ta có thể muốn vượt qua các tiêu chí trong khi gọi hàm gọi lại. Chúng ta có thể truyền một đối tượng làm giá trị của this trong hàm gọi lại. Chúng ta hãy xem xét lại mảng nhiệm vụ tương tự, được hiển thị trong danh sách tiếp theo

   var tasks = [
                { 'Id': '1', 'Title': 'Go to Market 99', 'Status': 'done' },
                { 'Id': '2', 'Title': 'Email to manager', 'Status': 'pending' },
                { 'Id': '3', 'Title': 'Push code to GitHub', 'Status': 'done' },
                { 'Id': '4', 'Title': 'Go for running', 'Status': 'done' },
                { 'Id': '5', 'Title': 'Go to movie', 'Status': 'pending' },
    ];

Tiếp theo, chúng ta hãy tạo một hàm gọi lại FindTaskById như trong danh sách bên dưới

function FindTaskById(task) {        
        console.log(this);

    }

Như bạn nhận thấy, chúng tôi đang in giá trị của “this” bên trong hàm gọi lại. Tiếp theo, chúng ta sẽ chuyển hàm gọi lại FindByTask trong phương thức find của mảng task như trong danh sách bên dưới

var task = tasks.find(FindTaskById,['4','67']);

Trong trường hợp này, giá trị của hàm gọi lại bên trong này đã được đặt thành một đối tượng có hai giá trị. 4 và 67. Trong bảng điều khiển, bạn sẽ nhận được đầu ra như hình bên dưới

Giá trị này được in 5 lần vì có 5 phần tử trong mảng nhiệm vụ. Để trả về một đối tượng có Id được đặt thành 4, chúng ta cần sửa đổi chức năng gọi lại như trong danh sách bên dưới

   function FindTaskById(task) {

        if (task.Id === this[0]) {
            return task;
        }
    }

    var task = tasks.find(FindTaskById, ['4', '67']);
    console.log(JSON.stringify(task));

Trong hàm gọi lại, chúng tôi đang chuyển giá trị của đối tượng này với thuộc tính đầu tiên được đặt thành 4. Do đó kiểm tra xem nhiệm vụ. Id bằng this[0] hay không sẽ trả về một đối tượng có id 4

Phần kết luận

Trong bài đăng này, chúng ta đã tìm hiểu về phương thức tìm mảng JavaScript và các tùy chọn khác nhau với hàm gọi lại. Hiểu rõ hơn về phương thức find là điều cần thiết để trở thành một nhà phát triển JavaScript hiệu quả hơn và tôi hy vọng bạn thích đọc

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

Làm cách nào để lấy đối tượng đầu tiên từ mảng đối tượng trong JavaScript?

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