ES8 - Tính năng mới

Chương này tập trung vào các tính năng mới trong ES8.

Padding a String

ES8 giới thiệu hai hàm xử lý chuỗi để đệm một chuỗi. Các hàm này có thể được sử dụng để thêm khoảng trắng hoặc bất kỳ bộ ký tự mong muốn nào vào đầu và cuối của giá trị chuỗi.

Chuỗi. padStart ()

Hàm này đệm chuỗi hiện tại với một chuỗi đầu vào nhất định lặp đi lặp lại từ đầu cho đến khi chuỗi hiện tại đạt đến độ dài nhất định. Cú pháp của hàm padStart () được đưa ra dưới đây:

Cú pháp

string_value.padStart(targetLength [, padString])

Hàm padStart () chấp nhận hai tham số như sau:

• targetLength- Một giá trị số đại diện cho độ dài mục tiêu của chuỗi sau khi đệm. Nếu giá trị của tham số này nhỏ hơn hoặc bằng độ dài hiện có của chuỗi, giá trị chuỗi được trả về như cũ.

• padString- Đây là một tham số tùy chọn. Tham số này chỉ định các ký tự sẽ được sử dụng để đệm chuỗi. Giá trị chuỗi được đệm bằng khoảng trắng nếu không có giá trị nào được chuyển cho tham số này.

Thí dụ

Ví dụ sau khai báo một biến chuỗi, product_cost. Biến sẽ được đệm bằng các số không từ bên trái cho đến khi tổng độ dài của chuỗi là bảy. Ví dụ này cũng minh họa hành vi của hàm padStart (), nếu không có giá trị nào được truyền cho tham số thứ hai.

<script>

   //pad the String with 0
   let product_cost = '1699'.padStart(7,0)
   console.log(product_cost)
   console.log(product_cost.length)

   //pad the String with blank spaces
   let product_cost1 = '1699'.padStart(7)
   console.log(product_cost1)
   console.log(product_cost1.length)
</script>

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

0001699
7
1699
7

String.padEnd ()

Hàm này đệm chuỗi hiện tại với một chuỗi đầu vào nhất định lặp đi lặp lại từ cuối cho đến khi chuỗi hiện tại đạt đến độ dài được chỉ định.

Cú pháp của hàm padEnd () được đưa ra dưới đây:

Cú pháp

string_value.padEnd(targetLength [, padString])

Hàm padEnd () chấp nhận hai tham số:

• targetLength- Một giá trị số đại diện cho độ dài mục tiêu của chuỗi sau khi đệm. Nếu giá trị của tham số này nhỏ hơn hoặc bằng độ dài hiện có của chuỗi, giá trị chuỗi được trả về như cũ.

• padString- Đây là một tham số tùy chọn. Tham số này chỉ định các ký tự sẽ được sử dụng để đệm chuỗi. Giá trị chuỗi được đệm bằng khoảng trắng nếu không có giá trị nào được chuyển cho tham số này.

Thí dụ

Ví dụ sau khai báo một biến chuỗi, product_cost. Biến sẽ được đệm bằng các số không từ bên phải cho đến khi tổng độ dài của chuỗi là bảy. Ví dụ này cũng minh họa hành vi của hàm padStart (), nếu không có giá trị nào được truyền cho tham số thứ hai.

<script>

   //pad the string with x
   let product_cost = '1699'.padEnd(7,'x')
   console.log(product_cost)
   console.log(product_cost.length)
   
   //pad the string with spaces
   let product_cost1 = '1699'.padEnd(7)
   console.log(product_cost1)
   console.log(product_cost1.length)
</script>

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

1699xxx
7
1699
7

Dấu phẩy sau

Dấu phẩy ở cuối chỉ đơn giản là dấu phẩy sau mục cuối cùng trong danh sách. Dấu phẩy cuối còn được gọi là dấu phẩy cuối cùng.

Dấu phẩy và Mảng theo sau

Dấu phẩy cuối trong mảng được bỏ qua khi sử dụng vòng lặp Array.prototype.forEach.

Thí dụ

Ví dụ sau đây lặp lại một mảng có dấu phẩy ở cuối bằng vòng lặp foreach.

<script>

   let marks = [100,90,80,,]
   console.log(marks.length)
   console.log(marks)
   marks.forEach(function(e){ //ignores empty value in array
      console.log(e)
   })
</script>

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

4
[100, 90, 80, empty]
100
90
80

Dấu phẩy ở cuối và lệnh gọi hàm

Dấu phẩy ở cuối, được truyền dưới dạng đối số, khi xác định hoặc gọi một hàm bị công cụ thời gian chạy JavaScript bỏ qua. Tuy nhiên, có hai ngoại lệ -

• Các định nghĩa hoặc lệnh gọi hàm chỉ chứa dấu phẩy sẽ dẫn đến Lỗi cú pháp. Ví dụ: đoạn mã sau sẽ xuất hiện lỗi:

function test(,){} // SyntaxError: missing formal parameter
(,)=>{}; //SyntaxError: expected expression, got ','
test(,) //SyntaxError: expected expression, got ','

• Không thể sử dụng dấu phẩy ở cuối với các tham số còn lại.

function test(...arg1,){} // SyntaxError: parameter after rest parameter
(...arg1,)=>{} // SyntaxError: expected closing parenthesis, got ','

Thí dụ

Ví dụ sau khai báo một hàm có dấu phẩy ở cuối danh sách đối số.

