数组转对象的方法 数组转树状结构 对象转数组

数组转对象的方法 数组转树状结构 对象转数组

	// 数组转对象的方法
			const arr = [{label: '男', value: 0},{label: '女', value: 1}]
			function f(arr) {
			  // 写代码
			  // reduce
			  // 方法一
			    // let obj = {};
			    //   arr.map((e) => {
			    //     obj[e.value] = e.label;
			    //   });
					// 方法二
					let obj = {};
					for (var item in arr){
					         obj[arr[item].value] = arr[item].label;
					     };
					return obj
			}
			const obj = f(arr) // obj ===> {0: '男', 1:'女'}
			console.log(obj);
			//方法三
			//数组转对象 json字符串
		
	// 方法三
		let arr = [{
		    name: 'dr',
		    ct: 'dr001'
		},
		{
		    name: 'ljy',
		    ct: 'ljy002'
		}]
		let obj = {}
		arr.forEach(item=> {
		    obj[item.name] = item.ct
		})
		 
		console.log('obj', JSON.stringify(obj, null, 2));

对象转数组的方法

方法一

const obj = { 0: '男', 1:'女'}
		function f(obj) {
		  // 写代码
		  let arr=[]
		  for (const key in obj) {
		   // console.log(key);
			arr.push({label:obj[key],value:key})
		  }
		  return arr
		}
		const arr = f(obj) // arr ===>  [{label: '男', value: 0},{label: '女', value: 1}]
		console.log(arr);

数组转树状结构

// 数组转树状结构
			const data = [{
					id: "01",
					name: "张大大",
					pid: "",
					job: "项目经理"
				},
				{
					id: "02",
					name: "小亮",
					pid: "01",
					job: "产品leader"
				},
				{
					id: "03",
					name: "小美",
					pid: "01",
					job: "UIleader"
				},
				{
					id: "04",
					name: "老马",
					pid: "01",
					job: "技术leader"
				},
				{
					id: "05",
					name: "老王",
					pid: "01",
					job: "测试leader"
				},
				{
					id: "06",
					name: "老李",
					pid: "01",
					job: "运维leader"
				},
				{
					id: "07",
					name: "小丽",
					pid: "02",
					job: "产品经理"
				},
				{
					id: "08",
					name: "大光",
					pid: "02",
					job: "产品经理"
				},
				{
					id: "09",
					name: "小高",
					pid: "03",
					job: "UI设计师"
				},
				{
					id: "10",
					name: "小刘",
					pid: "04",
					job: "前端工程师"
				},
				{
					id: "11",
					name: "小华",
					pid: "04",
					job: "后端工程师"
				},
				{
					id: "12",
					name: "小李",
					pid: "04",
					job: "后端工程师"
				},
				{
					id: "13",
					name: "小赵",
					pid: "05",
					job: "测试工程师"
				},
				{
					id: "14",
					name: "小强",
					pid: "05",
					job: "测试工程师"
				},
				{
					id: "15",
					name: "小涛",
					pid: "06",
					job: "运维工程师"
				}
			]

			// 完成代码
			function arrToTree(data) {

				// 你的代码
				let result = []
				if (!Array.isArray(data)) {
					return result
				}
				data.forEach(item => {
					delete item.children;
				});
				let map = {};
				data.forEach(item => {
					map[item.id] = item;
				});
				data.forEach(item => {
					let parent = map[item.pid];
					if (parent) {
						(parent.children || (parent.children = [])).push(item);
					} else {
						result.push(item);
					}
				});
				return result;

			}

			// 目标:
			const treeData = arrToTree(data)
			console.log(treeData);
export function tranListToTreeData(list) {
  // 最终要产出的树状图 数据的数组
  const treeList = []
  // 所有项都使用对象存储起来
  const map = {}
/* 基本思路 把数组转成对象格式存入到map中 数组中的id当对象的键 数组中的对象当值
	遍历原数组 使用map[item.pid] 取对象里面的值 如果能取到 表明pid和某项id相等 把这一项追加到 children中
	如果不能取到 表明这一项没有父级了追加到新的数组中
*/
  // 建立映射关系 通过id快速找到对应的元素
  list.forEach(item => {
    if (!item.children) {
      item.children = []
    }
    map[item.id] = item
  })
  // {
  //   "312c": { 'id': '312c', 'pid': '',     'name': '财务部',    children: [{ 'id': '312d', 'pid': '312c', 'name': '财务核算部',children: []}] },
  //   "312d": { 'id': '312d', 'pid': '312c', 'name': '财务核算部',children: []}
  // }
  list.forEach(item => {
    const parent = map[item.pid]
    if (parent) {
      parent.children.push(item)
    } else {
      treeList.push(item)
    }
  })
  return treeList
}

树状结构转一维数组

function treeToArray(tree) {
  const obj = []
  tree.forEach((item) => {
    if (item.children) {
      obj.push( item, ...item.children )
      // ES6新增的 删除对象的属性 Reflect.deleteProperty(对象,属性名)
      Reflect.deleteProperty(item,'children')
    } else {
      obj.push(item)
    }
  })
  return obj
}
console.log(treeToArray(tree))
// 根据层级 可这样调用console.log(treeToArray(treeToArray(tree)))
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值