合并 ES6 Maps/Sets 的最简单方法?

IT技术 javascript set ecmascript-6
2021-02-26 17:01:22

有没有一种简单的方法可以将 ES6 Maps 合并在一起(比如Object.assign)?当我们在做的时候,ES6 Sets(比如Array.concat)呢?

6个回答

对于套装:

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

对于地图:

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

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

对于大型集合,请注意这会迭代两个集合的内容两次,一次创建一个包含两个集合并集的临时数组,然后将该临时数组传递给集合构造函数,在那里再次迭代以创建新集合.
2021-04-22 17:01:22
@jfriend00:请参阅下面的 jameslk 回答以获得更好的方法
2021-05-03 17:01:22
文档Map:“构造函数:new Map([iterable])”,“iterable是一个数组或其他可迭代对象,其元素是键值对(2 元素数组)。每个键值对都被添加到新的 Map 中。” ——作为参考。
2021-05-15 17:01:22
@torazaburo:正如 jfriend00 所说,Oriols 解决方案确实创建了不必要的中间数组。将迭代器传递给Map构造函数可以避免它们的内存消耗。
2021-05-15 17:01:22
@devuxer 您需要compilerOptions.downlevelIteration在 tsconfig.json 中启用以消除编译器错误。参见stackoverflow.com/questions/53441292/...
2021-05-16 17:01:22

由于我不明白的原因,您不能使用内置方法直接将一个 Set 的内容添加到另一个 Set 中。并集、相交、合并等操作是非常基本的集合操作,但不是内置的。幸运的是,您可以很容易地自己构建所有这些。

[2021 年添加] - 现在提议为这些类型的操作添加新的 Set/Map 方法,但实施时间尚不清楚。它们似乎处于规范过程的第 2 阶段。

要实现合并操作(将一个 Set 的内容合并到另一个 Set 或将一个 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

而且,对于 a 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,它是其他两个集合的并集。它不会将一个集合的内容合并到另一个集合中,这实现了提案中指定的类型检查

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 过程进行建模,以更完整地获取物种构造函数,并且已经适应在可能没有Symbol或已经Symbol.species设置的旧版本 Javascript 上运行

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;

这意味着在它自己的文件 setex.js 中,然后您可以将其require()放入 node.js 并代替内置 Set 使用。

我不认为new Set(s, t)作品。t参数被忽略。此外,add检测其参数的类型以及如果集合添加集合的元素显然是不合理的行为,因为这样就无法将集合本身​​添加到集合中。
2021-04-23 17:01:22
啊,我讨厌这对地图n.forEach(m.add, m)不起作用- 它确实反转了键/值对!
2021-04-24 17:01:22
@jfriend00:OTOH,有点道理。set参数顺序对于键/值对来说是自然的,forEachArraysforEach方法(以及类似$.each_.each也枚举对象的东西)对齐
2021-04-30 17:01:22
@Bergi - 是的,这很奇怪Map.prototype.forEach()并且Map.prototype.set()有相反的论点。似乎是某人的疏忽。尝试将它们一起使用时,它会强制使用更多代码。
2021-05-08 17:01:22
@torazaburo - 至于.add()采取 Set方法,我理解你的意思。我只是发现这比能够使用组合集少得多,.add()因为我从来不需要一个或多个集合,但是我需要多次合并集合。只是一种行为与另一种行为的有用性的意见问题。
2021-05-10 17:01:22

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

对于地图:

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' ]
@caub 不错的解决方案,但请记住 forEach 的第一个参数是值,因此您的函数应该是 m2.forEach((v,k)=>m1.set(k,v));
2021-04-23 17:01:22
(IIGFE = 立即调用的生成器函数表达式)
2021-04-25 17:01:22
m2.forEach((k,v)=>m1.set(k,v))如果你想要简单的浏览器支持也很好
2021-05-10 17:01:22

编辑

我根据此处建议的其他解决方案对我的原始解决方案进行了基准测试,发现它非常低效。

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

  • @fregante(以前称为@bfred.it)解决方案,将值一一相加(14,955 次操作/秒)
  • @jameslk 的解决方案,它使用自调用生成器(5,089 次操作/秒)
  • 我自己的,使用 reduce & spread(3,434 次操作/秒)

如您所见,@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}
太好了,感谢您的性能比较。有趣的是如何在“unelegant”的解决方案是最快的;)来到这里寻找了改善forofadd,这似乎只是非常低效的。我真的希望有一个addAll(iterable)关于 Sets方法
2021-04-20 17:01:22
typescript版本: 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 }
2021-04-25 17:01:22
@jfriend00 当我访问时,bfred.it我得到了一个 twitter 帐户,fregante所以这可能是 fregante 的答案!
2021-05-02 17:01:22
答案顶部附近的 jsperf 链接似乎已失效。另外,您参考了 bfred 的解决方案,我在这里没有看到。
2021-05-11 17:01:22
嗨@Bergi,你是对的。感谢您提高我的意识(:我已经针对此处建议的其他人测试了我的解决方案并为自己证明了这一点。此外,我已经编辑了我的答案以反映这一点。请考虑删除您的反对票。
2021-05-15 17:01:22

批准的答案很好,但每次都会创建一个新集合。

如果您想改变现有对象,请使用辅助函数。

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]