合并ES6地图/集的最简单方法?

有没有一个简单的方法来合并ES6地图在一起(像Object.assign)?既然我们在这里,那么ES6集(比如Array.concat)呢?

202444 次浏览

集:

var merged = new Set([...set1, ...set2, ...set3])

地图:

var merged = new Map([...map1, ...map2, ...map3])

注意,如果多个映射具有相同的键,则合并映射的值将是具有该键的最后一个合并映射的值。

出于我不理解的原因,您不能直接使用内置方法将一个Set的内容添加到另一个Set。像联合、交叉、合并等操作…是非常基本的集合操作,但不是内置的。幸运的是,您可以相当容易地自己构建这些。

[2021年新增]——现在有一个建议来为这些类型的操作添加新的Set/Map方法,但实现的时间还不清楚。他们似乎处于规范过程的第二阶段。

要实现合并操作(将一个Set的内容合并到另一个Set中,或将一个Map的内容合并到另一个Map中),可以使用单个.forEach()行来完成:

var s = new Set([1,2,3]);
var t = new Set([4,5,6]);


t.forEach(s.add, s);
console.log(s);   // 1,2,3,4,5,6

并且,对于Map,你可以这样做:

var s = new Map([["key1", 1], ["key2", 2]]);
var t = new Map([["key3", 3], ["key4", 4]]);


t.forEach(function(value, key) {
s.set(key, value);
});

或者,在ES6语法中:

t.forEach((value, key) => s.set(key, value));

[2021年新增]

因为现在有一个关于新的Set方法的官方提议,你可以使用这个polyfill为提议的.union()方法,它将在ES6+版本的ECMAScript中工作。注意,根据规范,这将返回一个新Set,它是另外两个Set的并集。它不会将一个集合的内容合并到另一个集合中,这实现了建议中指定的类型检查。

if (!Set.prototype.union) {
Set.prototype.union = function(iterable) {
if (typeof this !== "object") {
throw new TypeError("Must be of object type");
}
const Species = this.constructor[Symbol.species];
const newSet = new Species(this);
if (typeof newSet.add !== "function") {
throw new TypeError("add method on new set species is not callable");
}
for (item of iterable) {
newSet.add(item);
}
return newSet;
}
}

或者,这里有一个更完整的版本,它对ECMAScript过程进行了建模,以更完整地获得物种构造函数,并且已经适应于在旧版本的Javascript上运行,这些Javascript甚至可能没有SymbolSymbol.species集:

if (!Set.prototype.union) {
Set.prototype.union = function(iterable) {
if (typeof this !== "object") {
throw new TypeError("Must be of object type");
}
const Species = getSpeciesConstructor(this, Set);
const newSet = new Species(this);
if (typeof newSet.add !== "function") {
throw new TypeError("add method on new set species is not callable");
}
for (item of iterable) {
newSet.add(item);
}
return newSet;
}
}


function isConstructor(C) {
return typeof C === "function" && typeof C.prototype === "object";
}


function getSpeciesConstructor(obj, defaultConstructor) {
const C = obj.constructor;
if (!C) return defaultConstructor;
if (typeof C !== "function") {
throw new TypeError("constructor is not a function");
}


// use try/catch here to handle backward compatibility when Symbol does not exist
let S;
try {
S = C[Symbol.species];
if (!S) {
// no S, so use C
S = C;
}
} catch (e) {
// No Symbol so use C
S = C;
}
if (!isConstructor(S)) {
throw new TypeError("constructor function is not a constructor");
}
return S;
}

供参考,如果你想要一个内置Set对象的简单子类,它包含一个.merge()方法,你可以使用这个:

// subclass of Set that adds new methods
// Except where otherwise noted, arguments to methods
//   can be a Set, anything derived from it or an Array
// Any method that returns a new Set returns whatever class the this object is
//   allowing SetEx to be subclassed and these methods will return that subclass
//   For this to work properly, subclasses must not change behavior of SetEx methods
//
// Note that if the contructor for SetEx is passed one or more iterables,
// it will iterate them and add the individual elements of those iterables to the Set
// If you want a Set itself added to the Set, then use the .add() method
// which remains unchanged from the original Set object.  This way you have
// a choice about how you want to add things and can do it either way.


