ES8 - 新功能

本章重点介绍 ES8 中的新功能。

填充字符串

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

String.padStart()

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

语法

string_value.padStart(targetLength [, padString])

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

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

• padString − 这是一个可选参数。此参数指定应使用哪些字符来填充字符串。如果未向此参数传递任何值，则字符串值将用空格填充。

示例

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

<script>

    //用 0 填充字符串
    let product_cost = '1699'.padStart(7,0)
    console.log(product_cost)
    console.log(product_cost.length)
    
    //用空格填充字符串
    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>

    //用 x 填充字符串
    let product_cost = '1699'.padEnd(7,'x')
    console.log(product_cost)
    console.log(product_cost.length)
    
    //用空格填充字符串
    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){ //忽略数组中的空值
      console.log(e)
   })
</script>

上述代码的输出将如下所示 −

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

尾随逗号和函数调用

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

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

function test(,){} // SyntaxError:缺少形式参数
(,)=>{}; //SyntaxError:预期表达式，结果为 ','
test(,) //SyntaxError:预期表达式，结果为 ','

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

function test(...arg1,){} // SyntaxError:剩余参数后的参数
(...arg1,)=>{} // SyntaxError:预期右括号，结果为 ','

示例

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

<script>

   function sumOfMarks(marks,){ // 忽略尾随逗号
      let sum=0;
      marks.forEach(function(e){
         sum+=e;
      })
      return sum;
   }

   console.log(sumOfMarks([10,20,30]))
   console.log(sumOfMarks([1,2,3],))// 尾随逗号被忽略
</script>

上述代码的输出如下 −

60
6

Object:entries() 和 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 中 Promises 的语法糖。await 关键字与Promise一起使用。此关键字可用于暂停函数的执行，直到Promise得到解决。如果Promise得到解决，await 关键字将返回Promise的值，如果Promise被拒绝，它将抛出错误。await 函数只能在标记为 async 的函数内使用。使用 async 关键字声明的函数始终返回Promise。

语法

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

async function function_name(){
    let result_of_functionCall = await longRunningMethod();
}
//调用异步函数

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) {
            //做一些复杂耗时的工作
            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