ES2016(ES7)新增:

Array.prototype.includes

Exponentiation Operator 求冥运算

ES2017 (ES8)新增:

ECMAScript® 2017 Language Specification (ECMA-262, 8th edition, June 2017)任意门

1、TypeArray:

一个TypedArray 对象描述一个底层的二进制数据缓存区的一个类似数组(array-like)视图。事实上,没有名为 TypedArray的全局对象,也没有一个名为的 TypedArray构造函数。相反,有许多不同的全局对象,下面会列出这些针对特定元素类型的类型化数组的构造函数。

语法:

  1. new TypedArray(length);
  2. new TypedArray(typedArray);
  3. new TypedArray(object);
  4. new TypedArray(buffer [, byteOffset [, length]]);
  1. Int8Array();
  2. Uint8Array();
  3. Uint8ClampedArray();
  4. Int16Array();
  5. Uint16Array();
  6. Int32Array();
  7. Uint32Array();
  8. Float32Array();
  9. Float64Array();

2、字符串填充 String.padStart 、String.padEnd

  语法:str.padStart(targetLength [, padString])  返回值:填充后形成的新字符串

  targetLength 当前字符串需要填充到的目标长度。如果它小于当前字符串的长度,则返回当前字符串本身。

  padString 要填充的字符串,如果长度超过了 targetLength 则,只保留左侧部分,其他部分被阶段。缺省值,为 " "

  示例:

  1. 'abc'.padStart(10); // " abc"
  2. 'abc'.padStart(10, 'foo'); // "foofoofabc"
  3. 'abc'.padStart(4, '12345'); // "1abc"
  4. 'abc'.padStart(1); // "abc"

  兼容性支持:

  String.prototype.padStart()

  1. if (!String.prototype.padStart) {
  2. String.prototype.padStart = function padStart(targetLength,padString) {
  3. targetLength = targetLength>>0; //floor if number or convert non-number to 0;
  4. padString = String(padString || ' ');
  5. if (this.length > targetLength) {
  6. return String(this);
  7. }
  8. else {
  9. targetLength = targetLength-this.length;
  10. if (targetLength > padString.length) {
  11. padString += padString.repeat(targetLength/padString.length); //append to original to ensure we are longer than needed
  12. }
  13. return padString.slice(0,targetLength) + String(this);
  14. }
  15. };
  16. }

  str.padEnd 与 str.padStart 用法相同,只是 padEnd 是在当前字符串后面添加内容。

  兼容性支持:

  1. if (!String.prototype.padEnd) {
  2. String.prototype.padEnd = function padEnd(targetLength,padString) {
  3. targetLength = targetLength>>0; //floor if number or convert non-number to 0;
  4. padString = String(padString || ' ');
  5. if (this.length > targetLength) {
  6. return String(this);
  7. }
  8. else {
  9. targetLength = targetLength-this.length;
  10. if (targetLength > padString.length) {
  11. padString += padString.repeat(targetLength/padString.length); //append to original to ensure we are longer than needed
  12. }
  13. return String(this) + padString.slice(0,targetLength);
  14. }
  15. };
  16. }

  作用:

  • 以等宽字体显示平整的数据。
  • 在文件名或URL中添加计数或ID:’001.txt’。
  • 对齐控制台输出: ‘Test 001: ’。
  • 打印具有固定位数的十六进制或二进制数字:’0x00FF’

