在javascript中进行左外连接

Question

我在 javascript (D3) 中有一个对象数组，我需要删除另一个对象属性数组中存在某个属性的每个对象，
i.e. 左外连接
_{（来源：tazindeed.co.uk）}

我自己成功完成了2个循环，但速度很慢。
而且我不知道如何让它更快。

    for (var i = 0; i < data1.length; i++) {
        for (var j = 0; j < data2.length; j++) {
            if (data2[j].attr3 == data1[i].attr4) {
                data2.splice(j,1);
            }
        }
    }

data1.length~2k 和 data2.length~10k

我知道这个问题大约已经被问过这里，但已经快两年了，而且解决方案使用外部库。
我只是想知道是否有更好的 javascript 方法（或 jQuery 或 D3，我已经使用过）

谢谢您的帮助！

Answer 1

您需要快速查找

data1

中存在的值，因此使用对象制作地图：

var map = {};
for (var i = 0; i < data1.length; i++) {
  map[data1[i].attr4] = 1;
}

然后您可以循环遍历

data2

中的项目并过滤它们：

var result = [];
for (i = 0; i < data2.length; i++) {
  if (!(data2[i].attr3 in map)) {
    result.push(data2[i]);
  }
}

Answer 2

也许不是更快，但更具可读性

const left = ['1', '2', '7']
const right = ['1', '3', '5', '9']

const result = left.filter((x) => !right.includes(x))

Answer 3

您可以使用

Array.filter

（请参阅MDN）或

Array.map

，我想：

var array1 = [1,2,3,4,5,6,7,8,9],
    array2 = [3,4,5,6],
    fltr   = array1.filter( function(v) {return this.indexOf(v) < 0;}, array2),
    map    = array1.map( 
              function(v) {
                 var exists = this.indexOf(v);
                 return [v, (this[exists] || 'null')].join(', ');}, 
              array2),
    result = document.querySelector('#result');
fltr.unshift('<u>array1</u>');
map.unshift('<u>array1, array2</u>');
result.innerHTML = ['<b>filtered</b>\n',
                     fltr.join('\n'),
                    '\n\n<b>mapped</b>\n',
                     map.join('\n')].join('');
  

<pre id="result"></pre>

Answer 4

如果数据是唯一的，你现在终于可以使用 Sets 来左外连接（使用差异）我认为至少在一周前使用 Chrome。

示例 - 将数组转换为集合：

const frontEndLanguages = new Set(["JavaScript", "HTML", "CSS"]);

const backEndLanguages = new Set(["Python","Java","JavaScript"]);

const onlyFrontEnd = frontEndLanguages.difference(backEndLanguages); // => 设置 {"HTML", "CSS"}

const onlyBackEnd = backEndLanguages.difference(frontEndLanguages); // => 设置 {"Python", "Java"}