ES9 - Tính năng mới

Sau đây, chúng ta sẽ tìm hiểu về các tính năng mới trong ES9. Chúng ta hãy bắt đầu bằng cách tìm hiểu về máy phát điện không đồng bộ.

Máy tạo không đồng bộ và lặp lại

Máy phát điện không đồng bộ có thể được thực hiện không đồng bộ bằng cách sử dụng asynctừ khóa. Cácsyntax để xác định trình tạo không đồng bộ được đưa ra dưới đây:

async function* generator_name() {
   //statements
}

Thí dụ

Ví dụ sau đây cho thấy một trình tạo không đồng bộ trả về Promise trên mỗi lần gọi đến next() phương pháp của máy phát điện.

<script>
   async function* load(){
      yield await Promise.resolve(1);
      yield await Promise.resolve(2);
      yield await Promise.resolve(3);
   }
   
   let l = load();
   l.next().then(r=>console.log(r))
   l.next().then(r=>console.log(r))
   l.next().then(r=>console.log(r))
   l.next().then(r=>console.log(r))
</script>

Đầu ra của đoạn mã trên sẽ như sau:

{value: 1, done: false}
{value: 2, done: false}
{value: 3, done: false}
{value: undefined, done: true}

cho sự chờ đợi của vòng lặp

Không thể lặp lại các mục lặp không đồng bộ bằng cách sử dụng for..of loopcú pháp khi chúng trả về lời hứa. ES9 giới thiệufor await of loop hỗ trợ asynchronous iteration.

Cú pháp để sử dụng for await of loop được đưa ra bên dưới, nơi,

• Trên mỗi lần lặp, một giá trị của một thuộc tính khác nhau được gán cho variable và một biến có thể được khai báo bằng const, let hoặc var.

• iterable - Đối tượng có các thuộc tính có thể lặp lại sẽ được lặp lại.

for await (variable of iterable) {
   statement
}

Thí dụ

Ví dụ sau cho thấy việc sử dụng vòng lặp for await để lặp lại trình tạo không đồng bộ.

<script>
   async function* load(){
      yield await Promise.resolve(1);
      yield await Promise.resolve(2);
      yield await Promise.resolve(3);
   }

   async function test(){
      for await (const val of load()){
         console.log(val)
      }
   }
   test();
   console.log('end of script')
</script>

Đầu ra của đoạn mã trên sẽ như hình dưới đây:

end of script
1
2
3

Thí dụ

Ví dụ sau đây lặp lại một mảng bằng cách sử dụng vòng lặp for await.

<script>
   async function fntest(){
      for await (const val of [10,20,30,40]){
         console.log(val)
      }
   }
   fntest();
   console.log('end of script')
</script>

Đầu ra của đoạn mã trên sẽ như sau:

end of script
10
20
30
40

Thuộc tính Rest / Spread

ES9 hỗ trợ việc sử dụng các toán tử Rest và Spread với các Đối tượng.

Ví dụ: Đối tượng và Toán tử Rest

