ESMA2017(es8) 新特性

本章内容:

  1. Object.values()/Object.entries()
  2. async/await
  3. String padding: padStart()padEnd(),填充字符串达到当前长度
  4. 函数参数列表结尾允许逗号
  5. Object.getOwnPropertyDescriptors()
  6. ShareArrayBufferAtomics对象,用于从共享内存位置读取和写入

1.async/await

ES2018 引入异步迭代器(asynchronous iterators),这就像常规迭代器,除了next()方法返回一个 Promise。因此await可以和for...of循环一起使用,以串行的方式运行异步操作。例如:

js 复制代码
async function process(array) {
  for await (let i of array) {
    doSomething(i);
  }
}

Object.values()/Object.entries()

  • Object.values(): 返回对象的value数组。
  • Object.entries(): 返回对象的[key, value]数组。

语法

js 复制代码
Object.values(obj);
Object.entries(obj);

示例

js 复制代码
const obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4,
};

console.log(Object.values(obj)); // [ 1, 2, 3, 4 ]
console.log(Object.entries(obj));
// [ [ 'a', 1 ], [ 'b', 2 ], [ 'c', 3 ], [ 'd', 4 ] ]

String padding

在 ES8 中 String 新增了两个实例函数String.prototype.padStartString.prototype.padEnd,允许将空字符串或其他字符串添加到原始字符串的开头或结尾。

String.padStart(targetLength[,padString])

  • targetLength:当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度,则返回当前字符串本身。
  • padString:(可选)填充字符串。如果字符串太长,使填充后的字符串长度超过了目标长度,则只保留最左侧的部分,其他部分会被截断,此参数的缺省值为 " "。
js 复制代码
"cat".padStart(5); // '  cat'
"cat".padStart(5, "a"); // 'aacat'
"cat".padStart(1, "a"); // 'cat'   指定长度小于字符串长度,将不会追加字符串
"cat".padStart(5, "abc"); // 'abcat'
"cat".padStart(8, "abc"); // 'abcabcat' 如果追加一次没有达到指定长度会追加多次

String.padEnd(targetLength[,padString])

  • targetLength:当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度,则返回当前字符串本身。
  • padString:(可选) 填充字符串。如果字符串太长,使填充后的字符串长度超过了目标长度,则只保留最左侧的部分,其他部分会被截断,此参数的缺省值为 " ";
js 复制代码
"cat".padEnd(5); // 'cat  '
"cat".padEnd(5, "a"); // 'cataa'
"cat".padEnd(1, "a"); // 'cat'
"cat".padEnd(5, "abc"); // 'catab'
"cat".padEnd(8, "abc"); // 'catabcab'

5.函数参数列表结尾允许逗号

在某些代码库/样式指南中,出现了功能调用和定义在多行(下列)中拆分的场景:

js 复制代码
function clownPuppiesEverywhere(param1, param2) {
  /* ... */
}

clownPuppiesEverywhere("foo", "bar");

在这些情况下,当其他代码贡献者出现并将其他参数添加到这些参数列表之一时,他们必须进行两行更新:

js 复制代码
function clownPuppiesEverywhere(
  param1,
  param2, // updated to add a comma
  param3 // updated to add new parameter
) {
  /* ... */
}

clownPuppiesEverywhere(
  "foo",
  "bar", // updated to add a comma
  "baz" // updated to add new parameter
);

在对版本控制系统管理的代码(git、颠覆、善变等)进行此更改的过程中,第 3 行和第 9 行的指责/注释代码历史记录信息将更新为指向添加逗号的人(而不是最初添加参数的人)。

为了帮助缓解这个问题,一些其他语言(Python,D,哈克,...可能是其他人。。。)已添加语法支持,以便在这些参数列表中使用尾随逗号。这允许代码贡献者始终在以下每行参数列表中用尾随逗号结束参数添加,并且不必再担心代码归因问题:

js 复制代码
function clownPuppiesEverywhere(
  param1,
  param2 // Next parameter that's added only has to add a new line, not modify this line
) {
  /* ... */
}

