En el artículo anterior, solo consideramos atributos únicos, como: ({ {nombre}}), mientras que una gran cantidad de niveles de uso en Vue, como: ({ {child.name. FirstName}})
Codificar directamente
- ¿Cómo acceder a name.firstName?
let data = {
name:{
firstName:'刘'，,
lastName:'亦菲'
}
}
- Usamos xxx.yyy.zzz para acceder a los datos en el objeto, que es el operador de punto
- También puede decir una ruta de cadena para acceder a los miembros del objeto
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]]
}
Si encontramos el patrón, podemos tratarlo en un bucle.
let res = obj;
let prop;
while(prop = paths.shift()) {
// 取出数组里第一个元素，且改变原数组
res = res[prop] // 赋值
}
return res; // 把结果返回
Vamos a probarlo
let res = getValueByData(data,'name.firstName')
console.log(res)
Código completo
<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>