1. 首页
  2. 文章列表
  3. ECMAScript 2017(ES8)新特性尝鲜

ECMAScript 2017 或 ES8 与 2017 年六月底由 TC39 正式发布,可以在这里浏览完整的版本;而 ES8 中代表性的特征包括了字符串填充、对象值遍历、对象的属性描述符获取、 函数参数列表与调用中的尾部逗号、异步函数、共享内存与原子操作等。

懒得勤快的博客_全栈开发者_互联网分享精神

字符串填充:

  ES8 中添加了内置的字符串填充函数,分别为 padStart 与 padEnd,该函数能够通过填充字符串的首部或者尾部来保证字符串达到固定的长度;开发者可以指定填充的字符串或者使用默认的空格,函数的声明如下:

str.padStart(targetLength [, padString])
str.padEnd(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'

对象指遍历

  Object.values 函数会返回指定对象的可枚举的属性值数组,数组中值顺序与 for-in 循环保持一致,函数的声明为:

Object.values(obj)

  首个参数 obj 即为需要遍历的目标对象,它可以为某个对象或者数组(数组可以看做键为下标的对象):

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

  而 Object.entries 方法则会将某个对象的可枚举属性与值按照二维数组的方式返回,数组中顺序与 Object.values 保持一致,该函数的声明与使用为:

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

对象的属性描述符获取

  getOwnPropertyDescriptors 函数会返回指定对象的某个指定属性的描述符;该属性必须是对象自己定义而不是继承自原型链,函数的声明为:

Object.getOwnPropertyDescriptor(obj, prop)

  obj 即为源对象,而 prop 即为需要查看的属性名;结果中包含的键可能有 configurable、enumerable、writable、get、set 以及 value。

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

  函数参数列表与调用中的尾部逗号

  该特性允许我们在定义或者调用函数时添加尾部逗号而不报错:

function es8(var1, var2, var3,) {
  // ...
}
es8(10, 20, 30,);

异步方法

  ES8 中允许使用 async/await 语法来定义与执行异步函数,async 关键字会返回某个 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();
console.log(1);
sayHello();
console.log(2);
// 调用结果
1 // immediately
2 // immediately
Hello, es8 // after 2 seconds

共享内存与原子操作:

  共享内存允许多个线程并发读写数据,而原子操作则能够进行并发控制,确保多个存在竞争关系的线程顺序执行。本部分则介绍了新的构造器 SharedArrayBuffer 与包含静态方法的命名空间对象 Atomics。Atomic 对象类似于 Math,我们无法直接创建其实例,而只能使用其提供的静态方法:

add /sub - 增加或者减去某个位置的某个值
and / or /xor - 进行位操作
load - 获取值

版权声明:

本文仅用于学习、研究和交流目的,欢迎非商业性质转载。本文链接:http://masuit.com/110

l  博主在此发文(包括但不限于汉字、拼音、拉丁字母)均为随意敲击键盘所出,用于检验本人电脑键盘录入、屏幕显示的机械、光电性能,并不代表本人局部或全部同意、支持或者反对观点。如需要详查请直接与键盘生产厂商法人代表联系。挖井挑水无水表,不会网购无快递。

l  文章内容部分来源于互联网,不代表本人的任何立场;涉及到的软件来源于互联网,仅供个人下载使用,版权归该软件开发者所有,请勿用于商业用途,下载后请于24小时内删除,请支持正版!因下载本站资源造成的损失,全部责任由使用者本人承担!如果你是原作者,认为本文内容对您的权益有所侵犯,请联系博主进行投诉,待博主进行严格地审查和背景调查后,情况属实的将在三天内将本文删除或修正。

l  博主的文章没有高度、深度和广度,只是凑字数。由于博主的水平不高(其实是个菜B),不足和错误之处在所难免,希望大家能够批评指出。

l  博主是利用读书、参考、引用、抄袭、复制和粘贴等多种方式打造成自己的纯镀 24k 文章,请原谅博主成为一个无耻的文档搬运工!

l  博主只是一名普通的互联网从业者,不懂修电脑,不会卖电脑,不会帮你盗号,不会破解开机密码,找不回你丢失的手机等,如有这样的想法请绕道!

相关推荐:

通过引用TypeScript定义来提高你的Javascript开发能力 web前端知识体系大全
在angular中集成SignalR即时通信框架 angular表格神器ng-table的服务端分页的解决方案
又一前端神级类库——lodash.js工具库 web前端杂谈:传统的 Ajax 已死,Fetch得永生!
大前端的未来可能代替ajax的东西——Fetch API初体验 自从用了linqjs,再也不用担心操作json集合啦

评论区:

    还没有评论哦,赶紧来写评论吧

    分享按钮