ES 2016+
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构造函数。相反,有许多不同的全局对象,下面会列出这些针对特定元素类型的类型化数组的构造函数。
语法:
- new TypedArray(length);
- new TypedArray(typedArray);
- new TypedArray(object);
- new TypedArray(buffer [, byteOffset [, length]]);
- Int8Array();
- Uint8Array();
- Uint8ClampedArray();
- Int16Array();
- Uint16Array();
- Int32Array();
- Uint32Array();
- Float32Array();
- Float64Array();
2、字符串填充 String.padStart 、String.padEnd
语法:str.padStart(targetLength [, padString]) 返回值:填充后形成的新字符串
targetLength 当前字符串需要填充到的目标长度。如果它小于当前字符串的长度,则返回当前字符串本身。
padString 要填充的字符串,如果长度超过了 targetLength 则,只保留左侧部分,其他部分被阶段。缺省值,为 " "
示例:
- 'abc'.padStart(10); // " abc"
- 'abc'.padStart(10, 'foo'); // "foofoofabc"
- 'abc'.padStart(4, '12345'); // "1abc"
- 'abc'.padStart(1); // "abc"
兼容性支持:
String.prototype.padStart()
- if (!String.prototype.padStart) {
- String.prototype.padStart = function padStart(targetLength,padString) {
- targetLength = targetLength>>0; //floor if number or convert non-number to 0;
- padString = String(padString || ' ');
- if (this.length > targetLength) {
- return String(this);
- }
- else {
- targetLength = targetLength-this.length;
- if (targetLength > padString.length) {
- padString += padString.repeat(targetLength/padString.length); //append to original to ensure we are longer than needed
- }
- return padString.slice(0,targetLength) + String(this);
- }
- };
- }
str.padEnd 与 str.padStart 用法相同,只是 padEnd 是在当前字符串后面添加内容。
兼容性支持:
- if (!String.prototype.padEnd) {
- String.prototype.padEnd = function padEnd(targetLength,padString) {
- targetLength = targetLength>>0; //floor if number or convert non-number to 0;
- padString = String(padString || ' ');
- if (this.length > targetLength) {
- return String(this);
- }
- else {
- targetLength = targetLength-this.length;
- if (targetLength > padString.length) {
- padString += padString.repeat(targetLength/padString.length); //append to original to ensure we are longer than needed
- }
- return String(this) + padString.slice(0,targetLength);
- }
- };
- }
作用:
- 以等宽字体显示平整的数据。
- 在文件名或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 对象,则返回该值本身。
- function resolveAfter2Seconds(x) {
- return new Promise(resolve => {
- setTimeout(() => {
- resolve(x);
- }, 2000);
- });
- }
- // 构造函数的方式
- var a = new AsyncFunction('a', 'b', 'return await resolveAfter2Seconds(a) + await resolveAfter2Seconds(b);';
- a(10,20).then( v => {
- console.log(v); // 4 秒后打印 30
- });
- //async 关键字的方式
- var add1 = async function(x) {
- var a = await resolveAfter2Seconds(20);
- var b= await resolveAfter2Seconds(30);
- return x + a + b;
- }
- add1(10).then( v => {
- console.log(v); // 4 秒后打印 60
- });
- // 注意 ⚠️ await 位置不同的差异
- (async function(x) {
- var p_a = resolveAfter2Seconds(20);
- var p_b = resolveAfter2Seconds(30);
- return x + await p_a + await p_b;
- })(10).then(v => {
- console.log(v); // 2 秒后打印 60
- });
4、获得对象上自身某属性的描述符:Object.getPropertyDescriptor() 。它解决了 Object.assign() 无法正确拷贝 get 和 set 属性的问题
语法: Object.getpropertyDescriptor(obj, prop)
obj: 要查找的目标对象
prop:要查找的目标对象的属性
返回值:若存在该属性,则返回其属性描述,否则返回 undefined
- var o, d;
- o = { get foo() { return 17; } };
- d = Object.getOwnPropertyDescriptor(o, "foo");
- //结果
- // d {
- // configurable: true, // 指定对象的属性描述可以被改变或者属性可以被删除时,为 true
- // enumerable: true, // 该属性可以被枚举时为 true
- // get: /*the getter function*/, // 该属性的访问器函数
- // set: undefined // 该属性的设置器函数
- // }
- o = { bar: 42 };
- d = Object.getOwnPropertyDescriptor(o, "bar");
- // d {
- // configurable: true,
- // enumerable: true,
- // value: 42, // 该属性的值
- // writable: true //该属性值可被修改时为 true
- // }
- o = {};
- //定义属性描述的方法用 defineProperty
- Object.defineProperty(o, "baz", {
- value: 8675309,
- writable: false,
- enumerable: false
- });
ES2018 (ES9)新增:
1、Regular正则表达式命名捕获组 ?<name>
- const
- reDate = /([0-9]{4})-([0-9]{2})-([0-9]{2})/,
- match = reDate.exec('2018-04-30'),
- year = match[1], //
- month = match[2], //
- day = match[3]; //
- const
- reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
- match = reDate.exec('2018-04-30'),
- year = match.groups.year, //
- month = match.groups.month, //
- day = match.groups.day; //
- const
- reDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,
- d = '2018-04-30',
- 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
- // 反向肯定查找
- const reg1 = /(?<=a)b/;
- reg1.exec('ab')[0]; // b
- reg1.exec('abc')[0]; // b
- reg1.exec('cb'); // null
- // 反向否定查找
- const reg2 = /(?<!a)b/;
- reg2.exec('ab'); //null
- reg2.exec('cb')[0]; // b
- reg2.exec('cdb')[0]; // b
- // 正向肯定查找
- const reg3 = /a(?=b)/;
- reg3.exec('ab')[0]; //a
- reg3.exec('abc')[0]; //a
- reg3.exec('ac'); //null
- // 正向否定查找
- const reg4 = /a(?!b)/
- reg4.exec('ab'); //null
- reg4.exec('ac'); //a
- reg4.exec('acd'); //a
3、正则表达式标志 s 。允许 . 匹配换行符
原本 . 小数点是匹配除换行符以外的任何字符,使用 s 后 . 也可以匹配换行符
- /abc.abc/.test('abc\nabc'); // false
- /abc.abc/s.test('abc\nabc'); //true
有空继续更...
ES 2016+的更多相关文章
- ECMAScript 7 (ES 2016 /ES7 ) Ecma-262 7Edition
Standard ECMA-262 ECMAScript 2016 Language Specification 7th edition (June 2016) http://www.ecma-int ...
- 实用的几个JS新特性(es 2016)
在Chrome 55下测试,可用. 1.箭头函数(arrow function) 以前写的匿名函数是这样的 function(){}, 现在可以简单写成这样()=>{} 如果直接return,没 ...
- Linux安装sonarQube
安装sonarQube之前,需要先安装JDK和mysql 服务器/home/azrlnx04/下创建三个文件夹,/java ./mysql. /sonar 一:安装JDK (1)打开http://ww ...
- Angular 2的12个经典面试问题汇总(文末附带Angular测试)
Angular作为目前最为流行的前端框架,受到了前端开发者的普遍欢迎.不论是初学Angular的新手,还是有一定Angular开发经验的开发者,了解本文中的12个经典面试问题,都将会是一个深入了解和学 ...
- Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)
Angular作为目前最为流行的前端框架,受到了前端开发者的普遍欢迎.不论是初学Angular的新手,还是有一定Angular开发经验的开发者,了解本文中的12个经典面试问题,都将会是一个深入了解和学 ...
- JavaScript 中回调地狱的今生前世
1. 讲个笑话 JavaScript 是一门编程语言 2. 异步编程 JavaScript 由于某种原因是被设计为单线程的,同时由于 JavaScript 在设计之初是用于浏览器的 GUI 编程,这也 ...
- Angular 2的12个经典面试问题汇总(文末附带Angular測试)
Angular作为眼下最为流行的前端框架,受到了前端开发者的普遍欢迎.不论是初学Angular的新手.还是有一定Angular开发经验的开发者,了解本文中的12个经典面试问题,都将会是一个深入了解和学 ...
- 前端ES6 特性兼容查询
ES6 http://kangax.github.io/compat-table/es6/ ES5 http://kangax.github.io/compat-table/es5/ ES 2016+ ...
- elk系列8之logstash+redis+es的架构来收集apache的日志
preface logstash--> redis --> logstash --> es这套架构在讲究松耦合关系里面是最简单的, 架构图如下: 解释下这个架构图的流程 首先前端lo ...
随机推荐
- Android学习笔记(四) JAVA基础知识回顾
一.接口 1)接口中定义的方法都是public权限,并且默认为public,而不是default. 2)接口的实现(implements)是特殊的继承,类似于父类子类的关系,可以向上转型(非常重要). ...
- 百度人脸识别AI实践.doc
0, 前言 百度开放了很多AI能力,其中人脸识别就是其中之一. 本文对百度人脸识别AI进行实践检验,看看其使用效果如何. 鉴于是最为基础的实践,基本都是在其接口范例代码修改而来. 百度人脸识别AI网站 ...
- MySQL(四)DQL语言——条件查询
摘要:条件查询:条件表达式,逻辑表达式,模糊查询,like,通配符,转义字符,escape关键字,between and,in,is null,is not null,安全等于. 条件查询语法: SE ...
- SpringBoot项目的mybatis逆向工程
<dependencies> <!--mybatis--> <dependency> <groupId>org.mybatis.spring.boot& ...
- webstom2017最新破解 ------------ http://blog.csdn.net/voke_/article/details/76418116
webstorm 作为最近最火的前端开发工具,也确实对得起那个价格,但是秉着勤俭节约的传统美德,我们肯定是能省则省啊. 方法一:(更新时间:2018/1/23)v3.3 注册时,在打开的License ...
- CAD使用GetAllAppName读所有名称(网页版)
主要用到函数说明: MxDrawEntity::GetAllAppName 得到所有扩展数据名称,详细说明如下: 参数 说明 [out, retval] IMxDrawResbuf** ppRet 返 ...
- Java基础(六)--枚举Enum
枚举: 刚开始项目中没怎么用过,只知道能够实现作为项目中类似定义Constant的功能,然后知道枚举实现的单例模式几乎是最优雅的,所以, 想要深入完整的了解一下 1.基本特性: Enum.values ...
- react-router 4.x 路由按需加载
react-router 4 代码分割(按需加载) 官方文档 https://serverless-stack.com/chapters/code-splitting-in-create-react ...
- 数据结构与算法(3)- C++ STL与java se中的vector
声明:虽然本系列博客与具体的编程语言无关.但是本文作者对c++相对比较熟悉,其次是java,所以难免会有视角上的偏差.举例也大多是和这两门语言相关. 上一篇博客概念性的介绍了vector,我们有了大致 ...
- C++ 类的初始化列表
class Animal{public: Animal(int weight,int height): //A初始化列表 m_weight(weight), m_height(height) { } ...