在上一篇我们只考虑了单属性，比如：( { { name }} ),而Vue中大量的使用层级，比如：( { { child.name. firstName}} )
直接上代码
- 如何访问name.firstName呢？
let data = {
name:{
firstName:'刘'，,
lastName:'亦菲'
}
}
- 我们是使用xxx.yyy.zzz来访问对象里的数据，也就是点运算符
- 也可以说一个字符串路径来访问对象成员
function getValueByData(obj,path) {
// 分隔为数据[xxx,yyy,zzz]
let paths = path.split('.');
let res = null;
// 先获取obj.xxx，在取得结果中的yyy，在取得结果中的zzz
res = obj[paths[0]]
res = res[paths[1]]
res = res[parhs[2]]
}
发现了规律，我们就可以循环来处理
let res = obj;
let prop;
while(prop = paths.shift()) {
// 取出数组里第一个元素，且改变原数组
res = res[prop] // 赋值
}
return res; // 把结果返回
我们来试验一下
let res = getValueByData(data,'name.firstName')
console.log(res)
完整的代码
<body>
<script type="text/javascript">
let data = {
name:{
firstName:'刘',
lastName:'亦菲'
}
}
function getValueByData(obj,path) {
// 分隔为数据[xxx,yyy,zzz]
let paths = path.split('.');
// let res = null;
// 先获取obj.xxx，在取得结果中的yyy，在取得结果中的zzz
// res = obj[paths[0]]
// res = res[paths[1]]
// res = res[parhs[2]]
let res = obj;
let prop;
while(prop = paths.shift()) {
res = res[prop]
}
return res;
}
let res = getValueByData(data,'name.firstName')
console.log(res)
</script>
</body>