3、async 和 await 目前还是实验性质的方法,实战项目中慎用哦~

  AsyncFunction 构造函数。用来创建新的 异步函数 对象

    语法:new Asyncfunction( [arg1 [, arg2 [, ... argN] ] ,] fucntionBody )

    argN: 函数的参数名

    functionBody: 字符串格式的函数体

  async function 关键字。用来在表达式中定义异步函数

    语法:async function [name] (param1 [ param1 [, param1 [, ..., paramM] ] ] ) { statements }

    name: 此异步函数的名称,可以是匿名函数,该名称仅可在本函数中使用。

    paramN: 传入函数的参数的名称。

    statements: 函数体

  await 操作符。用来等待一个 Promise 对象。它只能在异步函数 async function 中使用。

    表达式: 一个 Promise 对象,或者任何要等待的值。 [return_value] = await expression;

    返回值:返回 Promise 对象的处理结果。如果等待的不是 Promise 对象,则返回该值本身。

  1. function resolveAfter2Seconds(x) {
  2. return new Promise(resolve => {
  3. setTimeout(() => {
  4. resolve(x);
  5. }, 2000);
  6. });
  7. }
  8.  
  9. // 构造函数的方式
  10. var a = new AsyncFunction('a', 'b', 'return await resolveAfter2Seconds(a) + await resolveAfter2Seconds(b);';
  11.  
  12. a(10,20).then( v => {
  13. console.log(v); // 4 秒后打印 30
  14. });
  15.  
  16. //async 关键字的方式
  17. var add1 = async function(x) {
  18. var a = await resolveAfter2Seconds(20);
  19. var b= await resolveAfter2Seconds(30);
  20. return x + a + b;
  21. }
  22. add1(10).then( v => {
  23. console.log(v); // 4 秒后打印 60
  24. });
  25. // 注意 ⚠️ await 位置不同的差异
  26. (async function(x) {
  27. var p_a = resolveAfter2Seconds(20);
  28. var p_b = resolveAfter2Seconds(30);
  29. return x + await p_a + await p_b;
  30. })(10).then(v => {
  31. console.log(v); // 2 秒后打印 60
  32. });

4、获得对象上自身某属性的描述符:Object.getPropertyDescriptor() 。它解决了 Object.assign() 无法正确拷贝 get 和 set 属性的问题

  语法: Object.getpropertyDescriptor(obj, prop)

  obj: 要查找的目标对象

  prop:要查找的目标对象的属性

  返回值:若存在该属性,则返回其属性描述,否则返回 undefined

  1. var o, d;
  2.  
  3. o = { get foo() { return 17; } };
  4. d = Object.getOwnPropertyDescriptor(o, "foo");
  5.  
  6. //结果
  7. // d {
  8. // configurable: true, // 指定对象的属性描述可以被改变或者属性可以被删除时,为 true
  9. // enumerable: true, // 该属性可以被枚举时为 true
  10. // get: /*the getter function*/, // 该属性的访问器函数
  11. // set: undefined // 该属性的设置器函数
  12. // }
  13.  
  14. o = { bar: 42 };
  15. d = Object.getOwnPropertyDescriptor(o, "bar");
  16. // d {
  17. // configurable: true,
  18. // enumerable: true,
  19. // value: 42, // 该属性的值
  20. // writable: true //该属性值可被修改时为 true
  21. // }
  22.  
  23. o = {};
  24. //定义属性描述的方法用 defineProperty
  25. Object.defineProperty(o, "baz", {
  26. value: 8675309,
  27. writable: false,
  28. enumerable: false
  29. });

ES2018 (ES9)新增:

1、Regular正则表达式命名捕获组 ?<name>

  1. const
  2. reDate = /([0-9]{4})-([0-9]{2})-([0-9]{2})/,
  3. match = reDate.exec('2018-04-30'),
  4. year = match[1], //
  5. month = match[2], //
  6. day = match[3]; //
  7.  
  8. const
  9. reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
  10. match = reDate.exec('2018-04-30'),
  11. year = match.groups.year, //
  12. month = match.groups.month, //
  13. day = match.groups.day; //
  1. const
  2. reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
  3. d = '2018-04-30',
  4. usDate = d.replace(reDate, '$<month>-$<day>-$<year>');

2、反向肯定查找  (?<=X)Y 匹配的是 Y,但是Y前面必须有X

 反向否定查找 (?<!X)Y 匹配的是Y,但是Y的前面不能有X

 正向肯定查找 X(?=Y) 匹配的是X,但是 X的后面必须有Y

正向否定查找 X(?!Y) 匹配的是X,但是 X的后面不能跟Y

  1. // 反向肯定查找
  2. const reg1 = /(?<=a)b/;
  3. reg1.exec('ab')[0]; // b
  4. reg1.exec('abc')[0]; // b
  5. reg1.exec('cb'); // null
  6. // 反向否定查找
  7. const reg2 = /(?<!a)b/;
  8. reg2.exec('ab'); //null
  9. reg2.exec('cb')[0]; // b
  10. reg2.exec('cdb')[0]; // b
  11. // 正向肯定查找
  12. const reg3 = /a(?=b)/;
  13. reg3.exec('ab')[0]; //a
  14. reg3.exec('abc')[0]; //a
  15. reg3.exec('ac'); //null
  16. // 正向否定查找
  17. const reg4 = /a(?!b)/
  18. reg4.exec('ab'); //null
  19. reg4.exec('ac'); //a
  20. reg4.exec('acd'); //a

3、正则表达式标志 s 。允许 . 匹配换行符

  原本 . 小数点是匹配除换行符以外的任何字符,使用 s 后 . 也可以匹配换行符

  1. /abc.abc/.test('abc\nabc'); // false
  2. /abc.abc/s.test('abc\nabc'); //true

有空继续更...

ES 2016+的更多相关文章

  1. ECMAScript 7 (ES 2016 /ES7 ) Ecma-262 7Edition

    Standard ECMA-262 ECMAScript 2016 Language Specification 7th edition (June 2016) http://www.ecma-int ...

  2. 实用的几个JS新特性(es 2016)

    在Chrome 55下测试,可用. 1.箭头函数(arrow function) 以前写的匿名函数是这样的 function(){}, 现在可以简单写成这样()=>{} 如果直接return,没 ...

  3. Linux安装sonarQube

    安装sonarQube之前,需要先安装JDK和mysql 服务器/home/azrlnx04/下创建三个文件夹,/java ./mysql. /sonar 一:安装JDK (1)打开http://ww ...

  4. Angular 2的12个经典面试问题汇总(文末附带Angular测试)

    Angular作为目前最为流行的前端框架,受到了前端开发者的普遍欢迎.不论是初学Angular的新手,还是有一定Angular开发经验的开发者,了解本文中的12个经典面试问题,都将会是一个深入了解和学 ...

  5. Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

    Angular作为目前最为流行的前端框架,受到了前端开发者的普遍欢迎.不论是初学Angular的新手,还是有一定Angular开发经验的开发者,了解本文中的12个经典面试问题,都将会是一个深入了解和学 ...

  6. JavaScript 中回调地狱的今生前世

    1. 讲个笑话 JavaScript 是一门编程语言 2. 异步编程 JavaScript 由于某种原因是被设计为单线程的,同时由于 JavaScript 在设计之初是用于浏览器的 GUI 编程,这也 ...

  7. Angular 2的12个经典面试问题汇总(文末附带Angular測试)

    Angular作为眼下最为流行的前端框架,受到了前端开发者的普遍欢迎.不论是初学Angular的新手.还是有一定Angular开发经验的开发者,了解本文中的12个经典面试问题,都将会是一个深入了解和学 ...

  8. 前端ES6 特性兼容查询

    ES6 http://kangax.github.io/compat-table/es6/ ES5 http://kangax.github.io/compat-table/es5/ ES 2016+ ...

  9. elk系列8之logstash+redis+es的架构来收集apache的日志

    preface logstash--> redis --> logstash --> es这套架构在讲究松耦合关系里面是最简单的, 架构图如下: 解释下这个架构图的流程 首先前端lo ...

随机推荐

  1. Android学习笔记(四) JAVA基础知识回顾

    一.接口 1)接口中定义的方法都是public权限,并且默认为public,而不是default. 2)接口的实现(implements)是特殊的继承,类似于父类子类的关系,可以向上转型(非常重要). ...

  2. 百度人脸识别AI实践.doc

    0, 前言 百度开放了很多AI能力,其中人脸识别就是其中之一. 本文对百度人脸识别AI进行实践检验,看看其使用效果如何. 鉴于是最为基础的实践,基本都是在其接口范例代码修改而来. 百度人脸识别AI网站 ...

  3. MySQL(四)DQL语言——条件查询

    摘要:条件查询:条件表达式,逻辑表达式,模糊查询,like,通配符,转义字符,escape关键字,between and,in,is null,is not null,安全等于. 条件查询语法: SE ...

  4. SpringBoot项目的mybatis逆向工程

    <dependencies> <!--mybatis--> <dependency> <groupId>org.mybatis.spring.boot& ...

  5. webstom2017最新破解 ------------ http://blog.csdn.net/voke_/article/details/76418116

    webstorm 作为最近最火的前端开发工具,也确实对得起那个价格,但是秉着勤俭节约的传统美德,我们肯定是能省则省啊. 方法一:(更新时间:2018/1/23)v3.3 注册时,在打开的License ...

  6. CAD使用GetAllAppName读所有名称(网页版)

    主要用到函数说明: MxDrawEntity::GetAllAppName 得到所有扩展数据名称,详细说明如下: 参数 说明 [out, retval] IMxDrawResbuf** ppRet 返 ...

  7. Java基础(六)--枚举Enum

    枚举: 刚开始项目中没怎么用过,只知道能够实现作为项目中类似定义Constant的功能,然后知道枚举实现的单例模式几乎是最优雅的,所以, 想要深入完整的了解一下 1.基本特性: Enum.values ...

  8. react-router 4.x 路由按需加载

    react-router 4 代码分割(按需加载) 官方文档  https://serverless-stack.com/chapters/code-splitting-in-create-react ...

  9. 数据结构与算法(3)- C++ STL与java se中的vector

    声明:虽然本系列博客与具体的编程语言无关.但是本文作者对c++相对比较熟悉,其次是java,所以难免会有视角上的偏差.举例也大多是和这两门语言相关. 上一篇博客概念性的介绍了vector,我们有了大致 ...

  10. C++ 类的初始化列表

    class Animal{public: Animal(int weight,int height): //A初始化列表 m_weight(weight), m_height(height) { } ...