初始数据

const cards = [
  {
    name: "myMember",
    nameZH: "我的会员卡",
    cardAuth: 1,
    value: [
      {
        name: "预约",
        subAuth: "update",
      },
      {
        name: "查询",
      },
    ],
  },
  {
    name: "oilStationManage",
    nameZH: "历史记录",
    cardAuth: 0,
    value: [
      {
        name: "消费记录",
        subAuth: "read",
      },
      {
        name: "交易记录",
        subAuth: "read",
      },
    ],
  },
  {
    name: "workersManage",
    nameZH: "员工管理",
    cardAuth: 1,
    value: [
      {
        name: "销售员工",
        subAuth: "read",
      },
      {
        name: "技术员工",
      },
    ],
  },
];

我想找出 cardAuth==1、有subAuth属性的值组成的数组，也就是：

[
  {
    name: "myMember",
    nameZH: "我的会员卡",
    cardAuth: 1,
    value: [
      {
        name: "预约",
        subAuth: "update",
      },
    ],
  },
  {
    name: "workersManage",
    nameZH: "员工管理",
    cardAuth: 1,
    value: [
      {
        name: "销售员工",
        subAuth: "read",
      },
    ],
  },
];

我在 使用基于嵌套值的数组过滤对象数组 找到了一个完全符合我要求的答案，但是代码看上去很复杂，在这里记录一下代码解释：

先验知识

in 和 hasOwnProperty

js 判断对象中是否存在某个属性可以用 in 和 hasOwnProperty

var obj = { a: 2 };

"a" in obj; // true
"b" in obj; // false

obj.hasOwnProperty("a"); // true
obj.hasOwnProperty("b"); // false

扩展运算符 ...

定义： 扩展运算符(...)是 ES6 的语法，用于取出参数对象的所有可遍历属性，然后拷贝到当前对象之中。

自定义的属性在拓展运算符后面，则拓展运算符对象内部同名的属性将被覆盖掉。

let person = {name: "Amy", age: 15};
{ ...person, name: "Mike", age: 17}; // {name: 'Mike', age: 17}

代码解释

• 过滤出 cardAuth == 1 的值， 用 let authCards = cards.filter(card=>card.cardAuth == 1)
• 在第一步的基础上，过滤二级对象的数组属性值 authCards.map(e=>{ return {...e,value:e.value.filter(ee=>"subAuth" in ee)} })

1. cards.filter(card=>card.cardAuth == 1)

2. authCards.map(e=>{ console.log(e); })

3. authCards.map(e=>{ console.log(e.value) })

4. authCards.map((e) => {
     e.value.filter((ee) => {
       if ("subAuth" in ee) {
         console.log(ee);
       }
     });
   });

   

5. authCards.map((e) => {
     e.value.filter((ee) => {
       if ("subAuth" in ee) {
         console.log({ ...ee });
       }
     });
   });

   

6. authCards.map((e) => {
     e.value.filter((ee) => {
       if ("subAuth" in ee) {
         console.log({ ...ee, subAuth: 666 });
       }
     });
   });

   

7. authCards.map((e) => {
     return { ...e, value: e.value.filter((ee) => "subAuth" in ee) };
   });

   

参考文档

• 使用基于嵌套值的数组过滤对象数组
• js 扩展运算符(...)的用法
• 对象的扩展运算符
• Vue 判断对象中是否存在某个属性