ES8：2017年JavaScript语言的新增功能

by Flavio H. Freitas

Flavio H.Freitas着

ES8：2017年JavaScript语言的新增功能 (ES8: What’s new in the JavaScript language in 2017)

ES8 is live! Released earlier this summer, ES8 (also called ES2017) offers new ways of coding with JavaScript. Let's explore them.

ES8上线了！ ES8(也称为ES2017)于今年夏天初发布，提供了使用JavaScript进行编码的新方法。 让我们探索它们。

If you have the latest version of Chrome, open the console and let's code together.

如果您使用的是最新版本的Chrome，请打开控制台，然后一起编写代码。

Object.values() (Object.values())

Access all the values of our object without any complication. Here’s an example:

访问我们对象的所有值而无需任何复杂操作。 这是一个例子：

const countries = {    BR: 'Brazil',    DE: 'Germany',    RO: 'Romania',    US: 'United States of America'};

Object.values(countries); // ['Brazil', 'Germany', 'Romania', 'United States of America']

对象条目 (Object.entries)

Turn your object attribute in an array of attributes:

将您的对象属性转换为属性数组 ：

const countries = {    BR: 'Brazil',    DE: 'Germany',    RO: 'Romania',    US: 'United States of America'};

Object.entries(countries);

// [['BR', 'Brazil'], ['DE', 'Germany'], ['RO', 'Romania'], ['US','United States of America']]

字符串填充(padStart和padEnd) (String padding (padStart and padEnd))

This returns the passed string adding the pad and the beginning or in the end of it. The function definition is:

这将返回传递的字符串，其中添加了填充以及填充的开始或结尾。 函数定义为：

'string'.padStart(targetLength, padString)

'string'.padEnd(targetLength, padString)

We can make:

我们可以做：

'0.10'.padStart(10); // it return a string of length 10, padding empty spaces in the beginning

'hi'.padStart(1);            // 'hi''hi'.padStart(5);            // '   hi''hi'.padStart(5, 'abcd');    // 'abchi''hi'.padStart(10, 'abcd');   // 'abcdabcdhi'

'loading'.padEnd(10, '.');   // 'loading...'

// useful example making things easier to read'0.10'.padStart(12);         // '       0.10''23.10'.padStart(12);        // '      23.10''12,330.10'.padStart(12);    // '  12,330.10'

Object.getOwnPropertyDescriptors() (Object.getOwnPropertyDescriptors())

It returns all own (non-inherited) property descriptors of an object. The attributes of the return object can be: value, writable, get, set, configurable and enumerable.

它返回对象的所有自己的(非继承)属性描述符。 返回对象的属性可以是： value ， writable ， get ， set ， configurable和enumerable 。

const obj = {    name: 'Pablo',    get foo() { return 42; }};

Object.getOwnPropertyDescriptors(obj); {//  "name": {//     "value": "Pablo",//     "writable":true,//     "enumerable":true,//     "configurable":true//  },//  "foo":{//     "enumerable":true,//     "configurable":true,//     "get": function foo()//     "set": undefined//  }// }

One practical example is: JavaScript has a method to copy properties Object.assign(). It copies the property whose key is key. Like this:

一个实际的示例是：JavaScript具有一种复制属性Object.assign() 。 它复制键为key的属性。 像这样：

const value = source[key]; // gettarget[key] = value;       // set

And in some cases it fails because it doesn't properly copy the properties with non-default attributes such as getters, setters and non-writable properties.

在某些情况下，它会失败，因为它无法正确复制具有非默认属性的属性，如getter，setter和non-writable属性。

For example:

例如：

const objTarget = {};const objSource = {    set greet(name) { console.log('hey, ' + name); }};Object.assign(objTarget, objSource);

objTarget.greet = 'love';     // trying to set fails, sets greet = 'love'

Solving:

解决方法：

const objTarget = {};const objSource = {    set greet(name) { console.log('hey, ' + name); }};Object.defineProperties(objTarget,                     Object.getOwnPropertyDescriptors(objSource));

objTarget.greet = 'love'; // prints 'hey, love'

函数参数列表和调用中的尾部逗号 (Trailing commas in function parameter lists and calls)

This is a syntax change. It allows us to write a valid function declaration with comma in the end.

这是语法更改。 最后，我们可以使用逗号编写有效的函数声明。

getDescription(name, age,) { ... }

异步功能(异步和等待) (Async functions (async and await))

This makes it much easier to work with asynchronous functions:

这使得使用异步函数更加容易：

function loadExternalContent() {    return new Promise((resolve, reject) => {        setTimeout(() => {            resolve('hello');        }, 3000);    });}

async function getContent() {    const text = await loadExternalContent();    console.log(text);}

console.log('it will call function');getContent();console.log('it called function');

// it prints:

'it will call function' // synchronous'it called function'    // synchronous'hello'                 // asynchronous (after 3 seconds)

共享内存和原子 (Shared memory and atomics)

According to the specification:

根据规格 ：

"Shared memory is being exposed in the form of a new SharedArrayBuffer type; The new global Atomics object provides atomic operations on shared memory locations, including operations that can be used to create blocking synchronization primitives."

“共享内存以新的SharedArrayBuffer类型的形式公开；新的全局Atomics对象在共享内存位置上提供了原子操作，包括可用于创建阻塞同步原语的操作。”

This means:

这表示：

Shared memory: we can allow multiple threads read and write the same data with the new SharedArrayBuffer constructor.

共享内存：我们可以允许多个线程使用新的SharedArrayBuffer构造函数读取和写入相同的数据。

Atomics: We can use the Atomics object to make sure nothing that is being written or read will be interrupted in the middle of the process. So the operations are finished before a the next one starts.

Atomics：我们可以使用Atomics对象来确保在此过程中不会中断正在写入或读取的任何内容。 因此，操作将在下一个操作开始之前完成。

If you enjoyed this article, be sure to like it give me a lot of claps — it means the world to the writer ? And follow me if you want to read more articles about Culture, Technology and Startups.

如果您喜欢这篇文章，请确保喜欢它给了我很多鼓掌-这对作家来说意味着世界？ 如果您想阅读更多有关文化，技术和创业的文章，请跟随我 。

Flávio H. de Freitas is an Entrepreneur, Engineer, Tech lover, Dreamer and Traveler. Has worked as CTO in Brazil, Silicon Valley and Europe.

FlávioH. de Freitas是一位企业家，工程师，技术爱好者，梦想家和旅行者。 曾在巴西 ， 硅谷和欧洲担任首席技术官 。

翻译自: https://www.freecodecamp.org/news/es8-the-new-features-of-javascript-7506210a1a22/