class SetEx extends Set {
// create a new SetEx populated with the contents of one or more iterables
constructor(...iterables) {
super();
this.merge(...iterables);
}
    

// merge the items from one or more iterables into this set
merge(...iterables) {
for (let iterable of iterables) {
for (let item of iterable) {
this.add(item);
}
}
return this;
}
    

// return new SetEx object that is union of all sets passed in with the current set
union(...sets) {
let newSet = new this.constructor(...sets);
newSet.merge(this);
return newSet;
}
    

// return a new SetEx that contains the items that are in both sets
intersect(target) {
let newSet = new this.constructor();
for (let item of this) {
if (target.has(item)) {
newSet.add(item);
}
}
return newSet;
}
    

// return a new SetEx that contains the items that are in this set, but not in target
// target must be a Set (or something that supports .has(item) such as a Map)
diff(target) {
let newSet = new this.constructor();
for (let item of this) {
if (!target.has(item)) {
newSet.add(item);
}
}
return newSet;
}
    

// target can be either a Set or an Array
// return boolean which indicates if target set contains exactly same elements as this
// target elements are iterated and checked for this.has(item)
sameItems(target) {
let tsize;
if ("size" in target) {
tsize = target.size;
} else if ("length" in target) {
tsize = target.length;
} else {
throw new TypeError("target must be an iterable like a Set with .size or .length");
}
if (tsize !== this.size) {
return false;
}
for (let item of target) {
if (!this.has(item)) {
return false;
}
}
return true;
}
}


module.exports = SetEx;

这意味着在它自己的文件setext .js中,然后你可以require()到node.js中并使用它来代替内置的Set。

要合并数组集合中的集合,您可以执行

var Sets = [set1, set2, set3];


var merged = new Set([].concat(...Sets.map(set => Array.from(set))));

对我来说有点神秘的是,为什么下面这些应该是等价的,但至少在巴别塔失败了:

var merged = new Set([].concat(...Sets.map(Array.from)));

以下是我使用生成器的解决方案:

地图:

let map1 = new Map(), map2 = new Map();


map1.set('a', 'foo');
map1.set('b', 'bar');
map2.set('b', 'baz');
map2.set('c', 'bazz');


let map3 = new Map(function*() { yield* map1; yield* map2; }());


console.log(Array.from(map3)); // Result: [ [ 'a', 'foo' ], [ 'b', 'baz' ], [ 'c', 'bazz' ] ]

集:

let set1 = new Set(['foo', 'bar']), set2 = new Set(['bar', 'baz']);


let set3 = new Set(function*() { yield* set1; yield* set2; }());


console.log(Array.from(set3)); // Result: [ 'foo', 'bar', 'baz' ]

不,它们没有内置操作,但你可以很容易地创建自己的操作:

Map.prototype.assign = function(...maps) {
for (const m of maps)
for (const kv of m)
this.add(...kv);
return this;
};


Set.prototype.concat = function(...sets) {
const c = this.constructor;
let res = new (c[Symbol.species] || c)();
for (const set of [this, ...sets])
for (const v of set)
res.add(v);
return res;
};

被认可的答案很好,但每次都会创建一个新的集合。

如果你想变异一个现有的对象,使用一个帮助函数。

function concatSets(set, ...iterables) {
for (const iterable of iterables) {
for (const item of iterable) {
set.add(item);
}
}
}

用法:

const setA = new Set([1, 2, 3]);
const setB = new Set([4, 5, 6]);
const setC = new Set([7, 8, 9]);
concatSets(setA, setB, setC);
// setA will have items 1, 2, 3, 4, 5, 6, 7, 8, 9

地图

function concatMaps(map, ...iterables) {
for (const iterable of iterables) {
for (const item of iterable) {
map.set(...item);
}
}
}

用法:

const mapA = new Map().set('S', 1).set('P', 2);
const mapB = new Map().set('Q', 3).set('R', 4);
concatMaps(mapA, mapB);
// mapA will have items ['S', 1], ['P', 2], ['Q', 3], ['R', 4]

例子

const mergedMaps = (...maps) => {
const dataMap = new Map([])


for (const map of maps) {
for (const [key, value] of map) {
dataMap.set(key, value)
}
}


return dataMap
}

