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

Master Proptypes trong React

React là một thư viện JavaScript cho việc xây dựng giao diện người dùng (UI). React giúp quản lý dễ các trạng thái (state) của ứng dụng hơn và sẽ thay đổi UI khi mà state thay đổi. React dựa vào các component và mỗi component có state của nó. Nếu như là state của component dùng setState() và có thể thể props từ component cha. The Problem Từ khi Reatc là một thư viện JavaScript và JS không cung cấp bất cứ thứ gì về type-checking , bỏ qua việc đó khi sử dụng props component có thể khiến bạn gặp bugs trong ứng dụng. Solution Bạn có thể dùng Js extensions như TypeScript cho việc checking, nhưng nếu bạn không muốn sử dụng nó, React cung cấp đầy đủ cho tính năng type-checking verify props của các component chính xác type. Sử dụng PropTypes, bạn có thể chắc chắn các component nhận đúng type của props. Ví dụ, ta có Person component và nhận 2 props: `name` và `age`. Sử dụng PropTypes, ta có thể chắc chắn `name` luôn luôn là `string` và `age` luôn luôn là number. Installing Pr...
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

Testing React Native Apps

What are we unit testing exactly ? We're using  "unit testing"  to refer to tests of functions and plain JavaScript objects, independent of the React Native framework. This means that we aren't testing any components that rely on React Native. For example, a unit could be individual methods and functions in classes or really any small pieces of functionality. We mock out dependencies in these tests so that we can test individual methods and functions in isolation. These test are written using testing frameworks and for this article i will be using  Jest , javascript testing framework together with  Enzyme  and  React Native Testing Library . Setting Install If you use  React Native CLI  installs the  Jest  testing framework by default. But if you're using Expo we need to install it manually. yarn add -D enzyme enzyme-adapter-react-16 More: yarn add react-dom react-native-testing-library Create new file  je...
Post a Comment
Read more