Ví dụ sau đây cho thấy việc sử dụng toán tử nghỉ với một đối tượng. Giá trị của thuộc tính age của sinh viên được sao chép vào biến age trong khi giá trị của các thuộc tính còn lại được sao chép vào biến khác bằng cú pháp rest `... '.

<script>
   const student = {
      age:10,
      height:5,
      weight:50
   }
   const {age,...other} = student;
   console.log(age)
   console.log(other)
</script>

Đầu ra của đoạn mã trên sẽ như dưới đây:

10
{height: 5, weight: 50}

Ví dụ: Toán tử Object và Spread

Toán tử lây lan có thể được sử dụng để kết hợp nhiều đối tượng hoặc nhân bản đối tượng. Điều này được thể hiện trong ví dụ sau:

<script>
   //spread operator
   const obj1 = {a:10,b:20}
   const obj2={c:30}
   //clone obj1
   const clone_obj={...obj1}
   //combine obj1 and obj2
   const obj3 = {...obj1,...obj2}
   console.log(clone_obj)
   console.log(obj3)
</script>

Đầu ra của đoạn mã trên sẽ như được nêu bên dưới:

{a: 10, b: 20}
{a: 10, b: 20, c: 30}

Lời hứa: cuối cùng ()

Các finally()được thực hiện bất cứ khi nào một lời hứa được giải quyết, bất kể kết quả của nó. Hàm này trả về một lời hứa. Nó có thể được sử dụng để tránh trùng lặp mã trong cả lời hứathen() và catch() người xử lý.

Cú pháp

Cú pháp được đề cập dưới đây dành cho hàm finally().

promise.finally(function() {
});
promise.finally(()=> {
});

Thí dụ

Ví dụ sau đây khai báo một hàm không đồng bộ trả về bình phương của một số dương sau 3 giây trễ. Hàm ném ra một lỗi nếu một số âm được chuyển qua. Các câu lệnh trong khối cuối cùng được thực thi trong cả hai trường hợp, cho dù lời hứa bị từ chối hay giải quyết.

<script>
   let asyncSquareFn = function(n1){
      return new Promise((resolve,reject)=>{
         setTimeout(()=>{
            if(n1>=0){
               resolve(n1*n1)
            }
            else reject('NOT_POSITIVE_NO')
         },3000)
      })
   }
   console.log('Start')

   asyncSquareFn(10)//modify to add -10
   .then(result=>{
      console.log("result is",result)
   }).catch(error=>console.log(error))
   .finally(() =>{
      console.log("inside finally")
      console.log("executes all the time")
   })

   console.log("End");
</script>

Đầu ra của đoạn mã trên sẽ như hình dưới đây

Start
End
//after 3 seconds
result is 100
inside finally
executes all the time

Bản sửa đổi văn bản mẫu

Kể từ ES7, các mẫu được gắn thẻ tuân theo các quy tắc của chuỗi thoát sau:

• Các chuỗi thoát Unicode được biểu diễn bằng cách sử dụng "\u", ví dụ \u2764\uFE0F

• Trình tự thoát điểm mã Unicode được biểu diễn bằng "\u{}", ví dụ \u{2F}

• Chuỗi thoát thập lục phân được biểu diễn bằng cách sử dụng "\x", ví dụ \xA8

• Ví dụ: chuỗi thoát theo nghĩa đen bát phân được biểu diễn bằng cách sử dụng "" và theo sau bởi một hoặc nhiều chữ số \125

Trong ES2016 trở về trước, nếu các chuỗi thoát không hợp lệ được sử dụng với các hàm được gắn thẻ, Lỗi cú pháp sẽ được hiển thị như hình dưới đây:

//tagged function with an invalid unicode sequence
myTagFn`\unicode1`
// SyntaxError: malformed Unicode character escape sequence

Tuy nhiên, không giống như các phiên bản trước, ES9 phân tích chuỗi unicode không hợp lệ thành không xác định và không gây ra lỗi. Điều này được thể hiện trong ví dụ sau:

<script>
   function myTagFn(str) {
      return { "parsed": str[0] }
   }
   let result1 =myTagFn`\unicode1` //invalid unicode character
   console.log(result1)
   let result2 =myTagFn`\u2764\uFE0F`//valid unicode
   console.log(result2)
</script>

Đầu ra của đoạn mã trên sẽ như hình dưới đây:

{parsed: undefined}
{parsed: "❤️"}

Chuỗi thô

ES9 giới thiệu một thuộc tính đặc biệt raw, có sẵn trên đối số đầu tiên của hàm thẻ. Thuộc tính này cho phép bạn truy cập các chuỗi thô khi chúng được nhập mà không cần xử lý các chuỗi thoát.

Thí dụ

<script>
   function myTagFn(str) {
      return { "Parsed": str[0], "Raw": str.raw[0] }
   }
   let result1 =myTagFn`\unicode`
   console.log(result1)

   let result2 =myTagFn`\u2764\uFE0F`
   console.log(result2)
</script>

Đầu ra của đoạn mã trên sẽ như sau:

{Parsed: undefined, Raw: "\unicode"}
{Parsed: "❤️", Raw: "\u2764\uFE0F"}

Tính năng Biểu thức chính quy

Trong biểu thức chính quy, toán tử dấu chấm hoặc dấu chấm được sử dụng để khớp với một ký tự. Các. dot operator bỏ qua các ký tự ngắt dòng như \n, \r như thể hiện trong ví dụ dưới đây -

console.log(/Tutorials.Point/.test('Tutorials_Point')); //true
console.log(/Tutorials.Point/.test('Tutorials\nPoint')); //false
console.log(/Tutorials.Point/.test('Tutorials\rPoint')); //false

Một mẫu biểu thức chính quy được biểu diễn dưới dạng / regular_expression /.Phương thức test () nhận một tham số chuỗi và tìm kiếm mẫu regex. Trong ví dụ trên,test() methodtìm kiếm mẫu bắt đầu bằng Hướng dẫn, tiếp theo là bất kỳ ký tự đơn nào và kết thúc bằng Điểm. Nếu chúng ta sử dụng\n hoặc là \r trong chuỗi đầu vào giữa Tutorials và Point phương thức test () sẽ trả về false.

true
false
false

ES9 giới thiệu một lá cờ mới - DotAllFlag (\s)có thể được sử dụng với Regex để đối sánh các biểu tượng cảm xúc và đầu cuối dòng. Điều này được thể hiện trong ví dụ sau:

console.log(/Tutorials.Point/s.test('Tutorials\nPoint'));
console.log(/Tutorials.Point/s.test('Tutorials\rPoint'));

Đầu ra của đoạn mã trên sẽ như được đề cập bên dưới:

true
true

Nhóm Chụp đã Đặt tên

Trước ES9, các nhóm thu thập được truy cập bởi các chỉ mục. ES9 cho phép chúng ta gán tên cho các nhóm bắt. Cú pháp tương tự được đưa ra bên dưới:

(?<Name1>pattern1)

Thí dụ

const birthDatePattern = /(?<myYear>[0-9]{4})-(?<myMonth>[0-9]{2})/;
const birthDate = birthDatePattern.exec('1999-04');
console.log(birthDate.groups.myYear);
console.log(birthDate.groups.myMonth);

Đầu ra của đoạn mã trên như hình dưới đây:

1999
04