仅返回唯一元素的嵌套数组过滤器答案

【问题标题】：Nested array filter with return only unique elements仅返回唯一元素的嵌套数组过滤器
【发布时间】：2019-03-19 08:11:24
【问题描述】：

{
  list: [
    {
      "distance": 1.87,
      "age": "",
      languageCodes: [
        {
          "code": "RUS",
          "desc": "Russian"
        }
      ]
    },
    {
      "distance": 1.87,
      "age": "",
      languageCodes: [
        {
          "code": "RUS",
          "desc": "Russian"
        }
      ]
    },
    {
      "distance": 1.87,
      "age": "",
      languageCodes: [
        {
          "code": "IND",
          "desc": "Indian"
        }
      ]
    },
    {
      "distance": 1.87,
      "age": "",
      languageCodes: [
        {
          "code": "USA",
          "desc": "American"
        }
      ]
    },
    {
      "distance": 1.87,
      "age": "",
      languageCodes: [
        {
          "code": "AUS",
          "desc": "Australian"
        }
      ]
    },
    {
      "distance": 1.87,
      "age": "",
      languageCodes: [
        {
          "code": "JPN",
          "desc": "Japan"
        }
      ]
    },
    {
      "distance": 1.87,
      "age": "",
      languageCodes: [
        {
          "code": "RUS",
          "desc": "Russian"
        }
      ]
    },
    {
      "distance": 1.87,
      "age": "",
      languageCodes: [
        {
          "code": "IND",
          "desc": "Indian"
        }
      ]
    },
    {
      "distance": 1.87,
      "age": "",
      languageCodes: [
        {
          "code": "RUS",
          "desc": "Russian"
        }
      ]
    }
  ]
}

输出：

Array LanguageCodes[
  {
    "code": "RUS",
    "desc": "Russian"
  },
  {
    "code": "IND",
    "desc": "Indian"
  },
  {
    "code": "USA",
    "desc": "American"
  },
  {
    "code": "AUS",
    "desc": "Australian"
  },
  {
    "code": "JPN",
    "desc": "Japan"
  }
]

我有一个代表语言代码的嵌套数组。

list 数组包含各种对象，其 languageCodes 显示在代码 sn-p 中。并且 languageCodes 数组包含也显示在 sn-p 中的 code 和 desc。所以这里我的要求是过滤数组，输出就像 OUTPUT 中所示的唯一 languageCodes 数组。

【问题讨论】：

到目前为止你有什么尝试？
你的语言代码数组总是只有一个元素？
太棒了，至少有 6 种独特的方法可以做到这一点，而你完全没有尝试

标签： javascript arrays reactjs

【解决方案1】：

您可以使用 Map 并提取 code 和 desc 以获得唯一值。

var data = { list: [{ distance: 1.87, age: "", languageCodes: [{ code: "RUS", desc: "Russian" }] }, { distance: 1.87, age: "", languageCodes: [{ code: "RUS", desc: "Russian" }] }, { distance: 1.87, age: "", languageCodes: [{ code: "IND", desc: "Indian" }] }, { distance: 1.87, age: "", languageCodes: [{ code: "USA", desc: "American" }] }, { distance: 1.87, age: "", languageCodes: [{ code: "AUS", desc: "Australian" }] }, { distance: 1.87, age: "", languageCodes: [{ code: "JPN", desc: "Japan" }] }, { distance: 1.87, age: "", languageCodes: [{ code: "RUS", desc: "Russian" }] }, { distance: 1.87, age: "", languageCodes: [{ code: "IND", desc: "Indian" }] }, { distance: 1.87, age: "", languageCodes: [{ code: "RUS", desc: "Russian" }] }] },
    result = Array.from(data.list
        .reduce(
            (m, { languageCodes: { 0: { code, desc } } }) => m.set(code, { code, desc }),
            new Map
        )
        .values()
    );

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

【讨论】：

【解决方案2】：

试试看

// const arr = inputObj.list;
const arr = [
  {
    'distance': 1.87,
    'age': '',
    languageCodes: [
      {
        'code': 'RUS',
        'desc': 'Russian',
      },
    ],
  },
  {
    'distance': 1.87,
    'age': '',
    languageCodes: [
      {
        'code': 'RUS',
        'desc': 'Russian',
      },
    ],
  },
  {
    'distance': 1.87,
    'age': '',
    languageCodes: [
      {
        'code': 'IND',
        'desc': 'Indian',
      },
    ],
  },
  {
    'distance': 1.87,
    'age': '',
    languageCodes: [
      {
        'code': 'USA',
        'desc': 'American',
      },
    ],
  },
  {
    'distance': 1.87,
    'age': '',
    languageCodes: [
      {
        'code': 'AUS',
        'desc': 'Australian',
      },
    ],
  },
  {
    'distance': 1.87,
    'age': '',
    languageCodes: [
      {
        'code': 'JPN',
        'desc': 'Japan',
      },
    ],
  },
  {
    'distance': 1.87,
    'age': '',
    languageCodes: [
      {
        'code': 'RUS',
        'desc': 'Russian',
      },
    ],
  },
  {
    'distance': 1.87,
    'age': '',
    languageCodes: [
      {
        'code': 'IND',
        'desc': 'Indian',
      },
    ],
  },
  {
    'distance': 1.87,
    'age': '',
    languageCodes: [
      {
        'code': 'RUS',
        'desc': 'Russian',
      },
    ],
  },
];

const uniqueLanguageCodes = arr.reduce((accum, current) => {
  current.languageCodes.forEach(codeObj => {
    if (!accum.some(accumElement => accumElement.code === codeObj.code)) {
      accum.push(codeObj);
    }
  });
  return accum;
}, []);

