Is es2017 es6 or es8?

es2017 is es8. The full name of es is "ECMAScript", which is a universal scripting language implemented according to the ECMA-262 standard. The version officially released in June 2017 is officially called ECMAScript2017 (ES2017). Because it is the 8th version of ECMAScript, it can Referred to as es8.

The operating environment of this tutorial: Windows 7 system, ECMAScript version 6, Dell G3 computer.

Introduction to "es"

The full name of es is "ECMAScript", which is a universal scripting language implemented according to the ECMA-262 standard, ECMA The -262 standard mainly stipulates the syntax, types, statements, keywords, reserved words, operators, objects and other parts of the language. Every time you see ES followed by a number, it's a different version of ECMAScript.

es8/ ES2017

es8 stands for ECMAScript8 (the 8th version of ECMAScript) and is a JavaScript language officially released in June 2017 standard, officially called ECMAScript 2017 (ES2017).

Compared to ES6, ES8 is a smaller version of JavaScript, but it still introduces very useful features:

• String padding (padStart and padEnd)

• Object.values

• Object.entries

• Object.getOwnPropertyDescriptors()

• Trailing commas in function parameter lists and calls

• Async Functions

• Shared memory and Atomics

String padding (padStart and padEnd)

The purpose of string padding is to add characters Add characters to the string to make the string reach the specified length.

ES2017 introduces two String methods: padStart() and padEnd().

JavaScript code:

padStart(targetLength [, padString])
padEnd(targetLength [, padString])

Simple use:

##Object.values()

This method returns an array containing all the object's own property values.

Using:

JavaScript code:

const person = { name: 'Fred', age: 87 }
Object.values(person) // ['Fred', 87]

Object.values() Also works with arrays:

JavaScript code:

const people = ['Fred', 'Tony']
Object.values(people) // ['Fred', 'Tony']

Object.entries()

This method returns an array containing all the properties of the object itself, as

[key, value] Array of pairs.

Using:

JavaScript code:

const person = { name: 'Fred', age: 87 }
Object.entries(person) // [['name', 'Fred'], ['age', 87]]

Object.entries() Also works with arrays:

JavaScript code:

const people = ['Fred', 'Tony']
Object.entries(people) // [['0', 'Fred'], ['1', 'Tony']]

Object.getOwnPropertyDescriptors()

This method returns all of the object's own (non-inherited) property descriptors.

Any object in JavaScript has a set of properties, and each property has a descriptor.

The descriptor is a set of attributes of a property, which consists of the following subsets:

• value: The value of the attribute
• writable: true means that the property can be modified
• get: The getter function of the property, when reading the property Call
• set: the setter function of the property, call
• configurable when the property sets the value: if it is false, then the property cannot be deleted, nor can any property be changed except the value
• enumerable: true## if the property is enumerable

#Object.getOwnPropertyDescriptors(obj)

Accepts an object and returns an object with a set of descriptors.

What is the use of this method?

ES2015 brought us the

Object.assign()

method, which copies all enumerable properties from one or more objects and returns a new object. But there is a problem, it cannot correctly copy properties with non-default attributes (getters, setters, non-writable properties, etc.).

If an object has only one setter, it cannot be copied correctly to a new object using

Object.assign()

. For example:

JavaScript code:

const person1 = {
    set name(newName) {
        console.log(newName)
    }
}

The following code will not work:

JavaScript code:

const person2 = {}
Object.assign(person2, person1)

But the following The code will work:

JavaScript code:

const person3 = {}
Object.defineProperties(person3,
  Object.getOwnPropertyDescriptors(person1))

You can test it through a simple console and you will see:

JavaScript code:

person1.name = 'x'
"x"
 
person2.name = 'x'
 
person3.name = 'x'
"x"

person2 丢失了 setter ，因为它没有复制过来。

使用 Object.create() 对浅拷贝对象也有同样的限制。

函数参数列表和调用中的尾随逗号

此功能允许在函数声明和函数调用中使用尾随逗号：

JavaScript 代码:

const doSomething = (var1, var2,) => {
  //...
}
doSomething('test2', 'test2',)

这一变化将鼓励开发人员停止丑陋的“行以逗号开头”的习惯。

Async Functions (异步函数)

ES2017 引入了 Async Functions (异步函数) 的概念，这是 ECMAScript 版本中引入的最重要的变化。

Async Functions (异步函数) 是 promises 和 generators(生成器) 的组合，以简化 promises 调用，提过代码的可读性，但是不打破 promises 链式调用的限制。

为什么有用

这是对 promises 更高层次的抽象。

当 Promise 在 ES2015 中引入时，它们的目的是解决异步代码的问题，并且他们做到了。但在 ES2015 和 ES2017 相间隔的两年时间里，很明显， Promise 并不是最终的解决方案。

引入 Promise 是为了解决著名的 回调地狱 问题，但它们引入了自己的复杂性和语法复杂性。它们是良好的原语，可以向开发人员公开更好的语法：那就是Async Functions (异步函数)。

一个简单的例子

使用异步函数的代码可以写成：

JavaScript 代码:

function doSomethingAsync() {
    return new Promise((resolve) => {
        setTimeout(() => resolve('I did something'), 3000)
    })
}
async function doSomething() {
    console.log(await doSomethingAsync())
}
console.log('Before')
doSomething()
console.log('After')

上面的代码将在浏览器控制台中打印以下内容：

JavaScript 代码:

Before
After
I did something //after 3s

链式调用多个异步函数

异步函数可以非常容易地链式调用，并且语法比简单的 Promise 更具可读性：

JavaScript 代码:

function promiseToDoSomething() {
    return new Promise((resolve)=>{
        setTimeout(() => resolve('I did something'), 10000)
    })
}
async function watchOverSomeoneDoingSomething() {
    const something = await promiseToDoSomething()
    return something + ' and I watched'
}
async function watchOverSomeoneWatchingSomeoneDoingSomething() {
    const something = await watchOverSomeoneDoingSomething()
    return something + ' and I watched as well'
}
watchOverSomeoneWatchingSomeoneDoingSomething().then((res) => {
    console.log(res)
})

共享内存 和 Atomics

WebWorkers 用于在浏览器中创建多线程程序。

他们通过事件提供消息传递协议。 从ES2017开始，您可以使用 SharedArrayBuffer 在 Web worker 及其创建者之间创建共享内存数组。

由于我们不知道向共享内存部分写入要花费多少时间来传播，因此 Atomics 是一种在读取值时执行该操作的方法，并且完成了任何类型的写入操作。

【相关推荐：javascript视频教程、编程视频】

The above is the detailed content of Is es2017 es6 or es8?. For more information, please follow other related articles on the PHP Chinese website!