嵌套对象中取对应的值并重组

示例: 对以下数据进行处理，数据结构为两层嵌套

  1. const result = [
  2.   {
  3.     "skus": [
  4.       {
  5.         "k_id": 10740,
  6.         "k": "颜色",
  7.         "v_id": 24,
  8.         "v": "颜色1"
  9.       }
  10.     ],
  11.     "price": 15,
  12.     "stock": 1
  13.   },
  14.   {
  15.     "skus": [
  16.       {
  17.         "k_id": 10740,
  18.         "k": "颜色",
  19.         "v_id": 83,
  20.         "v": "颜色2"
  21.       }
  22.     ],
  23.     "price": 16,
  24.     "stock": 2
  25.   }
  26. ]
  1. const temp = result.map(item=>{
  2.     const children = item.skus.map(every=>{
  3.         return{
  4.             name:every.k,
  5.             value:every.v
  6.         }
  7.     })
  8.     return {
  9.         price:item.price,
  10.         sepc_list:children
  11.     }
  12. })

数组对象有多层数据只保留两层

原数据：

  1. let nav = [{
  2.         name: "用户中心",
  3.         code: "userManage",
  4.         url: "",
  5.         component: "",
  6.         children: [{
  7.                 name: "角色管理",
  8.                 code: "userRole",
  9.                 url: "",
  10.                 component: "",
  11.                 children: [{
  12.                     name: "新建",
  13.                     code: "create"
  14.                 }]
  15.             },
  16.             {
  17.                 name: "用户管理",
  18.                 code: "userList",
  19.                 url: "",
  20.                 component: "",
  21.                 children: [{
  22.                     name: "编辑",
  23.                     code: "redact"
  24.                 }]
  25.             }
  26.         ]
  27.     },
  28.     {
  29.         name: "系统管理",
  30.         code: "systemManage",
  31.         url: "",
  32.         component: "",
  33.         children: [{
  34.             name: "应用管理",
  35.             code: "system",
  36.             url: "",
  37.             component: "",
  38.             children: [{
  39.                 name: "新建",
  40.                 code: "create"
  41.             }]
  42.         }]
  43.     }
  44. ]

得到数据：

  1. [{
  2.         name: "用户中心",
  3.         code: "userManage",
  4.         url: "",
  5.         component: "",
  6.         children: [{
  7.                 name: "角色管理",
  8.                 code: "userRole",
  9.                 url: "",
  10.                 component: ""
  11.             },
  12.             {
  13.                 name: "用户管理",
  14.                 code: "userList",
  15.                 url: "",
  16.                 component: ""
  17.             }
  18.         ]
  19.     },
  20.     {
  21.         name: "系统管理",
  22.         code: "systemManage",
  23.         url: "",
  24.         component: "",
  25.         children: [{
  26.             name: "应用管理",
  27.             code: "system",
  28.             url: "",
  29.             component: ""
  30.         }]
  31.     }
  32. ]

lodash

  1. const _ = require('lodash')
  2. function filter(arr) {
  3.   let result = _.cloneDeepWith(arr);
  4.   for (let firstLayer of result) {
  5.     if (firstLayer.children) {
  6.       for (let secondLayer of firstLayer.children) {
  7.         delete secondLayer.children;
  8.       }
  9.     }
  10.   }
  11.   return result;
  12. }
  13. let result = filter(nav);
  14. console.log("result",result[0].children[0]);
  15. console.log("原数据",nav[0].children[0]);
  1. const result = nav.map(item => {
  2.     const children = item.children.map(every => {
  3.         return {
  4.             name: every.name,
  5.             code: every.code,
  6.             url: every.url,
  7.             component: every.component,
  8.         };
  9.     })
  10.     return {
  11.         ...item,
  12.         children: children
  13.     };
  14. })
  2.   const res = nav.map((v) => {
  3.      v.children = v.children.map((c) => {
  4.        Reflect.deleteProperty(c, 'children')
  5.        return c
  6.      })
  7.      return v
  8.   })
  1. const fn = (data, limited = 1) =>
  2.     data.map(({ children, ...rest }) =>
  3.         ({
  4.             ...rest,
  5.             ...(limited === 2 ? {} : { children: fn(children, limited + 1) })
  6.         })
  7.     );

https://github.com/paularmstrong/normalizr
1602461873-5efe8f904a9f9.png

递归树

https://segmentfault.com/a/1190000018692367

根据某个值从数组中匹配完整对象

场景：有一串值。根据这些值去匹配它在对象数组中的完整值

  1. //拿到的数据
  2. ['测试', '测试2'] 
  4. //完整的数据
  5. [
  6.   {
  7.     auth_ids: null,
  8.     role_id: 15,
  9.     role_name: "测试"
  10.   },
  11.   {
  12.     auth_ids: null,
  13.     role_id: 15,
  14.     role_name: "测试2"
  15.   }
  16. ]
  1. value.forEach(item => {
  2.   const tempIn = list.filter(listItem => {
  3.     return listItem.role_name == item
  4.   })
  5.   temp.push(...tempIn)
  6. })

键值对象转换为数组对象

{ 12: a, 32: b, 43: c} 转换为
[{12:a}, {32:b}, {43: c}]

  1. // 最好不用`for-in`，`for-in`会把原型链的所有可枚举的属性枚举出来。
  3. // 可以用ES5的`Object.keys()`,只枚举当前对象的可枚举是属性。
  4. var obj = { 12: 'a', 32: 'b', 43: 'c'};
  5. var result = Object.keys(obj).map((el) => {
  6.     return {[el]: obj[el]};
  7. });
  8. console.log(result);
  10. // 也可以使用`ES8`的`Object.entries()`
  11. var result2 = Object.entries(obj).map(el => {
  12.     console.log(el[0], el[1]);
  13.     return {[el[0]]: el[1]};
  14. });
  15. console.log(result2);

双层嵌套的数组如何对其中的某个值进行相加

  1. let arr = [
  2.     [
  3.         {
  4.             name: 'a',
  5.             number: 10
  6.         }
  7.     ],
  8.     [
  10.         {
  11.             name: 'a',
  12.             number: 10
  13.         }
  14.     ],
  15.     [
  16.         {
  17.             name: 'a',
  18.             number: 10
  19.         }
  20.     ]
  21. ]

方案一：扁平化数组在进行相加

  1. let flatArr = arr.flat()
  2. let res = flatArr.reduce((pre, cur) => {
  3.     return pre + cur.number
  4. }, 0)

扁平化数组转为树形数据

https://juejin.cn/post/7026744869158649892

专题：多维数组的处理