07月20, 2017

ES8新特性

alt

TC39在7月末正式发布EcmaScript 8或者叫做 EcmaScript 2017。在过去的一年里,我们就讨论了很多关于EcmaScipt标准的事情。目前,每年发布一个新的ES规范版本标准。2015年发布ES6,2016年发布ES7,但是你还记得ES5是什么时候发布的么?发生在2009年,在JavaScript奇迹般兴起之前。

所以我们将JavaScript演变过程视为一种稳定语言的发展史,现在就需要将ES8也列如到我们的词库了。

alt

如果你是个大牛,来,深呼吸,读一读webPDF 版的规范。如果不是,在这篇文章中我们将通过代码例子简述ES8主要的新特性。

字符串填充

这一部分为String对象增加了两个方法:padStart 和 padEnd。顾名思义,这两个方法的目的就是填充字符串的开始位置和结束位置,以实现让结果中的字符串达到给定长度。你可以用具体的字符或字符串进行填充,或者仅仅是用默认空格填充。这里是一个函数声明:

str.padStart(targetLength [, padString])

str.padEnd(targetLength [, padString])

正如你看到的,这些方法的第一个参数是 targetLength,表示字符串结果的总长度。第二个参数选项是 padString,表示用来填充原字符串的字符,默认值是空格。

'es8'.padStart(2);          // 'es8'
'es8'.padStart(5);          // '  es8'
'es8'.padStart(6, 'woof');  // 'wooes8'
'es8'.padStart(14, 'wow');  // 'wowwowwowwoes8'
'es8'.padStart(7, '0');     // '0000es8'
'es8'.padEnd(2);          // 'es8'
'es8'.padEnd(5);          // 'es8  '
'es8'.padEnd(6, 'woof');  // 'es8woo'
'es8'.padEnd(14, 'wow');  // 'es8wowwowwowwo'
'es8'.padEnd(7, '6');     // 'es86666'

alt

values 和 entries函数

Object.values方法返回一个按照 for in 顺序将传入的对象的属性值枚举出来的数组。具体代码如下:

Object.values(obj)

其中obj参数是源对象。它可以是一个对象或者是一个数组(因为数组可以看做是一个[10, 20, 30] -> { 0: 10, 1: 20, 2: 30 }这样类型的对象)

const obj = { x: 'xxx', y: 1 };
Object.values(obj); // ['xxx', 1]

const obj = ['e', 's', '8']; // same as { 0: 'e', 1: 's', 2: '8' };
Object.values(obj); // ['e', 's', '8']

// when we use numeric keys, the values returned in a numerical 
// order according to the keys
const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };
Object.values(obj); // ['yyy', 'zzz', 'xxx']
Object.values('es8'); // ['e', 's', '8']

alt

Object.entries方法返回一个同Object.values顺序一致的枚举[key, value]的数组。具体代码如下:

const obj = { x: 'xxx', y: 1 };
Object.entries(obj); // [[’x’, 'xxx’], [’y’, 1]]

const obj = ['e', 's', '8'];
Object.entries(obj); // [[’0’, 'e'], [’1’, 's'], [’2', '8']]

const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };
Object.entries(obj); // [['1', 'yyy'], ['3', 'zzz'], ['10', 'xxx']]
Object.entries('es8'); // [['0', 'e'], ['1', 's'], ['2', '8']]

alt

getOwnPropertyDescriptors

getOwnPropertyDescriptors方法返回指定对象的所有私有属性描述符。私有属性描述符是直接定义在对象中,并不是从object属性中继承而来的。具体代码如下:

Object.getOwnPropertyDescriptors(obj)

obj是源对象。返回的描述符对象结果的可能键值是: configurable, enumerable, writable, get, set 和 value

const obj = { 
  get es7() { return 777; },
  get es8() { return 888; }
};
Object.getOwnPropertyDescriptors(obj);
// {
//   es7: {
//     configurable: true,
//     enumerable: true,
//     get: function es7(){}, //the getter function
//     set: undefined
//   },
//   es8: {
//     configurable: true,
//     enumerable: true,
//     get: function es8(){}, //the getter function
//     set: undefined
//   }
// }

描述符数据对于像decorators这样的修饰器非常重要。

alt

函数参数列表中的尾随逗号

当我们在参数列表末尾添加逗号,在ES8中,编译器会进行解析并不会报出语法错误:

function es8(var1, var2, var3,) {
  // ...
}

像上面函数声明用法一样,也可以应用在函数的调用上:

es8(10, 20, 30,);

这个特性的灵感来自于对象和数组,如[10, 20, 30,]{ x: 1, }中尾随逗号的处理方式。

异步函数

async function声明方式定义了一个异步函数,该函数返回一个AsyncFunction对象。在函数内部,异步函数与生成器非常相似,但是它们并不会转换为生成器函数。

function fetchTextByPromise() {
  return new Promise(resolve => { 
    setTimeout(() => { 
      resolve("es8");
    }, 2000);
  });
}

async function sayHello() { 
  const externalFetchedText = await fetchTextByPromise();
  console.log(`Hello, ${externalFetchedText}`); // Hello, es8
}
sayHello();

2秒后,sayHollo将输出 Hello,es8

console.log(1);
sayHello();
console.log(2);

现在呢,将输出:

1 // 马上输出
2 // 马上输出
Hello, es8 // 两秒后输出

这是因为函数调用并不会阻塞程序执行的流。

注意async function通常会返回一个promise,同时await关键字也许只能应用在以async关键字标记的方法中。

alt

共享内存和原子操作

当内存共享的时候,多线程就可以在内存中读写相同的数据了。原子操作可以确保写入和读取的数据均为可预测,保证在下一个操作开始之前完成操作以及操作不会被中断。这一部分介绍了一个新的构造函数SharedArrayBuffer和一个具有静态方法的命名空间对象Atomics

Atomics是一个类似于Math一样的静态方法的对象,所以我们不能把它作为构造函数来使用。在这个对象中的一些静态方法的例子如下:

  • add / sub --- 为某个值在特定的位置增加或减去一个值
  • and / or / xor --- 按位与,按位或,按位非
  • load --- 获取到特定位置的值

alt

还有一个是针对明年的ES9的特性--提升模板字面限制

使用标记后的模板文字(ES6的特性),我们可以像声明模板解析函数一样使用,并且根据我们的逻辑返回一个值:

const esth = 8;
helper`ES ${esth} is `;
function helper(strs, ...keys) {
  const str1 = strs[0]; // ES
  const str2 = strs[1]; // is
  let additionalPart = '';
  if (keys[0] == 8) { // 8
    additionalPart = 'awesome';
  }
  else {
    additionalPart = 'good';
  }

  return `${str1} ${keys[0]} ${str2} ${additionalPart}.`;
}

上面代码将输出->ES 8 is awesome。 那么当esth的值为7时,将返回->ES 7 is good。

但是对于包含\u 或 \x子字符串的模板有一个限制。ES9将处理这个漏网之鱼。想了解更多,请戳这里:MDN websiteTC39 document

alt

总结

JavaScript已经被广泛应用于生产环境当中,它还在持续快速的迭代。将新特性应用在规范中也在有条不紊的进行着。最后,这些功能经过TC39委员会确认并由核心开发人员实施。其中大部分已经是Typescript语言,浏览器,或者是其他填充语言的一部分了,所以你现在就可以行动起来小试牛刀了。

原文链接:ES8 was Released and here are its Main New Features

本文链接:https://www.imwineki.cn/post/es8feature.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。