0%

JS 可选链操作符

问题

优化下面的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
function filterCategories(list = [], name) {
return list.filter((data) => {
let { extensions } = data;
if (extensions == undefined) {
return false;
}
let { appName } = extensions;
if (appName == undefined) {
return false;
}
return appName == name;
});
}

为了容错,每次获取对象下面属性都会先判断一下。但是代码看上去不优雅

比如还有这种写法,更难看了

1
2
3
4
5
6
7
8
9
10
11
function filterCategories(list = [], name) {
return list.filter((data) => {
try {
let { extensions } = data;
let { appName } = extensions;
return appName == name;
} catch (error) {
return false;
}
});
}

群里的也有群友说用 lodash 里的_.has _.get方法

解决

MDN - 可选链操作符,优雅的一行解决问题。

1
2
3
function filterCategories(list = [], name) {
return list.filter((data) => data?.extensions?.appName == name);
}

后记

IE:小老弟,你写的什么东西?我看不懂

一声不吭直接 babel.io 转码安排上

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function filterCategories(list = [], name) {
return list.filter((data) => {
var _data$extensions;

return (
(data === null || data === void 0
? void 0
: (_data$extensions = data.extensions) === null ||
_data$extensions === void 0
? void 0
: _data$extensions.appName) == name
);
});
}