Một số cách tìm phần tử trong mảng Javascript - find elements in array JavaScript

findIndex() method

findIndex sẽ trả về index của phần tử đầu tiên trong mảng. Nếu không tìm thấy nó trả về giá trị -1. Chúng ta cùng xem một ví dụ nhé:

let numbers = [23, 12, 55, 16, 28];

let index = numbers.findIndex((val) => val > 24);
// returns the index of first element that passed the condition

console.log(index); // 2

Ở ví dụ trên thì các bạn có thể thấy điều kiện là tìm index của số > 24 cho nên nếu sử dụng findIndex, chúng ta sẽ nhận được giá trị index của số trong mảng thỏa mãn điều kiện, ngay sau đó method sẽ dừng lại.

method findIndex không hỗ trợ trình duyệt Internet Explorer

Thay vì return về index như findIndex thì chúng ta có method find sẽ trả về phần tử thỏa mãn.

find method

find() trả về giá trị của phần tử đầu tiên trong mảng thỏa mãn điều kiện ta cung cấp. Nếu không có giá trị nào đáp ứng thì find sẽ return về undefined.

Một ví dụ về find khi tìm kiếm object có name Eminem 😁

const rappers = [
    { name: 'Eminem', born: 1972 },
    { name: 'Tupac', born: 1971 },
    { name: 'Biggie', born: 1972 },
];

rappers.find((rapper) => rapper.name === 'Eminem')
// {name: 'Eminem', born: 1972}

method find không hỗ trợ trình duyệt Internet Explorer

Vậy có một số trường hợp chúng ta cần kiểm tra xem phần tử đó còn tồn tại trong mảng không thì làm thế nào? Và chúng ta có method includes cùng tìm hiểu nhé 😄

Includes method

includes dùng để kiểm tra xem phần tử này có tồn tại trong mảng hay không. Nếu có sẽ return true và ngược lại return false.

const users = ['franky', 'john', 'jonash'];

console.log(users.includes('joh'));
// false

console.log(users.includes('franky'));
// true

method includes không hỗ trợ trình duyệt Internet Explorer

indexOf method

indexOf trả về index nếu tìm thấy phần tử hoặc -1 nếu không tìm thấy.

const users = ['ha', 'trang', 'tung', 'ha', 'tuan'];

console.log(users.indexOf('ha'));
// expected output: 0

// start from index 2
console.log(users.indexOf('ha', 2));
// expected output: 3

console.log(users.indexOf('nhi'));
// expected output: -1

lastIndexOf method

Nếu như trong mảng có nhiều hơn 1 phần tử cùng giá trị thì khi sử dụng lastIndexOf chúng ta sẽ thu được kết quả là index cuối cùng của phần tử được tìm thấy. Nếu không tìm thấy phần tử nào thỏa mãn ta sẽ nhận được giá trị -1

const animals = ['ga', 'vit', 'chim', 'ca', 'vit'];

console.log(animals.lastIndexOf('vit'));
// expected output: 4

console.log(animals.lastIndexOf('chim'));
// expected output: 2

forEach, filter

Chúng ta còn một cách như sử dụng vòng lặp và tìm phần tử thỏa mãn điều kiện đã cho. Cùng xem qua ví dụ nhé:

forEach

let marks = [23, 12, 25, 33, 31];

let arr = [];

marks.forEach(val => {
    if(val >= 30) arr.push(val);
})

console.log(arr); // [33,31]

filter

let marks = [13, 29, 25, 32, 71];

let arr = marks.filter(val => val >= 30);

console.log(arr); // [32, 71]

Tìm phần tử từ mảng khác với mảng còn lại

Đây là một trường hợp chúng ta có thể áp dụng như kiến thức ở trên, các bạn có thể tìm ra cách hay và nhanh hơn nhé:

const obj = [
    { ten: 'trang', tuoi: 22 },
    { ten: 'hung', tuoi: 23 },
    { ten: 'tuan', tuoi: 24 },
    { ten: 'nhi', tuoi: 25 },
];

const friends = ['trang', 'nhi'];

const users = obj.filter((item) => friends.indexOf(item.ten) !== -1);

console.log(users); // [{ten: 'trang', tuoi: 22},{ten: 'nhi', tuoi: 25}]

Kết luận

Như vậy là mình đã giới thiệu cho các bạn một số cách để chúng ta có thể tìm một phần từ bất kì từ một mảng cho trước. Hy vọng sau bạn viết này các bạn có thể ứng dụng được các method này và sử dụng chúng hợp lí trong các bài toán đặt ra.

Chúc các bạn học tốt ^^.

Một số bài viết nên đọc:

1. Check empty array javascript
2. Merge arrays trong JavaScript - một số cách để nối mảng JavaScript
3. JavaScript Arrays những điều bạn cần biết