Vue笨蛋学原理：如何获取data里的对象类型里的数据

最新推荐文章于 2023-12-11 23:38:09 发布

enter键上的妹妹

最新推荐文章于 2023-12-11 23:38:09 发布

阅读量3k

点赞数

分类专栏： Vue原理

本文链接：https://blog.csdn.net/m0_47883103/article/details/108639090

版权

Vue原理专栏收录该内容

6 篇文章 1 订阅

订阅专栏

在上一篇我们只考虑了单属性，比如：( {{ 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>

enter键上的妹妹

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue笨蛋学原理：如何获取data里的对象类型里的数据

在上一篇我们只考虑了单属性，比如：( {{ name }} ),而Vue中大量的使用层级，比如：( {{ child.name. firstName}} )直接上代码如何访问name.firstName呢？let data = { name:{ firstName:'刘'，, lastName:'亦菲' }}我们是使用xxx.yyy.zzz来访问对象里的数据，也就是点运算符也可以说一个字符串路径来访问对象成员function getValueByData(obj,pa.
复制链接

扫一扫