flat() javascript là gì? method khá hay bạn nên biết

flat() trong Javascript

Method flat() trong Javascript giúp chúng ta nối các phần tử mảng con (sub-array) và đưa các phần tử con này trở về cùng một depth và trả về một mảng mới.

Dưới đây là một ví dụ để các bạn dễ hình dung hơn:

const nestedArray = ['a', 'b', 'c', [1, 2]];

console.log(nestedArray.flat()); // ['a', 'b', 'c', 1, 2]

Như các bạn thấy ở trên là một mảng lồng nhau (nested array). Khi sử dụng flat() sẽ giúp chúng ta đưa các phần tử này về depth = 1.

flat() có depth mặc định là 1

Ví dụ khác:

const nestedArray = ['a', 'b', 'c', [1, 2],['d', 'e'],[['f']]];

console.log(nestedArray.flat()); 
// ['a', 'b', 'c', 1, 2, 'd', 'e', ['f']]
console.log(nestedArray.flat(2)); 
// ['a', 'b', 'c', 1, 2, 'd', 'e', 'f']

Với bao nhiêu depth thì ta sẽ bỏ bấy nhiêu [] trong phần tử con.

Chúng ta cũng có thể sử dụng cách khác để flat một mảng với ví dụ sau:

const arr = ['a', 'b', 'c', [1, 2]];

cách 1:
['a', 'b', 'c', [1, 2]].reduce((result, curr) => result.concat(curr),[]);
// ['a', 'b', 'c', 1, 2]

cách 2:
const flattened = (arr) => [].concat(...arr);
// ['a', 'b', 'c', 1, 2]

method concat() Javascript được sử dụng để gộp hai hoặc nhiều mảng. Phương thức này không thay đổi các mảng hiện có mà sẽ trả về một mảng mới.

Cách sử dụng reduce() Javascript bạn có thể xem tại đây.

👉 Với trường hợp bạn muốn đưa tất cả các sub-array trong mảng nested array trở về mảng thông thường (depth = 1) thì chúng ta có thể truyền Infinity (Một số vô hạn) vào flat().

const arr = ['e', 'f', 'g', [[['homiedev']]]]
arr.flat(Infinity); // ['e', 'f', 'g', 'homiedev']

👉 Xóa phần tử trống (empty slots) trong mảng

Method flat() có thể giúp chúng ta loại bỏ các empty slots trong mảng 👌.

const arr = [1, 2, , 4, , [], '', undefined, null];
arr.flat(); // [1, 2, 4, '', undefined, null]

Kết luận

Cảm ơn các bạn đã dành thời gian đọc bài viết. Chúng ta sẽ gặp lại nhau trong các bài viết sắp tới nhé 😆😁.

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