<script>

   function sumOfMarks(marks,){ // trailing commas are ignored
      let sum=0;
      marks.forEach(function(e){
         sum+=e;
      })
      return sum;
   }

   console.log(sumOfMarks([10,20,30]))
   console.log(sumOfMarks([1,2,3],))// trailing comma is ignored
</script>

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

60
6

Đối tượng: entry () và giá trị ()

ES8 giới thiệu các phương thức mới sau đây cho kiểu Đối tượng tích hợp:

• Object.entries - Phương thức Object.entries () có thể được sử dụng để truy cập vào tất cả các thuộc tính của một đối tượng.

• Object.values() - Phương thức Object.values ​​() có thể được sử dụng để truy cập các giá trị của tất cả các thuộc tính của một đối tượng.

• Object.getOwnPropertyDescriptors()- Phương thức này trả về một đối tượng chứa tất cả các mô tả thuộc tính riêng của một đối tượng. Một đối tượng trống có thể được trả về nếu đối tượng không có bất kỳ thuộc tính nào.

Thí dụ

<script>
   const student ={
      firstName:'Kannan',
      lastName:'Sudhakaran'
   }
   console.log(Object.entries(student))
   console.log(Object.values(student))
</script>

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

[
["firstName", "Kannan"],
["lastName", "Sudhakaran"],
]
["Kannan", "Sudhakaran"]

Thí dụ

<script>
   const marks = [10,20,30,40]
   console.log(Object.entries(marks))
   console.log(Object.values(marks))
</script>

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

["0", 10],
["1", 20],
["2", 30],
["3", 40]
]
[10, 20, 30, 40]

Thí dụ

<script>
   const student = {
      firstName : 'Mohtashim',
      lastName: 'Mohammad',
      get fullName(){
         return this.firstName + ':'+ this.lastName
      }
   }
   console.log(Object.getOwnPropertyDescriptors(student))
</script>

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

{firstName: {value: "Mohtashim", writable: true, enumerable: true, configurable: true}
fullName: {get: ƒ, set: undefined, enumerable: true, configurable: true}
lastName: {value: "Mohammad", writable: true, enumerable: true, configurable: true}
}

Async và Await

Async / Await là một tính năng rất quan trọng trong ES8. Nó là một cú pháp cho Promises trong JavaScript. Từ khóa await được sử dụng với các lời hứa. Từ khóa này có thể được sử dụng để tạm dừng thực hiện một chức năng cho đến khi một lời hứa được giải quyết. Từ khóa await trả về giá trị của lời hứa nếu lời hứa được giải quyết trong khi nó phát ra lỗi nếu lời hứa bị từ chối. Chỉ có thể sử dụng hàm await bên trong các hàm được đánh dấu là không đồng bộ. Một hàm được khai báo bằng từ khóa async luôn trả về một lời hứa.

Cú pháp

Cú pháp của hàm async với await được đưa ra dưới đây:

async function function_name(){
   let result_of_functionCall = await longRunningMethod();
}
//invoking async function

function_name().then(()=>{})
   .catch(()=>{})

Hãy xem xét một ví dụ có một hàm không đồng bộ mất hai giây để thực thi và trả về một giá trị chuỗi. Hàm có thể được gọi theo hai cách như hình dưới đây

• Sử dụng Promise.then ()
• Sử dụng aync / await.

Đoạn mã dưới đây cho thấy cách gọi hàm không đồng bộ bằng cú pháp ES6 truyền thống - Prom.then ()

<script>
   function fnTimeConsumingWork(){
      return new Promise((resolve,reject)=>{
         setTimeout(() => {
            resolve('response is:2 seconds have passed')
         }, 2000);
      })
   }

   fnTimeConsumingWork().then(resp=>{
      console.log(resp)
   })
   console.log('end of script')
</script>

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

end of script
response is:2 seconds have passed

Đoạn mã dưới đây cho thấy một cách gọi hàm không đồng bộ rõ ràng hơn bằng cú pháp ES8 - async / await

<script>
   function fnTimeConsumingWork(){
      return new Promise((resolve,reject)=>{
         setTimeout(() => {
            resolve('response is:2 seconds have passed')
         }, 2000);
      })
   }
   async function my_AsyncFunc(){
      console.log('inside my_AsyncFunc')
      const response = await fnTimeConsumingWork();// clean and readable
      console.log(response)
   }
   my_AsyncFunc();
   console.log("end of script")
</script>

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

inside my_AsyncFunc
end of script
response is:2 seconds have passed

Hứa hẹn chuỗi với Async / await

Ví dụ sau thực hiện chuỗi hứa bằng cách sử dụng cú pháp async / await.

Trong ví dụ này, add_positivenos_async()hàm thêm hai số không đồng bộ và từ chối nếu các giá trị âm được chuyển. Kết quả từ lệnh gọi hàm không đồng bộ hiện tại được truyền dưới dạng tham số cho các lệnh gọi hàm tiếp theo.

<script>
   function add_positivenos_async(n1, n2) {
      let p = new Promise(function (resolve, reject) {
         if (n1 >= 0 && n2 >= 0) {
            //do some complex time consuming work
            resolve(n1 + n2)
         } else
            reject('NOT_Postive_Number_Passed')
      })
      return p;
   }
   async function addInSequence() {
      let r1 = await add_positivenos_async(10, 20)
      console.log("first result", r1);
      let r2 = await add_positivenos_async(r1, r1);
      console.log("second result", r2)
      let r3 = await add_positivenos_async(r2, r2);
      console.log("third result", r3)
      return "Done Sequence"
   }
   addInSequence().then((r)=>console.log("Async :",r));
   console.log('end')
</script>

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

end
first result 30
second result 60
third result 120
Async : Done Sequence