ES2019 中的 JavaScript 新特性
JavaScript 从成立之初就已经走了很长一段路,提供了许多新的功能,这些功能是专门设计来使该语言更加人性化和提升效率。以下是我最近发现的一些有趣的JavaScript 新增内容。其中一些功能已在 Node,Chrome,Firefox 和 Safari 中可用,而其他功能仍处于建议阶段。
Optional chaining (可选链)
Optional chaining 可选链使用 ?.
操作符来表示,Optional Chaining 使我们能检查一个对象上面是否存在某属性。其它一些语言有类似的特性。例如 C# 有 Null Conditional 操作符。而 JavaScript 的 Optional chaining 在需要深度访问嵌套对象属性时就特别有用。
当我们在访问对象的属性前,我们需要用 ?.
操作符来确定该属性是否存在。
首先看看下面代码:
const users = [
{
name: "Olagunju Gbolahan",
occupation: "Software Developer",
sayName(){
console.log(`my name is ${this.name}`);
},
address: { office: "New York" }
},
{ name: "Olawaseyi Moses" },
{ name: "Tunde Ednut" }
];
在该数组对象中,第二个对象是 secondUser:
const secondUser = users[1];
我们需要知道该用户的办公室地址,在没有 Optional chaining 之前,我们需要使用一种很低效的方式来验证该属性是否已存在:
const theAddress = secondUser.address && secondUser.address.office;
console.log(theAddress); // undefined
如果我们是一个深度嵌套的对象,那就必须通过 && 操作符来判断每一层的对象是否有效:
但是有了 optional chaining ,代码便可简化如下:
const theAddress = secondUser?.address?.office;
console.log(theAddress); // undefined
我们还可以使用 optional chaining 来确认对象的某个方法是否存在:
const firstUser = users[0];
console.log(firstUser.sayName?.()); // 我的名字是 Olagunju Gbolahan
如果方法名不存在的话,它会简单的返回 undefined
:
console.log(firstUser.sayOccupation?.()); // undefined
目前该特性尚未添加到 JavaScript 规范中,目前还处于草案建议阶段。
你可以通过 babel-plugin-proposal-optional-chaining 这个插件来实现相同功能。
你也可以阅读 《Optional Chaining 特性进入 Stage 3,TypeScript 跟进》 这篇文章来了解更多关于该特性的进展。
Optional catch binding (可选的错误捕获绑定)
当我们事先知道错误将是什么,并且我们不希望冗余未使用的变量时,此功能将派上用场。
首先看看常规的 try 和 catch 的代码块:
try {
const parsedJsonData = JSON.parse(obj);
} catch (error) {
//obj 变量在使用时没有进行定义
console.log(obj);
}
而通过错误捕获绑定,我们无需提供未使用的变量,特别是当我们已经为 try 块提供默认处理的情况下:
function getName () {
let name = "Gbolahan Olagunju";
try {
name = obj.details.name
} catch {}
console.log(name);
}
管道操作符
这是对 JavaScript 的拟议补充之一,目前处于第1阶段。本质上,它有助于使对同一参数的多个函数调用可读。
它通过将表达式的值作为参数传递给函数来实现。
在没有管道运算符的情况下调用以下函数|>
。
const capitalize = (input) => input[0].toUpperCase() + input.substring(1);
const removeSpaces = (input) => input.trim();
const repeat = (input) => `${input}, ${input}`;
const withoutpipe = repeat(capitalize(removeSpaces(' i am gbols ')));
console.log(withoutpipe); // I am gbols, I am gbols
而通过管道操作符,可读性大幅提升:
const withpipe = ' i am gbols '
|> removeSpaces
|> capitalize
|> repeat;
console.log(withpipe); // // I am gbols, I am gbols
String.trimStart 和 String.trimEnd
这两个方法在之前被命名为 trimRight 和 trimLeft,但在 ES2019 中将名字修改为 trimStart 和 trimEnd ,表述更加直观:
示例代码:
let message = " Welcome to LogRocket ";
message.trimStart(); // "Welcome to LogRocket "
message.trimEnd(); // "Welcome to LogRocket";
Object.fromEntries
在聊 Object.fromEntries 之前,有必要先看看 Object.entries.
Object.entries 是在 ES2017 规范中引入的,用于将对象转成数组,并可通过数组相关的函数进行访问。
示例代码:
const devs = {
gbols: 5,
andrew: 3,
kelani: 10,
dafe: 8,
};
const arrOfDevs = Object.entries(devs);
console.log(arrOfDevs);
//[
// ["gbols", 5]
// ["andrew", 3]
// ["kelani", 10]
// ["dafe", 8]
//]
然后我们可以使用 filter
方法来获取数组中超过 5 年经验的对象:
const expDevs = arrOfDevs.filter(([name, yrsOfExp]) => yrsOfExp > 5);
console.log(expDevs);
//[
// ["kelani", 10]
// ["dafe", 8]
//]
那么就会有一个新的问题:没有一个简单的方法将最新的数组重新变成对象。通常我们需要自己编写代码将数组变成对象:
const expDevsObj = {};
for (let [name, yrsOfExp] of expDevs) {
expDevsObj[name] = yrsOfExp;
}
console.log(expDevsObj);
//{
//dafe: 8
//kelani: 10
//}
但是现在通过 Object.fromEntries 就可以把这个过程极大简化:
console.log(Object.fromEntries(expDevs));
//{
//dafe: 8
//kelani: 10
//}
Flat
很多使用我们需要处理深度嵌套的数组,这个时候将数组展平就特别重要。
先看看如下代码:
const developers = [
{
name: 'Gbolahan Olagunju',
yrsOfExp: 6,
stacks: ['Javascript', 'NodeJs', ['ReactJs', ['ExpressJs', 'PostgresSql']]]
},
{
name: 'Daniel Show',
yrsOfExp: 2,
stacks: ['Ruby', 'Jest', ['Rails', ['JQuery', 'MySql']]]
},
{
name: 'Edafe Emunotor',
yrsOfExp: 9,
stacks: ['PHP', 'Lumen', ['Angular', 'NgRx']]
}
];
const allStacks = developers.map(({stacks}) => stacks);
console.log(allStacks);
// [
// ['Javascript', 'NodeJs', ['ReactJs', ['ExpressJs', 'PostgresSql']]]
// ['Ruby', 'Jest', ['Rails', ['JQuery', 'MySql']]]
// ['PHP', 'Lumen', ['Angular', 'NgRx']]
// ]
allstacks
变量包含深度嵌套的数组,为了将该数组展平,我们可以使用 Array.prototype.flat 方法。
示例代码:
const flatSingle = allStacks.flat();
console.log(flatSingle);
//[
// "JavaScript",
// "NodeJs",
// ['ReactJs', ['ExpressJs', 'PostgresSql']]]
// "Ruby",
// "Jest",
// ['Rails', ['JQuery', 'MySql']]]
// "PHP",
// "Lumen"
// ["Angular", "NgRx"]
//]
从上面代码可以推断出数组被展平了一层深,这是 array.prototype.flat 的默认参数。
我们可以向flat方法传递一个参数,以确定要展平的程度。
defaults 参数的值为1。为了完全展平数组,我们可以传递一个无穷大的参数。参数 infinity 使数组完全变平,与数组的深度无关。
示例代码:
const completelyFlat = allStacks.flat(Infinity);
console.log(completelyFlat);
//[
// "JavaScript",
// "NodeJs",
// "ReactJs",
// "ExpressJs",
// "PostgresSql",
// "Ruby",
// "Jest",
// "Rails",
// "JQuery",
// "MySql",
// "PHP",
// "Lumen",
// "Angular",
// "NgRx"
//]
FlatMap
FlatMap 相当于将 map 方法和 flat 方法合并起来,并默认使用深度为 1 的新方法。相当于是以更简洁的代码实现两种逻辑的组合。
下面是一个简单使用 map 和 flatMap 的代码:
let arr = ['my name is Gbols', ' ', 'and i am great developer'];
console.log(arr.map(word => word.split(' ')));
//[
// ["my", "name", "is", "Gbols"],
// ["", ""],
// ["and", "i", "am", "great", "developer"]
//]
console.log(arr.flatMap(word => word.split(' ')));
//[ "my"
// "name"
// "is"
// "Gbols"
// ""
// ""
// "and"
// "i"
// "am"
// "great"
// "developer"
//]
总结
在这篇文字中,我们详细介绍了一些 JavaScript 最新添加的新特性,这些新的特性通过减少冗长的代码以及提升代码的可读性来增强了开发者的体验。不过还有很多新的特性在本文中没有涉及,欢迎大家补充和分享。
本文翻译自 https://blog.logrocket.com/new-es2019-javascript-features-every-developer-should-be-excited-about/
欢迎关注我的个人公众号 —— 红薯胡说

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
-
上一篇
你必知的 Kubernetes 自动缩放
作者:Juan Ignacio Giro 译者:段访 审校:罗广明 原文: https://caylent.com/kubernetes-autoscaling 编者按 许多Kubernetes用户,特别是那些企业级用户,很快就遇到了对环境自动缩放的需求。幸运的是,Kubernetes Horizontal Pod Autoscaler(HPA)允许您将部署配置为以多种方式水平扩展。使用Kubernetes Autoscaling的最大优势之一是您的集群可以跟踪现有Pod的负载能力,并计算是否需要更多的Pod。 Kubernetes Autoscaling 通过协调内置的两层可扩展性,可以充分利用高效的Kubernetes Autoscaling: Pod级别的自动缩放:包括Horizontal Pod Autoscaler(HPA)和Vertical Pod Autoscaler(VPA); 两者都可以扩展容器的可用资源。 集群级别的自动缩放:集群自动调节器(CA)通过在必要时向上或向下扩展集群内的节点数来管理这种可扩展性平面。 Kubernetes Autoscaling 详情 H...
-
下一篇
Scala implicit 隐式转换安全驾驶指南
这篇短文将结合实例对隐式转换的各种场景进行解释和总结,希望看完的人能够安全驶过隐式转换这个大坑。 隐式转换函数 隐式转换函数有两种作用场景。 1 转换为期望类型:就是指一旦编译器看到X,但需要Y,就会检查从X到Y的隐式转换函数。 2 转换方法的调用者:简单来说,如obj.f(),如果obj对象没有f方法,则尝试将obj转换为拥有f方法的类型。 object ImpFunction extends App { class Dog(val name: String) { def bark(): Unit = println(s"$name say: Wang !") } implicit def double2int(d: Double): Int = d.toInt implicit def string2Dog(s: String): Dog = new Dog(s) val f: Int = 1.1 //转换为期望类型,1.1通过double2int转成了Int类型 println(f) "Teddy".bark() // 转换方法的调用者,字符串通过string2Dog转成了Dog...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- MySQL数据库在高并发下的优化方案
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- CentOS7,8上快速安装Gitea,搭建Git服务器
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- CentOS8编译安装MySQL8.0.19
- Dcoker安装(在线仓库),最新的服务器搭配容器使用