使用

const map = mergedMaps(new Map([[1, false]]), new Map([['foo', 'bar']]), new Map([['lat', 1241.173512]]))
Array.from(map.keys()) // [1, 'foo', 'lat']

编辑:

我将我的原始解决方案与这里建议的其他解决方案进行了比较,发现它的效率非常低。

基准测试本身非常有趣(链接),它比较3个解决方案(越高越好):

  • @fregante(以前称为@bfred.it)解决方案,它逐个添加值(14,955 op/sec)
  • @jameslk的解决方案,使用自调用生成器(5089 op/sec)
  • 我自己的,使用reduce &传播(3,434 op/sec)

如你所见,@fregante的解决方案绝对是赢家。

性能+不可变性

考虑到这一点,这里有一个稍微修改的版本,它没有 改变原始集合,并将可变数目的可迭代对象除为 合并为参数:

function union(...iterables) {
const set = new Set();


for (const iterable of iterables) {
for (const item of iterable) {
set.add(item);
}
}


return set;
}

用法:

const a = new Set([1, 2, 3]);
const b = new Set([1, 3, 5]);
const c = new Set([4, 5, 6]);


union(a,b,c) // {1, 2, 3, 4, 5, 6}

原来的答案

我想建议另一种方法,使用reducespread操作符:

实现

function union (sets) {
return sets.reduce((combined, list) => {
return new Set([...combined, ...list]);
}, new Set());
}

用法:

const a = new Set([1, 2, 3]);
const b = new Set([1, 3, 5]);
const c = new Set([4, 5, 6]);


union([a, b, c]) // {1, 2, 3, 4, 5, 6}

提示:

我们还可以使用rest操作符来使界面更好:

function union (...sets) {
return sets.reduce((combined, list) => {
return new Set([...combined, ...list]);
}, new Set());
}

现在,我们不再传递集合的数组,而是可以传递任意数量的集合的参数:

union(a, b, c) // {1, 2, 3, 4, 5, 6}

根据Asaf Katz的回答,以下是一个打字版本:

export function union<T> (...iterables: Array<Set<T>>): Set<T> {
const set = new Set<T>()
iterables.forEach(iterable => {
iterable.forEach(item => set.add(item))
})
return set
}

说不通吗在添加多个元素(从数组或另一个集合中)时调用new Set(...anArrayOrSet)

我在reduce函数中使用了这个,它只是简单的愚蠢。即使你有...array扩展操作符可用,你也不应该在这种情况下使用它,因为它会浪费处理器、内存和时间资源。

// Add any Map or Set to another
function addAll(target, source) {
if (target instanceof Map) {
Array.from(source.entries()).forEach(it => target.set(it[0], it[1]))
} else if (target instanceof Set) {
source.forEach(it => target.add(it))
}
}

演示片段

// Add any Map or Set to another
function addAll(target, source) {
if (target instanceof Map) {
Array.from(source.entries()).forEach(it => target.set(it[0], it[1]))
} else if (target instanceof Set) {
source.forEach(it => target.add(it))
}
}


const items1 = ['a', 'b', 'c']
const items2 = ['a', 'b', 'c', 'd']
const items3 = ['d', 'e']


let set


set = new Set(items1)
addAll(set, items2)
addAll(set, items3)
console.log('adding array to set', Array.from(set))


set = new Set(items1)
addAll(set, new Set(items2))
addAll(set, new Set(items3))
console.log('adding set to set', Array.from(set))


const map1 = [
['a', 1],
['b', 2],
['c', 3]
]
const map2 = [
['a', 1],
['b', 2],
['c', 3],
['d', 4]
]
const map3 = [
['d', 4],
['e', 5]
]


const map = new Map(map1)
addAll(map, new Map(map2))
addAll(map, new Map(map3))
console.log('adding map to map',
'keys', Array.from(map.keys()),
'values', Array.from(map.values()))

你可以使用传播的语法将它们合并在一起:

const map1 = {a: 1, b: 2}
const map2 = {b: 1, c: 2, a: 5}


const mergedMap = {...a, ...b}


=> {a: 5, b: 1, c: 2}

