javascript
Javascript Lập trình

Viết code Javascript ngắn gọn với Array Distinct và Short-Circuit Evaluation

Mẹo viết code Javascript ngắn gọn hơn

Dưới đây là một số cách xử lí vấn đề dùng cách viết javascript thật ngắn ngọn, súc tích. Nếu bạn đọc giả có cách viết hay hơn hãy bổ sung ở phía bình luận cuối trang nhá.

JavaScript Array Distinct

Set type object đã được ra mắt trong ES6, cùng với spread operator(), chúng ta có thể dùng nó để tạo 1 array mới chỉ gồm các giá trị duy nhất (unique values).

Ví dụ:

  • Distinct elements of an array of primitive values
  • Distinct property values of an array of objects
const array = [2, 2, 3, 5, 8, 5, 8]
const distinctArray = [...new Set(array)]; // Result: [2, 3, 5, 8]

// Distinct property values of an array of objects
const array = [
  {"name":"Nam", "age": 20},
  {"name":"Truong", "age": 10},
  {"name":"Linh", "age": 10},
];
const distinctAges = [...new Set(array.map(e=>e.age))]; // [20,10] 

Short-Circuit Evaluation

Ternary operator là 1 cách nhanh gọn để viết các statement điều kiện đơn giản (và đôi khi phải lồng vào nhau), ví dụ như là:

Bạn thấy dòng 2 phía trên áp dụng ternary operator nhưng cũng phức tạp hơn mức cần thiết. Thay vào đó, chúng ta có thể dùng logical operators ‘and’ && và ‘or’ || để đánh giá các expression nhất định 1 cách còn ngắn gọn hơn.

Cách làm việc của nó
Giả sử ta muốn return chỉ 1 trong 2 hay nhiều option.

And &&

Sử dụng && (And chỉ đúng nếu tất cả toán hạng đều đúng, return về giá trị của toán hạng cuối cùng) bằng không sẽ return khi gặp giá trị “falsy” đầu tiên.

Or ||

Dùng || sẽ return true khi gặp giá trị “truthy” đầu tiên. Nếu mỗi toán hạng đánh giá tới false, evaluated expression cuối cùng sẽ được return.

Ví dụ 1: Chúng ta muốn return length của 1 variable, nhưng ta lại không biết variable type.

Chúng ta có thể dùng statement if/else để kiểm tra xem type của foo có được chấp nhận không, nhưng việc này có thể hơi dài dòng. Thay vào đó short circuit evaluation cho phép chúng ta có thể làm như thế này:

Nếu variable của foo là truthy, nó sẽ được return. Nếu không thì, length của array trống sẽ được return: 0 .

Ví dụ 2:
Đã bao giờ bạn gặp vấn đề truy cập 1 nested object property? Bạn sẽ không biết rằng liệu object hay 1 trong các sub-property có tồn tại, và điều này có thể gây ra các lỗi khó chịu.

Giả dụ chúng ta muốn truy cập vào 1 property có tên data bên trong this.state, nhưng data lại không được xác định cho tới khi chương trình của ta return thành công 1 fetch request.

Thông thường ta sẽ viết 1 lệnh điều kiện:

Nhưng điều đó cũng có vẻ hơi lặp đi lặp lại. ‘or’ operator có thể giải quyết nó nhanh gọn hơn:

Chuỗi tùy chọn – Optional Chaining

const name = this.state.data?.name

Cú pháp ?. đặt sau data, tức là ta đang kiểm tra xem data đó có tồn tại hay không? Hoặc trong nhiều trường hợp data có giá trị null hoặc undefined thì sao? Lúc này Optional Chaining sẽ không return về error mà nó chỉ trả về undefined. Vì thế, name sẽ có giá trị undefined. Khi javascript tìm thấy null hoặc undefined, nó sẽ short circuit và ngừng đi sâu hơn.

Optional Chaining còn áp dụng được cho cả hàm:

Nếu data tồn tại và getAge tồn tại thì gọi hàm getAge()

const age = this.state.data?.getAge?.()

Dynamic properties

Nếu data tồn tại thì lấy giá trị của data[1]

const data = this.state.data?.[1]

Default values

Cú pháp Nullish coalescing operator biểu diễn dưới dạng ?? Nó cũng khá dễ đọc. Nếu bên vế trái có giá trị undefined, khi đó data sẽ có giá trị bên phải ?? tức là ‘Default name’

const data = this.state.data?.name ?? 'Default name'

Please follow and like us:

Giới thiệuQLâm Xmaster

Share Everything !

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Nhận bài viết mới nhất qua email của bạn

Get notified when we publish new articles for free! (Fill in email and Confirm verification link)




Wordpress Social Share Plugin powered by Ultimatelysocial