clownPuppiesEverywhere(
  "foo",
  "bar" // Next parameter that's added only has to add a new line, not modify this line
);

请注意,此建议仅针对语法,并且不会更改语义

6.Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors()函数用来获取一个对象的所有自身属性的描述符,如果没有任何自身属性,则返回空对象。

函数原型:

js 复制代码
Object.getOwnPropertyDescriptors(obj);

返回obj对象的所有自身属性的描述符,如果没有任何自身属性,则返回空对象。

js 复制代码
const obj2 = {
  name: "Tom",
  get age() {
    return "18";
  },
};
Object.getOwnPropertyDescriptors(obj2);
// {
//   age: {
//     configurable: true,
//     enumerable: true,
//     get: function age(){}, //the getter function
//     set: undefined
//   },
//   name: {
//     configurable: true,
//     enumerable: true,
//     value:"Tom",
//     writable:true
//   }
// }

7.SharedArrayBuffer 对象

SharedArrayBuffer 对象用来表示一个通用的,固定长度的原始二进制数据缓冲区,类似于 ArrayBuffer 对象,它们都可以用来在共享内存(shared memory)上创建视图。与 ArrayBuffer 不同的是,SharedArrayBuffer 不能被分离。

js 复制代码
/**
 *
 * @param {*} length 所创建的数组缓冲区的大小,以字节(byte)为单位。
 * @returns {SharedArrayBuffer} 一个大小指定的新 SharedArrayBuffer 对象。其内容被初始化为 0。
 */
new SharedArrayBuffer(length);

Atomics 对象

共享内存能被同时创建和更新于工作者线程或主线程。依赖于系统(CPU,操作系统,浏览器),变化传递给所有上下文环境需要一段时间。需要通过 atomic 操作来进行同步。

Atomics 对象提供了一组静态方法用来对 SharedArrayBuffer 对象进行原子操作。

这些原子操作属于 Atomics 模块。与一般的全局对象不同,Atomics 不是构造函数,因此不能使用 new 操作符调用,也不能将其当作函数直接调用。Atomics 的所有属性和方法都是静态的(与 Math 对象一样)。

  • Atomics.add()

  • 将指定位置上的数组元素与给定的值相加,并返回相加前该元素的值。

  • Atomics.and()

  • 将指定位置上的数组元素与给定的值相与,并返回与操作前该元素的值。

  • Atomics.compareExchange()

  • 如果数组中指定的元素与给定的值相等,则将其更新为新的值,并返回该元素原先的值。

  • Atomics.exchange()

  • 将数组中指定的元素更新为给定的值,并返回该元素更新前的值。

  • Atomics.isLockFree(size)

  • 可以用来检测当前系统是否支持硬件级的原子操作。对于指定大小的数组,如果当前系统支持硬件级的原子操作,则返回 true;否则就意味着对于该数组,Atomics 对象中的各原子操作都只能用锁来实现。此函数面向的是技术专家。

  • Atomics.load()

  • 返回数组中指定元素的值。

  • Atomics.notify()

  • 唤醒等待队列中正在数组指定位置的元素上等待的线程。返回值为成功唤醒的线程数量。

  • Atomics.or()

  • 将指定位置上的数组元素与给定的值相或,并返回或操作前该元素的值。

  • Atomics.store()

  • 将数组中指定的元素设置为给定的值,并返回该值

  • Atomics.sub()

  • 将指定位置上的数组元素与给定的值相减,并返回相减前该元素的值。

  • Atomics.wait()

  • 检测数组中某个指定位置上的值是否仍然是给定值,是则保持挂起直到被唤醒或超时。返回值为 "ok"、"not-equal" 或 "time-out"。调用时,如果当前线程不允许阻塞,则会抛出异常(大多数浏览器都不允许在主线程中调用 wait())。

  • Atomics.xor()

  • 将指定位置上的数组元素与给定的值相异或,并返回异或操作前该元素的值。

相关推荐
熊的猫29 分钟前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
别拿曾经看以后~2 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死2 小时前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试2 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人2 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人2 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR2 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香2 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel