ES8 新特性

上一页
下一页

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

字符串填充

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

String.padStart()

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

语法

string_value.padStart(targetLength [, padString])

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

  • targetLength - 一个数值，表示填充后字符串的目标长度。如果此参数的值小于或等于字符串的现有长度，则按原样返回字符串值。

  • padString - 这是一个可选参数。此参数指定应用于填充字符串的字符。如果未向此参数传递值，则字符串值将用空格填充。

示例

以下示例声明一个字符串变量 product_cost。该变量将从左侧用零填充，直到字符串的总长度为七。该示例还说明了如果未向第二个参数传递值，padStart() 函数的行为。

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

以上代码的输出如下：

0001699
7
1699
7

String.padEnd()

此函数使用给定的输入字符串从结尾重复填充当前字符串，直到当前字符串达到指定的长度。

padEnd() 函数的语法如下：

语法

string_value.padEnd(targetLength [, padString])

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

  • targetLength - 一个数值，表示填充后字符串的目标长度。如果此参数的值小于或等于字符串的现有长度，则按原样返回字符串值。

  • padString - 这是一个可选参数。此参数指定应用于填充字符串的字符。如果未向此参数传递值，则字符串值将用空格填充。

示例

以下示例声明一个字符串变量 product_cost。该变量将从右侧用零填充，直到字符串的总长度为七。该示例还说明了如果未向第二个参数传递值，padStart() 函数的行为。

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

以上代码的输出如下：

1699xxx
7
1699
7

尾随逗号

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

尾随逗号和数组

使用 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 运行时引擎忽略。但是，有两个例外：

  • 仅包含逗号的函数定义或调用将导致 SyntaxError。例如，以下代码段将抛出错误：

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

  • 尾随逗号不能与 rest 参数一起使用。

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

Object.entries() 和 Object.values()

ES8 向内置 Object 类型引入了以下新方法：

  • 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

Async/Await 是 ES8 中一个非常重要的特性。它是 JavaScript 中 Promise 的语法糖。await 关键字与 promise 一起使用。此关键字可用于暂停函数的执行，直到 promise 完成。如果 promise 已完成，则 await 关键字返回 promise 的值；如果 promise 已拒绝，则抛出错误。await 函数只能在标记为 async 的函数内使用。使用 async 关键字声明的函数始终返回一个 promise。

语法

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

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

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

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

  • 使用 promise.then()
  • 使用 async/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
打印页面
上一页
下一页
广告