console.log(uniqueLanguageCodes);

【讨论】：

【解决方案3】：

使用flatMap 和filter：

const myObj = {list: [{"distance": 1.87,"age": "",languageCodes: [{"code": "RUS","desc": "Russian"}]},{"distance": 1.87,"age": "",languageCodes: [{"code": "RUS","desc": "Russian"}]},{"distance": 1.87,"age": "",languageCodes: [{"code": "IND","desc": "Indian"}]},{"distance": 1.87,"age": "",languageCodes: [{"code": "USA","desc": "American"}]},{"distance": 1.87,"age": "",languageCodes: [{"code": "AUS","desc": "Australian"}]},{"distance": 1.87,"age": "",languageCodes: [{"code": "JPN", "desc": "Japan"}]},{"distance": 1.87,"age": "",languageCodes: [{"code": "RUS","desc": "Russian"}]},{"distance": 1.87,"age": "",languageCodes: [{"code": "IND","desc": "Indian"}]},{"distance": 1.87,"age": "",languageCodes: [{"code": "RUS","desc": "Russian"}]}]};
const LanguageCodes = myObj.list.flatMap(obj => obj.languageCodes).filter((e, i, a) => a.findIndex(({ code, desc }) => code == e.code && desc == e.desc) == i);

console.log(LanguageCodes);

.as-console-wrapper { max-height: 100% !important; top: auto; }

【讨论】：

建议：语言代码是一个数组，所以我们可以使用 flatMap 和 languageCodes 来代替 map 和 languageCodes[0]
您能否为@PanosK 的建议添加您的实际代码，我现在不关注。
我的意思是myObj.list.flatMap(obj => obj.languageCodes).filter((e, i, a) => a.findIndex(({ code, desc }) => code == e.code && desc == e.desc) == i);
这根本不是真正的改进@PanosK。
如果它在索引 [1] 中，你会错过一种独特的语言，而这正是我试图告诉你的地图

【解决方案4】：

您可以使用flatMap 将所有languageCodes 放到一个数组中。然后，使用reduce 和Object.values() 获得独特的语言

const input = { list: [{ distance: 1.87, age: "", languageCodes: [{ code: "RUS", desc: "Russian" }] }, { distance: 1.87, age: "", languageCodes: [{ code: "RUS", desc: "Russian" }] }, { distance: 1.87, age: "", languageCodes: [{ code: "IND", desc: "Indian" }] }, { distance: 1.87, age: "", languageCodes: [{ code: "USA", desc: "American" }] }, { distance: 1.87, age: "", languageCodes: [{ code: "AUS", desc: "Australian" }] }, { distance: 1.87, age: "", languageCodes: [{ code: "JPN", desc: "Japan" }] }, { distance: 1.87, age: "", languageCodes: [{ code: "RUS", desc: "Russian" }] }, { distance: 1.87, age: "", languageCodes: [{ code: "IND", desc: "Indian" }] }, { distance: 1.87, age: "", languageCodes: [{ code: "RUS", desc: "Russian" }] }] };
 
const merged = input.list.flatMap(a => a.languageCodes)
                         .reduce((acc, lang) => {
                            acc[lang.code] = lang;
                            return acc;
                         }, {})

const output = Object.values(merged)
console.log(output)

【讨论】：

【解决方案5】：

您可以将reduce 与filter 和for..of 结合使用

const obj = {
  list: [{
      "distance": 1.87,
      "age": "",
      languageCodes: [{
        "code": "RUS",
        "desc": "Russian"
      }]
    },
    {
      "distance": 1.87,
      "age": "",
      languageCodes: [{
        "code": "RUS",
        "desc": "Russian"
      }]
    },
    {
      "distance": 1.87,
      "age": "",
      languageCodes: [{
        "code": "IND",
        "desc": "Indian"
      }]
    },
    {
      "distance": 1.87,
      "age": "",
      languageCodes: [{
        "code": "USA",
        "desc": "American"
      }]
    },
    {
      "distance": 1.87,
      "age": "",
      languageCodes: [{
        "code": "AUS",
        "desc": "Australian"
      }]
    },
    {
      "distance": 1.87,
      "age": "",
      languageCodes: [{
        "code": "JPN",
        "desc": "Japan"
      }]
    },
    {
      "distance": 1.87,
      "age": "",
      languageCodes: [{
        "code": "RUS",
        "desc": "Russian"
      }]
    },
    {
      "distance": 1.87,
      "age": "",
      languageCodes: [{
        "code": "IND",
        "desc": "Indian"
      }]
    },
    {
      "distance": 1.87,
      "age": "",
      languageCodes: [{
        "code": "RUS",
        "desc": "Russian"
      }]
    }
  ]
};
const output = obj.list.reduce((acc, element) => {
  for (let lang of element.languageCodes) {

    if (!acc.find(l => l.code == lang.code)) {
      acc.push(lang);
    }
  }

  return acc;
}, []);

console.log("output", output);

【讨论】：

可能是因为 a) 你不是很酷的孩子之一，也没有做出可运行的 sn-p（脸颊评论中的舌头），b) ... list 是什么？它是一个对象的属性，所以它不会那样工作：p
{ list: ..... } list 是一个对象的属性......所以list.reduce 不会工作：p - 我没有投反对票，我认为你的答案是更易读的答案之一
当然可以！常量 a = { 列表：[] }。在这种情况下： a.list.reduce 完全可以工作......
完全正确，但 list.reduce 不会，因为没有名为 list ... a.list.reduce vs list.reduce ... 如果您认为它们相同，那么您需要检查再次
看看我所做的编辑 - 看看现在obj 与问题中的对象是一样的：p 正如我所说，我明白你做了什么，这个 OP不会有线索