Skip to main content

Xóa phần tử Duplicates trong mảng sử dụng ES6


Dưới đây là 3 cách để lọc các phần tử trùng nhau (duplicates) trong mảng và trả về những giá trị duy nhất. Tôi thích sử dụng Set bởi vì nó ngắn và đơn giản.

1. Sử dụng Set:

Đầu tiên sẽ tìm hiểu Set là gì:

Set là một đối tượng mới được giới thiệu trong ES6. Bởi vì Set chỉ cho lưu trữ các giá trị duy nhất. Khi bạn truyền vào nó 1 mảng thì nó sẽ xóa những giá trị trùng lặp.

Okay, chúng ta sẽ nhìn những đoạn code sau để hiểu hơn về Set:

1. Đầu tiên, chúng ta sẽ tạo 1 Set mới bằng cách truyền vào cho nó 1 mảng. Bởi vì Set chỉ nhận các giá trị duy nhất lên sẽ xóa các phần tử trùng lặp.

2. Bây giờ các phần tử trùng nhau biến mất, chúng ta sẽ convert nó lại thành mảng bằng cách sử dụng toán tử ...



Convert Set sang mảng sử dụng Array.from

Ngoài ra, bạn có thể sử dụng Array.from để convert Set sang mảng:



2. Sử dụng filter:

Để hiểu hơn về cách này, chúng ta sẽ xem qua cách 2 phương thức hoạt động: indexOf và filter.

indexOf

Phương thức indexOf sẽ trả về vị trí index đầu tiên mà chúng tìm thấy trong mảng.



filter

Phương thức filter() sẽ tạo ra 1 mảng mới với các điều kiện cho trước. Nói cách khác, các phần tử thỏa mãn điều kiện trả về true thì sẽ nằm trong mảng đã được lọc. Các phần tử sai điều kiện sẽ bị loại bỏ trong mảng mới.



Dưới đây là bảng console.log đoạn code trên:



3. Sử dụng reduce:

Trong trường hợp này, hàm reduce sẽ kiểm tra mảng xem có phần tử đó hay không. Nếu chưa có sẽ thêm phần tử đó vào mảng, còn không sẽ bỏ qua phần tử đó.

Hàm reduce hơi khó hiểu một chút, vì vậy hãy xem thử ví dụ sau:



Và đây là kết quả console.log:



Thanks for reading ❤

Resource: Medium Dailyjs
Nhãn:

Comments

Post a Comment

Popular posts from this blog

Tạo ứng dụng realtime với Firebase Database và ReactJS

Hello cả nhà ! Như các bạn cũng đã biết thì Firebase được tạo bởi "Ông lớn Google", bởi vậy lên việc sử dụng Firebase khá an toàn và tiên dụng. Mọi người có thể vô trang chủ của Firebase tại địa chỉ:  Firebase Google  . Firebase có rất nhiều tính năng vô cùng tuyệt vời như: Storage, Database, Hosting, Function, Authentication, ML Kit. Hôm nay mình xin phép làm một demo nhỏ cho tạo ứng dụng realtime bằng cách sử dụng Firebase Database với ReactJS . Bài viết này mình xin hướng dẫn các bước chuẩn bị trước khi vô code. Đầu tiên các bạn vô trang chủ của Firebase, và tới Firebase console. Sau khi vô tới Console Firebase các bạn nhấn vô Add a Project để tạo 1 dự án mới. Các bạn nhập tên cho project của mình,  nó sẽ tự random ID project cho các bạn theo tên của project mà các bạn đã đặt. Điền hoàn tất thì nhấn Tạo và chờ vài giây để cho nó tạo Thành công. Tạo project xong các bạn chọn tiếp tới tạo Database, và chúng ta cũng chỉ quan tâm đến nó ...
Post a Comment
Read more

ES6 Arrow Function Cheatsheet

Dưới đây là một số cách để bạn có thể viết arrow functions trong ES6 . // Explicit Return, Multi-Line a => { return a } // Explicit Return, Single-Line a => { return a } // Implicit Return, Multi-line a => ( a ) // Implicit Return, Single-Line a => a // Multiple Parameters, Parentheses Required (a, b) => a, b Implicit vs Explicit Return Mỗi chúng ta có một cách viết arrow functions khác nhau. Với normal functions , nếu bạn muốn return 1 cái gì đó, bạn sẽ dùng từ khóa return . Arrow functions cũng như vậy. Khi bạn dùng từ khóa return , nó sẽ gọi là ` explicit return `. Hãy thử coi các ví dụ sau: Có thể nhận rõ ràng sự khác biệt. Khi nào thì dùng dấu ngoặc nhọn` {} `, bạn cần phải chính xác cái mà return ra. Tuy nhiên, nếu không dùng ` {} `, return sẽ là bao hàm, và bạn không cần chúng. Có một cách gọi tên cho việc đó. Khi bạn sử dụng dấu ngoặc nhọn như ở Example B thì nó gọi là ` block body `, và cú pháp ở Example C gọi là ` concise body `....
1 comment
Read more