教程 > ES6 教程 > ES6 高级 阅读：18

ES8 新特性

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

填充字符串

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

String. padStart()

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

string_value.padStart(targetLength [, padString])

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

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

示例

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

// 用 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)

上述代码将输出如下结果

0001699
7
1699
7

String.padEnd()

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

padEnd() 函数的语法如下所示

string_value.padEnd(targetLength [, padString])

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

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

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

// 用 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)

上述代码将输出如下结果

1699xxx
7
1699
7

尾随逗号

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

尾随逗号和数组

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

以下示例使用 foreach 循环迭代带有尾随逗号的数组。

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

上述代码将输出如下结果

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

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

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

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

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],)) // 尾随逗号被忽略

上述代码将输出如下结果

60
6

Object:entries() 和 values()

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

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

示例

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

上述代码将输出如下结果

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

我们继续看下面的示例

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

上述代码将输出如下结果

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

继续下面最后一个示例

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

上述代码将输出如下结果

{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 被 resolved，则 await 关键字返回 promise 的值，而如果 promise 被拒绝，则它会抛出错误。 await 函数只能在标记为异步的函数内部使用。 使用 async 关键字声明的函数总是返回一个承诺。

语法

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

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

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

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

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

下面的代码显示了使用传统 ES6 语法调用异步函数 - promise.then()

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

上述代码将输出如下结果

end of script
response is:2 seconds have passed

下面的代码展示了一种使用 ES8 语法调用异步函数的更简洁的方法 - async/await

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

上述代码将输出如下结果

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

使用 Async/await 的 Promise 链接

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

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

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

上述代码将输出如下结果

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

查看笔记

扫码一下
查看教程更方便