Google I/O 2019上提及的Javascript新特性
使用#来定义私有属性
#count
是私有变量,不能通过 IncreasingCounter
实例访问
class IncreasingCounter {#count = 0;get value(){console.log( ' Getting the current value!');return this.#count++}
}
复制代码
子类可省略super(args);
class Animal {constructor(name) {this.name = name;}
}
class Cat extends Animal {constructor(name) {super(name);this.likesBaths =false;}meow() {console.log('Meow!');}
}
复制代码
super()
这种在子类构造函数中模板式的写法可以不用了
class Cat extends Animal {likesBaths = false;meow() {console.log('Meow!');}
}
复制代码
字符串新增 matchAll 方法
在 matchAll 出现之前,通过在循环中调用regexp.exec
或string.match
来获取所有匹配项信息
const regexp = RegExp('fo*','g');
const str = 'table football, foosball';
while ((matches = regexp.exec(str)) !== null) {console.log(matches[0]);
}
复制代码
const str = 'table football, foosball';
const regex = /fo*/gu ;
for (const match of str . match( regex)) {console . log(match)
};
复制代码
使用string.matchAll
const regexp = RegExp('foo*','g');
const str = 'table football, foosball';
let matches = str.matchAll(regexp);for (const match of matches) {console.log(match);
}
复制代码
使用matchAll
的另外一个亮点是更好地获取分组捕获。因为当使用match()和/g标志方式获取匹配信息时,分组捕获会被忽略:
const string = 'Favorite GitHub repos: tc39/ecma262 v8/v8.dev';
const regex = /\b(?<owner>[a-z0-9]+)\/(?<repo>[a-z0-9\.]+)\b/g;
for (const match of string.matchAll(regex)) {console.log(`${match[0]} at ${match. index} with '${match.input}'`);console.log(`owner: ${match.groups.owner}`);console.log(`repo: ${match.groups.repo}`);
}
复制代码
BigInt进行大数字计算
大数据字,如 1234567890123456789 * 123
计算不了?js不存在了
1234567890123456789n * 123n;
//151851850485185185047n V
复制代码
array.flat和array.flatMap
// Flatten one level :
const array = [1, [2, [3]]];
array. flat( ) ;// [1, 2, [3] ]
//Flatten recursively until the array contains no
// more nested arrays :
array . flat( Infinity) ;// [1,2,3]//flatMap
const duplicate = (x) => [x, x] ;[2, 3, 4] . map( duplicate) . flat();// [2, 2, 3,3, 4, 4]
// use flatMap will be more simple
[2, 3, 4]. flatMap( duplicate) ;// [2,2,3,3,4,4]复制代码
array.sort稳定排序
对数组的元素进行排序,并返回数组。排序算法现在是稳定的了!
Object.fromEntries
const object = {x:42,y:50};
const entries = Object . entries( object) ;// [['x', 42], ['y', 50]]
const result = Object. fromEntries(entries) ;// {x:42,y:50}const map=new Map(entries);
//Convert the map back into an object;
const objectCopy=Object.fromEntries(map);
复制代码
获取全局对象
下面的代码可以不需要了
const getGlobalThis = ( ) =>
{if ( typeof self !== ' undefined' ) return self ;if ( typeof window !== ' undefined') return window ;if ( typeof global !=='undefined') return global ;if ( typeof this!=='undefined') return this ;throw new Error('Unable to locate global object') ;
};
复制代码
使用这个吧
const theGlobalThis = globalThis;
复制代码
在最外层使用await
之前,await必须要放在async函数中执行,如果要在最外层使用,得像这样
//在最外层执行await
( async function() {const result = await doSomethingAsync() ;doSomethingElse( );
})();
复制代码
现在不用了
const result = await doSomethingAsync() ;
doSomethingElse( );
复制代码
增Promise.allSettled,Promise.any
Promise.all
和Promise.race
会因为reject中断,如果不希望这样,可以使用Promise.allSettled
,Promise.any
替代。
WeakRef
WeakMap
仅支持 object 类型作为 Key 的场景,·并且不能遍历。WeakRef
封装的对象将为弱引用,可以将这个对象赋值给其它变量。如睛,ref为WeakMap对像,当其封装的对象不存在时,ref也会被回收;
const cache =new Map();
function getImageCached(name ) {letref = cache.get(name);if (ref !== undefined) {const deref = ref.deref();if (deref !== undefined) return deref;const image = performExpensiveOperation(name);ref = new WeakRef(image);cache.set(name, ref);return image;}
}
复制代码
那保存WeakMap对象的变量怎么回收呢,解决方案是引入一个新的 API FinalizationGroup()
。在FinalizationGroup
上注册一个回调函数,用来在 GC 触发时从缓存中删除这些变量。
const cache = new Map();
const finalizationGroup = new FinalizationGroup((iterator) => {for (const name of iterator) {const ref = cache.get(name);if (ref !== undefined && ref.deref() === undefined) {cache.delete(name);}}
});复制代码
本地化接口 Intl
Intl
是 ECMAScript 国际化 API 的一个命名空间,它提供了精确的字符串对比、数字格式化,和日期时间格式化。 可参考这里: developer.mozilla.org/zh-CN/docs/… 特别提到了Intl.RelativeTimeFormat
,感受下吧
var rtf1 = new Intl.RelativeTimeFormat('zh', { style: 'narrow' });
console.log(rtf1.format(3, 'quarter'));
//"3个季度后"
console.log(rtf1.format(-1, 'day'));
//"1天前"
var rtf2 = new Intl.RelativeTimeFormat('zh', { numeric: 'auto' });
console.log(rtf2.format(2, 'day'));
//"后天"
复制代码
转载于:https://juejin.im/post/5ce7aaad51882532e9631dbe
Google I/O 2019上提及的Javascript新特性相关推荐
- 【C/C++】C++98基础上的C++11新特性
一.新语法 1.自动类型推导auto auto的自动推导,用于从初始化表达式中推断出变量的数据类型. //C++98 int a = 10; string s = "abc"; f ...
- 7 个令人兴奋的 JavaScript 新特性
作者 | 浪里行舟君 责编 | 屠敏 前言 一个ECMAScript标准的制作过程,包含了Stage 0到Stage 4五个阶段,每个阶段提交至下一阶段都需要TC39审批通过.本文介绍这些新特性处于S ...
- 码匠编程:7 个令人兴奋的 JavaScript 新特性
前言 一个ECMAScript标准的制作过程,包含了Stage 0到Stage 4五个阶段,每个阶段提交至下一阶段都需要TC39审批通过.本文介绍这些新特性处于Stage 3或者Stage 4阶段,这 ...
- 安卓9.0发布,献上Android 9.0新特性适配处理
安卓9.0即Android 9.0已经面向全球发布,它的代号是Pie,仍然基于Linux内核构建.为了避免Android 9.0 Pie新特性更新引发的适配问题,本文将介绍Android 9.0将带来 ...
- 七、JavaScript新特性
7.1.ECMAScript6新特性 7.1.1.关键字 1.let关键字 不允许重复声明 块儿级作用域 不存在变量提升 不影响作用域链 2.const关键字 不允许重复声明 块儿级作用域 声明必须赋 ...
- JavaScript新特性 async和await
前面聊了promise,如果不懂的话可以翻看一些前面的文章:传送门 着两个关键字一般都是成对出现的,所以本篇聊一下. async一般用来修饰函数的,其修饰的函数称为变成async函数.而在这个函数中可 ...
- JDK8-17新特性(上)
JDK8-17新特性(上) 目录 JDK8-17新特性(上) 1. Java8新特性:Lambda表达式 1.1 关于Java8新特性简介 1.2 冗余的匿名内部类 1.3 好用的lambda表达式 ...
- [转]IntelliJ IDEA 2019.3正式发布,给我们带来哪些新特性?
每篇一句 工欲善其事必先利其器 --<论语·卫灵公> 前言 千呼万唤始出来.自从JetBrains在今年7月24日发布了IDEA 2019.2版本后,从9月份开始我便一直在关注此版本正式版 ...
- 怎么真正入行Web前端行业?JavaScript五大新特性是什么?
怎么真正入行Web前端行业?JS五大新特性是什么?JavaScript是Web开发者必学的三种语言之一,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言.随着互联网的更迭以及技术的革新,Jav ...
最新文章
- Bruck:一个Web界面布局原型设计框架\n
- 如何保证缓存和数据库的双写的一致性
- linux mint 17.3 内核,LinuxMint 17.3 Cinnamon抢鲜评测
- Android 中ContentProvider和Uri详解
- 网站推广——网站推广优化期间突然发现网站收录降低怎么回事?
- Tensorflow编程遇到的问题汇总【持续更新】
- python排序之sort和sorted
- 搭建Eclipse C++开发环境
- 基于Tensorflow实现DeepFM
- linux安装pytorch-GPU版本
- java 连接数据库查询_JAVA连接数据库,查询功能怎么写
- excel常用快捷键excel快捷键汇总
- 云原生虚拟网络之 VXLAN 协议
- 突破HR的职业发展瓶颈:放弃“优秀”!
- 【知识点总结】【CSP考前复习】图论大杂烩【未完】
- GSoC 从开始到中选
- 下载安装dingding
- 关于励志的名人名言----做人的名言
- 数据重塑_借助实时3D重塑车载体验
- 屏蔽不显示VS警告warning