在快应用中链式取值的正确姿势
开发中，链式取值是非常正常的操作，如：
res.data.goods.list[0].price
但是对于这种操作报出类似于Uncaught TypeError: Cannot read property 'goods' of undefined 这种错误也是再正常不过了，如果说是 res 数据是自己定义，那么可控性会大一些，但是如果这些数据来自于不同端（如前后端），那么这种数据对于我们来说我们都是不可控的，因此为了保证程序能够正常运行下去，我们需要对此校验：
if (res.data.goods.list[0] && res.data.goods.list[0].price) {
// your code
}
如果再精细一点，对于所有都进行校验的话，就会像这样:
if (res && res.data && res.data.goods && res.data.goods.list && res.data.goods.list[0] && res.data.goods.list[0].price){
// your code
}
不敢想象，如果数据的层级再深一点会怎样，这种实现实在是非常不优雅，那么如果优雅地来实现链式取值呢？
方法一：通过函数解析字符串（lodash 的 _.get 方法）
首先，我们需要安装 lodash
npm install lodash --save
然后就可以在 ux 文件中使用_.get 方法了
<template>
<div class="wrapper">
<!-- grandson -->
<text>{{
_get(this, "parent.children[0].grandson[0].name", "default")
}}</text>
<!-- default -->
<text>{{
_get(this, "parent.non_children[0].grandson[0].name", "default")
}}</text>
</div>
</template>
<script>
import _ from "lodash";
export default {
data: {
parent: {
name: "parent",
children: [
{
name: "children",
grandson: [
{
name: "grandson",
},
],
},
],
},
},
onInit() {
console.log(
"use lodash",
_.get(this, "parent.children[0].grandson[0].name", "default")
); //grandson
console.log(
"use lodash",
_.get(this, "parent.non_children[0].grandson[0].name", "default")
); //default
},
//混入_.get方法，使_.get能够在template标签中使用
_get: _.get,
};
</script>
除了直接使用 lodash 的_.get 方法，我们也可以自己封装一个函数来解析字符串
/**
* get.js
*/
export function _get(obj, props, def) {
if (obj == default || obj == null || typeof props !== 'string') return def;
const temp = props.split('.');
const fieldArr = [].concat(temp);
temp.forEach((e, i) => {
if (/^(\w+)\[(\w+)\]$/.test(e)) {
//解析obj[xxx]
const matchs = e.match(/^(\w+)\[(\w+)\]$/);
const field1 = matchs[1];
const field2 = matchs[2];
const index = fieldArr.indexOf(e);
fieldArr.splice(index, 1, field1, field2);
}
})
return fieldArr.reduce((pre, cur) => {
if (pre === default) return pre
const target = pre[cur] || def;
if (target instanceof Array) {
return [].concat(target);
}
if (target instanceof Object) {
return Object.assign({}, target)
}
return target;
}, obj)
}
然后就可以直接在 ux 文件中使用了
<template>
<div class="wrapper">
<!-- grandson -->
<text>{{
_get(this, "parent.children[0].grandson[0].name", "default")
}}</text>
<!-- default -->
<text>{{
_get(this, "parent.non_children[0].grandson[0].name", "default")
}}</text>
</div>
</template>
<script>
import { _get } from "path to get.js";
export default {
private: {
parent: {
name: "parent",
children: [
{
name: "children",
grandson: [
{
name: "grandson",
},
],
},
],
},
},
onInit() {
console.log(
"use get.js file",
_get(this, "parent.children[0].grandson[0].name", "default")
); //grandson
console.log(
"use get.js file",
_get(this, "parent.non_children[0].grandson[0].name", "default")
); //default
},
//混入_get方法，使_get能够在template标签中使用
_get,
};
</script>
方法二：使用 Proxy
除了通过解析字符串的方式读取属性，也可以将源对象加一层代理，在 handler 中对读取操作做一些处理
/**
* get.js
*/
export function _get(obj, path = []) {
return new Proxy(() => { }, {
get(target, property) {
return _get(obj, path.concat(property))
},
apply(target, self, args) {
let val = obj;
for (let i = 0; i < path.length; i++) {
if (val === null || val === default) break;
val = val[path[i]]
}
if (val === null || val === default) {
val = args[0]
}
return val;
}
})
}
<template>
<div class="wrapper">
<!-- grandson -->
<text>{{ _get(parent).children[0].grandson[0].name("default") }}</text>
<!-- default -->
<text>{{ _get(parent).non_children[0].grandson[0].name("default") }}</text>
</div>
</template>
<script>
import { _get } from "path to get.js";
export default {
private: {
parent: {
name: "parent",
children: [
{
name: "children",
grandson: [
{
name: "grandson",
},
],
},
],
},
},
onInit() {
console.log(
"use proxy",
_get(this.parent).children[0].grandson[0].name("default")
); //grandson
console.log(
"use proxy",
_get(this.parent).non_children[0].grandson[0].name("default")
); //default
},
//混入_get方法，使_get能够在template标签中使用
_get,
};
</script>
注意，不管是否传入默认值，末尾都要加上()作为函数调用，以触发apply捕捉器
方法三：可选链
第三种方式是使用 ES 的新语法，这种方式需要借助 babel 来使用。首先检查你的项目依赖中的babel版本，如果你的 babel 版本<7，那么得先解决 babel 版本升级的问题。如果是 babel7 以上的版本，可以添加以下devDependencies依赖：
@babel/plugin-proposal-optional-chaining
然后在.babelrc 或者 babel.config.js 中这加入这个插件：
{
"plugins": ["@babel/plugin-proposal-optional-chaining"]
}
之后就可以愉快地使用了！
<template>
<div class="wrapper">
<!-- grandson -->
<text>{{ parent?.children?.[0]?.grandson?.[0]?.name || "default" }}</text>
<!-- default -->
<text>{{
parent?.non_children?.[0]?.grandson?.[0]?.name || "default"
}}</text>
</div>
</template>
<script>
export default {
private: {
parent: {
name: "parent",
children: [
{
name: "children",
grandson: [
{
name: "grandson",
},
],
},
],
},
},
onInit() {
console.log(
"use optional chaining",
this.parent?.children?.[0]?.grandson?.[0]?.name || "default"
); //grandson
console.log(
"use optional chaining",
this.parent?.non_children?.[0]?.grandson?.[0]?.name || "default"
); //default
},
};
</script>
另外，如果使用的是最新版本的快应用开发工具，可以无须配置直接使用可选链的语法
注意：可选链可以直接在 template 标签中使用
