ES8 - 新函数

ES8 - 新函数 首页 / ES6入门教程 / ES8 - 新函数

本章重点介绍ES8中的新函数。

填充字符串

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

String.padStart()

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

string_value.padStart(targetLength [, padString])

padStart()函数接受两个参数,如下所示:

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

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

下面的示例声明一个字符串变量product_cost。该变量将从左开始用零填充,直到字符串的总长度为7。该示例还说明了如果未将值传递给第二个参数的情况,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()函数的语法如下:

链接:https://www.learnfk.comhttps://www.learnfk.com/es6/es8-newfeatures.html

来源:LearnFk无涯教程网

string_value.padEnd(targetLength [, padString])

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

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

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

下面的示例声明一个字符串变量product_cost。变量将从右开始用零填充,直到字符串的总长度为7。该示例还说明了如果未将值传递给第二个参数的情况,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运行时引擎会忽略在定义或调用函数时作为参数传递的结尾逗号。但是,有两个例外-

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

function test(,){}//语法错误: 缺少形式参数
(,)=>{}; //语法错误: expected expression, got ','
test(,) //语法错误 expected expression, got ','
  • 尾随逗号不能与其余参数一起使用。

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

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

<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.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 : 'Learnfk',
      lastName: 'Mohammad',
      get fullName(){
         return this.firstName + ':'+ this.lastName
      }
   }
   console.log(Object.getOwnPropertyDescriptors(student))
</script>

上面代码的输出将如下所述-

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

异步并等待

异步/等待是ES8中非常重要的函数,它是JavaScript中的Promises的语法糖。 await关键字与promise一起使用。此关键字可用于暂停执行函数,直到兑现承诺为止。如果已解决承诺,则await关键字将返回承诺的值;如果拒绝了承诺,则关键字将引发错误。等待函数只能在标记为异步的函数内使用。使用async关键字声明的函数始终返回promise。

下面给出了带有await的异步函数的语法-

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

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

Service Mesh实践指南 -〔周晶〕

从0开始学架构 -〔李运华〕

Spring Boot与Kubernetes云原生微服务实践 -〔杨波〕

性能工程高手课 -〔庄振运〕

NLP实战高手课 -〔王然〕

爱上跑步 -〔钱亮〕

陶辉的网络协议集训班02期 -〔陶辉〕

中间件核心技术与实战 -〔丁威〕

AI 应用实战课 -〔黄佳〕

好记忆不如烂笔头。留下您的足迹吧 :)