- vừa được xem lúc

Những cái mới của javascript hiện đại(phần 2)

0 0 15

Người đăng: ngocyen

Theo Viblo Asia

  • JavaScript đã phát triển rất nhanh trong những năm gần đây. Đặc biệt là sau khi phát hành ES6 vào năm 2015, mọi thứ đã trở nên rất tuyệt vời.
  • Trong bài viết này, chúng tôi sẽ thảo luận về các tính năng được giới thiệu trong phiên bản ES2020.

Toán tử optional chaining

  • Toán tử optional chaining : Cung cấp một cách để đơn giản hóa việc truy cập các giá trị thông qua các đối tượng
  • Cho phép xử lý short-circuiting nếu tham chiếu bị null hoặc undefined thì trả về giá trị undefined thay vì ném ra lỗi từ đó chương trình không thể tiếp tục.
  • Điều này giúp các biểu thức ngắn và đơn giản hơn khi truy cập các thuộc tính của đối tượng mà khả năng tồn tại mà tham chiếu là chưa được đảm bảo.

xem ví dụ dưới đây: ta có 1 object là blog:

```
const blog = { title: "My Blog", author: { name: "Yen", links: { website: "https://viblo.asia/", }, },
}; const linkToWebsite = blog && blog.author && blog.author.links && blog.author.links.website;
```
  • Bằng cách sử dụng dấu?. toán tử, JavaScript biết kiểm tra ngầm để đảm bảo các tham chiếu ở giữa null hoặc undefined trước khi cố gắng truy cập thêm
  • Nếu tham chiếu là null hoặc undefined, biểu thức sẽ tự động dừng và trả về undefined. Dưới đây là ví dụ tương tự bằng cách sử dụng chuỗi tùy chọn:
```
//ES2020
const linkToWebsite = blog?.author?.links?.website;
```

Toán tử Nullish Coalescing (??)

  • Toán tử Nullish Coalescing (??) là một toán tử logic trả về toán hạng bên phải của nó khi toán hạng bên trái của nó là null hoặc undefined và ngược lại

Kết quả của a ?? b là:

Chọn a nếu nó không null hoặc undefined Chọn b cho trường hợp ngược lại ở trên

```
const res = (a !== null && a !== undefined) ? a : b; //ES2020
const res = a??b; ```

tương tự ví dụ dưới đây

```
let firstName = null;
let lastName = null;
let nickName = "Yen xinh gai";
console.log(firstName ?? lastName ?? nickName ?? "Anonymous"); // nếu firstName null hoặc undefine thì lấy lastName. nếu lastName null thì chọn nickname nấu nickName null thì là 'Anonymous' ở đây first và last đều null nên kết quả sẽ là Yen xinh gai ```

Dynamic Imports

  • Import là Cho phép chúng ta import các function từ các module khác

  • Để dynamic import một module là ta có thể được gọi là một hàm và tự động trả về Promise, Await

//ES2020 import('/modules/my-module.js') .then((module) => { // Do something with the module. });

//ES2020 let module = await import('/modules/my-module.js');

BigInt

  • Integer trong Javascript giới hạn đến giá trị 2^53- 1
  • Number.MAX_SAFE_INTEGER đại diện cho số nguyên an toàn tối đa trong JavaScript (2^53 - 1).
 const x = Number.MAX_SAFE_INTEGER + 1; const y = Number.MAX_SAFE_INTEGER + 2; console.log(Number.MAX_SAFE_INTEGER); // expected output: 9007199254740991 console.log(x); // expected output: 9007199254740992 
  • Để xử lý các giá trị lớn hơn nhiều lần với hiệu năng cao, ta có thể sử dụng thư viện Big Integer sau.
  • Big integer cho phép thực hiện các phép toán cộng, trừ, nhân, chia, so sánh, … với các số Integer không giới hạn, miễn sau bạn có đủ RAM.
const previouslyMaxSafeInteger = 9007199254740991n const alsoHuge = BigInt(9007199254740991)
// ↪ 9007199254740991n const hugeString = BigInt("9007199254740991")
// ↪ 9007199254740991n

Promise.allSettled()

  • Phương thức Promise.allSettled () sẽ trả về mảng tất cả các Promise đã có đã thực hiện hoặc bị từ chối

  • Nó thường được sử dụng khi bạn có nhiều tác vụ không đồng bộ không phụ thuộc vào nhau để hoàn thành thành công hoặc bạn luôn muốn biết kết quả của mỗi promise.

     //ES2020
    const promise1 = Promise.resolve(3);
    const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'Something went wrong'));
    const promises = [promise1, promise2]; Promise.allSettled(promises). then((results) => results.forEach((result) => console.log(result.status))); // expected output:
    // "fulfilled"
    // "rejected"
    

Bình luận

Bài viết tương tự

- vừa được xem lúc

1 số UI component và layout hữu ích với Frontend

Giới thiệu. Hôm nay mình xin chia sẻ 1 số Layout và UI component quen mà có lẽ là quen thuộc với nhiều người khi làm dự án, hay bắt gặp trên mạng.

0 0 47

- vừa được xem lúc

Testing trong Javascript với Jest (Phần 1)

Hello 500 anh em, lại là mình đây. Chú bé coder yêu màu tím thích màu hồng và ghét sự giả dối đây .

0 0 249

- vừa được xem lúc

Destructuring assignment trong Javascript

Giới thiệu. . Hai cấu trúc dữ liệu được sử dụng nhiều nhất trong JavaScript là Object và Array. Các mảng cho phép chúng ta tập hợp các mục dữ liệu vào một danh sách có thứ tự.

0 0 23

- vừa được xem lúc

React Query (phần 1)

Xin chào các bạn, lại là mình đây, hôm này mình giới thiệu cho các bạn một package hữu ích khi làm việc với Reactjs. Chắc hẳn các bạn ai cũng từng gặp phải vấn đề khi làm việc với api.

0 0 27

- vừa được xem lúc

Building a WebRTC video broadcast using Javascript (P2)

Xin chào các bạn lại là tôi đây . Ở bài trước chúng ta đã triển khai Socket.

0 0 23

- vừa được xem lúc

Một bài toán xử lý mảng tưởng chừng đơn giản!

Xuân sang, Quang đang lang thang trang facebook thì bắt gặp một bạn hỏi bài toán này:. .

0 0 26