ES8 - 新特性

本章重点介绍 ES8 中的新特性。

填充字符串

ES8 引入了两个字符串处理函数来填充字符串。这些函数可用于在字符串值的开头和结尾添加空格或任何所需的字符集。

细绳。开始（）

该函数从头开始用给定的输入字符串重复填充当前字符串，直到当前字符串达到给定的长度。padStart() 函数的语法如下 -

句法

string_value.padStart(targetLength [, padString])

padStart() 函数接受两个参数，如下所示 -

targetLength - 一个数值，表示填充后字符串的目标长度。如果该参数的值小于或等于字符串的现有长度，则按原样返回字符串值。
padString - 这是一个可选参数。此参数指定应用于填充字符串的字符。如果没有值传递给此参数，则字符串值将用空格填充。

例子

以下示例声明一个字符串变量product_cost。该变量将从左侧开始用零填充，直到字符串的总长度为 7。该示例还说明了在没有值传递给第二个参数的情况下 padStart() 函数的Behave。

<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>

上述代码的输出如下 -

String.padEnd()

该函数从末尾开始用给定的输入字符串重复填充当前字符串，直到当前字符串达到指定的长度。

padEnd() 函数的语法如下 -

句法

string_value.padEnd(targetLength [, padString])

padEnd() 函数接受两个参数 -

targetLength - 一个数值，表示填充后字符串的目标长度。如果该参数的值小于或等于字符串的现有长度，则按原样返回字符串值。
padString - 这是一个可选参数。此参数指定应用于填充字符串的字符。如果没有值传递给此参数，则字符串值将用空格填充。

例子

以下示例声明一个字符串变量product_cost。该变量将从右开始用零填充，直到字符串的总长度为 7。该示例还说明了在没有值传递给第二个参数的情况下 padStart() 函数的Behave。

<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>

上述代码的输出如下 -

尾随逗号

尾随逗号只是列表中最后一项之后的逗号。尾随逗号也称为最后逗号。

尾随逗号和数组

使用 Array.prototype.forEach 循环时会跳过数组中的尾随逗号。

例子

以下示例使用 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>

上述代码的输出如下所示 -

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

尾随逗号和函数调用

在定义或调用函数时，JavaScript 运行时引擎会忽略作为参数传递的尾随逗号。但是，有两个例外 -

仅包含逗号的函数定义或调用将导致语法错误。例如，以下代码片段将引发错误 -

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

尾随逗号不能与剩余参数一起使用。

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

例子

以下示例声明了一个在参数列表中带有尾随逗号的函数。

<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>

上述代码的输出如下 -

60
6

对象：entries() 和 value()

ES8 向内置对象类型引入了以下新方法 -

Object.entries - Object.entries() 方法可用于访问对象的所有属性。
Object.values() - Object.values() 方法可用于访问对象的所有属性的值。
Object.getOwnPropertyDescriptors() - 此方法返回一个包含对象所有自己的属性描述符的对象。如果对象没有任何属性，则可能会返回空对象。

例子

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

上述代码的输出如下 -

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

例子

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

上述代码的输出如下 -

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

例子

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

上述代码的输出如下 -

{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/Await 是 ES8 中一个非常重要的特性，它是 JavaScript 中 Promise 的语法糖。wait 关键字与 Promise 一起使用。该关键字可用于暂停函数的执行，直到承诺得到解决。如果 Promise 被解析，await 关键字将返回 Promise 的值；如果 Promise 被拒绝，它会抛出错误。wait 函数只能在标记为 async 的函数内部使用。使用 async 关键字声明的函数始终返回一个 Promise。

句法

带await 的async 函数的语法如下：

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

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

考虑一个示例，该示例具有一个异步函数，该函数需要两秒的时间来执行并返回一个字符串值。该函数可以通过两种方式调用，如下所示

使用promise.then()
使用 aync/await。

下面的代码显示了使用传统 ES6 语法调用异步函数 - Promise.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>

上述代码的输出如下 -

end of script
response is:2 seconds have passed

下面的代码展示了使用 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>

上述代码的输出如下 -

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

使用 Async/await 进行 Promise 链接

以下示例使用 async/await 语法实现 Promise 链。

在此示例中，add_ Positivenos_async()函数异步添加两个数字，如果传递负值则拒绝。当前异步函数调用的结果作为参数传递给后续函数调用。

<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>

上述代码的输出如下所示：

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