对象与浅拷贝的妙用

前言

开发过程中我们经常遇到需要循环对象数组，递归循环树查询某个对象，对对象进行赋值，如果每次查询都用到循环都会消耗很大的资源，这个时候 我们就可以巧妙的使用对象来完成查询、浅拷贝进行赋值

数组的查询及赋值

首先我们先定义一个id作为key的对象数组

	let arr = [{
		id:1,
		name:"苹果"
	},{
		id:2,
		name:"香蕉"
	},{
		id:3,
		name:"荔枝"
	},{
		id:4,
		name:"小米"
	}]

使用数组循环来查询赋值

这个时候需要赋值id为 3 的对象我们就需要循环列表查询并赋值

	for(let x of arr) {
		if(x.id == 3 ) {
			x.checked = true
			break;
		}
	}
	
	//此时 id为3的对象变为了
	// {
	//	id:3,
	//	name:"荔枝",
	//	checked:true
	// }

这种循环数据量少的时候资源消耗不大，但是一旦数据成千上万，而又频繁使用的时候，这个时候就需要注意性能问题了。

使用对象查询赋值

这种时候我们可以使用对象的形式解决这种问题

首先我们将数组转换为对象

	//根据key转换为keymap对象
	function toMap (arr,char='-', ...idField) {
		if (!arr||!idField.length) return {};
		let map = {};
		arr.forEach(function (item) {
			let field = '';
			idField.map(id=>{
				field += item[id] + char;
			})
			map[field.substr(0,field.length - char.length)] = item;
		});
		return map;
	}
	
	let obj = toMap(arr,undefined,'id');
	console.log(obj);
	{
		1:{
			id:1,
			name:"苹果"
		},
		2:{
			id:2,
			name:"香蕉"
		},
		3:{
			id:3,
			name:"荔枝"
		},
		4:{
			id:4,
			name:"小米"
		},
	}
	

此时找到id为 3 的对象并修改就可以极其方便的使用了

	obj[3].checked = true;
	// obj[3] =  {
	//		id:3,
	//		name:"荔枝",
	//		checked:true
	// }

这个时候你可能要问了，我要修改arr这个数组，你修改obj这个对象有什么用呢？我还不是要去修改arr里面的数据?

此时浅拷贝就大发神威了

这个时候你去打印arr数组的时候会发现id为 3 的对象也被赋值了