javascript - 如何根据 Angular 5 中数组的多列获取唯一值？

Question

我有类似的数组

[{ 's':1,'x': 1,'y':1 }, { 's':2,'x': 1,'y':1 },{ 's':3,'x': 1,'y':2 },{ 's':4,'x': 2,'y':1 },{ 's':5,'x': 2,'y':2 }]

其中需要 X 和 Y 的唯一组合。

输出是:

[{ 's':1,'x': 1,'y':1 },{ 's':3,'x': 1,'y':2 },{ 's':4,'x': 2,'y':1 },{ 's':5,'x': 2,'y':2 }]

因为第一项和第二项中的 X 和 Y 值相同。 1 必须删除。

对于我正在使用的 UniqBy 单列

_.uniqBy([{ 's':1,'x': 1,'y':1 }, { 's':2,'x': 1,'y':1 },{ 's':3,'x': 1,'y':2 },{ 's':4,'x': 2,'y':1 },{ 's':5,'x': 2,'y':2 }], 'y');

但我需要 2 个或更多键的组合。

_.uniqBy([{ 's':1,'x': 1,'y':1 }, { 's':2,'x': 1,'y':1 },{ 's':3,'x': 1,'y':2 },{ 's':4,'x': 2,'y':1 },{ 's':5,'x': 2,'y':2 }], '[x]','[y]'); 

还有很多。他们都没有工作/

[{ 's':1,'x': 1,'y':1 }, { 's':2,'x': 1,'y':1 },{ 's':3,'x': 1,'y':2 },{ 's':4,'x': 2,'y':1 },{ 's':5,'x': 2,'y

_.uniqBy([{ 's':1,'x': 1,'y':1 }, { 's':2,'x': 1,'y':1 },{ 's':3,'x': 1,'y':2 },{ 's':4,'x': 2,'y':1 },{ 's':5,'x': 2,'y':2 }], 'y');



[{ 's':1,'x': 1,'y':1 },{ 's':3,'x': 1,'y':2 },{ 's':4,'x': 2,'y':1 },{ 's':5,'x': 2,'y':2 }]

Answer 1

使用 filter 和 findIndex 来实现一个非常简单的 vanilla JavaScript 解决方案(在 Lodash 中完成的所有事情都可以在 JavaScript 中完成，Lodash 只是简化了事情):

const arr = [{'s':1,'x':1,'y':1},{'s':2,'x':1,'y':1},{'s':3,'x':1,'y':2},{'s':4,'x':2,'y':1},{'s':5,'x':2,'y':2}];

const res = arr.findIndex(({ x, y }, i, a) => i == a.findIndex(e => e.x == x && e.y == y));

console.log(res);

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

---

Lodash 解决方案:

使用 _.uniqBy将两个字段作为逗号分隔的值字符串进行比较:

const arr = [{'s':1,'x':1,'y':1},{'s':2,'x':1,'y':1},{'s':3,'x':1,'y':2},{'s':4,'x':2,'y':1},{'s':5,'x':2,'y':2}];

const res = _.uniqBy(arr, ({ x, y }) => `${x}${y}`);

console.log(res);

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

使用 _.uniqWith :

const arr = [{'s':1,'x':1,'y':1},{'s':2,'x':1,'y':1},{'s':3,'x':1,'y':2},{'s':4,'x':2,'y':1},{'s':5,'x':2,'y':2}];

const res = _.uniqWith(arr, ({ x, y }, { x: x1, y: y1 }) => x == x1 && y == y1);

console.log(res);

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>