将集合转换为数组,将它们平直,最后构造函数将惟一化。

const union = (...sets) => new Set(sets.map(s => [...s]).flat());

我已经创建了一个小片段,使用ES6中的一个函数合并任意数量的set。您可以更改“设置”;“;Map"让它与地图工作。

const mergeSets = (...args) => {
return new Set(args.reduce((acc, current) => {
return [...acc, ...current];
}, []));
};


const foo = new Set([1, 2, 3]);
const bar = new Set([1, 3, 4, 5]);


mergeSets(foo, bar); // Set(5) {1, 2, 3, 4, 5}
mergeSets(foo, bar, new Set([6])); // Set(6) {1, 2, 3, 4, 5, 6}

一个很好的解决方案,无论你是否有两个或更多的映射合并是将它们作为一个数组,并使用以下:

Array.prototype.merge = function () {
return this.reduce((p, c) => Object.assign(c, p), {});
};

有几种方法可以做到。你可以使用地图。合并功能:

let mergedMap = map1.merge(map2);

注意:如果任何Map的键是相同的,将使用最后一个要合并的Map中的重复键的值。

更多信息请查看这里:https://untangled.io/immutable-js-6-ways-to-merge-maps-with-full-live-examples/: ~:文本=()合并,合并% 20 % % 20 20将% 20使用

我创建了一个helper方法来合并映射,并以所需的任何成对方式处理重复键的值:

const mergeMaps = (map1, map2, combineValuesOfDuplicateKeys) => {
const mapCopy1 = new Map(map1);
const mapCopy2 = new Map(map2);


mapCopy1.forEach((value, key) => {
if (!mapCopy2.has(key)) {
mapCopy2.set(key, value);
} else {
const newValue = combineValuesOfDuplicateKeys
? combineValuesOfDuplicateKeys(value, mapCopy2.get(key))
: mapCopy2.get(key);
mapCopy2.set(key, newValue);
mapCopy1.delete(key);
}
});


return new Map([...mapCopy1, ...mapCopy2]);
};

const mergeMaps = (map1, map2, combineValuesOfDuplicateKeys) => {
const mapCopy1 = new Map(map1);
const mapCopy2 = new Map(map2);


mapCopy1.forEach((value, key) => {
if (!mapCopy2.has(key)) {
mapCopy2.set(key, value);
} else {
const newValue = combineValuesOfDuplicateKeys
? combineValuesOfDuplicateKeys(value, mapCopy2.get(key))
: mapCopy2.get(key);
mapCopy2.set(key, newValue);
mapCopy1.delete(key);
}
});


return new Map([...mapCopy1, ...mapCopy2]);
};


const map1 = new Map([
["key1", 1],
["key2", 2]
]);


const map2 = new Map([
["key2", 3],
["key4", 4]
]);


const show = (object) => {
return JSON.stringify(Array.from(object), null, 2)
}


document.getElementById("app").innerHTML = `
<h1>Maps are awesome!</h1>
<div>map1 = ${show(map1)}</div>
<div>map2 = ${show(map2)}</div><br>
<div>Set value of last duplicate key:<br>merged map = ${show(mergeMaps(map1, map2))}</div><br>
<div>Set value of pair-wise summated duplicate keys:<br>merged map = ${show(mergeMaps(map1, map2, (value1, value2) => value1 + value2))}</div><br>
<div>Set value of pair-wise difference of duplicate keys:<br>merged map = ${show(mergeMaps(map1, map2, (value1, value2) => value1 - value2))}</div><br>
<div>Set value of pair-wise multiplication of duplicate keys:<br>merged map = ${show(mergeMaps(map1, map2, (value1, value2) => value1 * value2))}</div><br>
<div>Set value of pair-wise quotient of duplicate keys:<br>merged map = ${show(mergeMaps(map1, map2, (value1, value2) => value1 / value2))}</div><br>
<div>Set value of pair-wise power of duplicate keys:<br>merged map = ${show(mergeMaps(map1, map2, (value1, value2) => Math.pow(value1, value2)))}</div><br>
`;
<!DOCTYPE html>
<html>


<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>


<body>
<div id="app"></div>


<script src="src/index.js">
</script>
</body>


</html>