How do I remove all items in arrayA from arrayB? in javascript

Question

This feels like a very basic javascript question but I have two arrays:

var arrayA =['content','I dont','want'];
var arrayB = ['content','want','puppies'];

desired result:

arrayB = ['puppies']

The items in the arrays are strings.

How do I do this? (bonus points if the answer works in IE8+)

What have you tried? Perhaps a good starting point is how do you delete something from an array? — aug, Apr 13 '17 at 20:40
Why in arrayB's element is puppies here. I mean what kind of operation actually happens here. — Jitu Raiyan, Apr 13 '17 at 20:40
I understand how to remove one singular item from an array, was just hoping there was an easier way than looping through each item in an array and then checking index of that item in another array, then removing it if it's there. Just seemed like a painful way to do something I'd guess there was a built in function intended for. Also the text in the strings was purely an example could have as easily used "foo" "bar". I was trying to boil this down to it's simplest form as the full thing I'm building is way more complex. I just forgot how to do this and couldn't find a useful answer googling — TheWebTech, Apr 13 '17 at 21:13

score 4 · Answer 1 · answered Apr 13 '17 at 20:41

You could filter arrayB and take only the elements, which are not included in arrayA

var arrayA =['content','I dont','want'],
    arrayB = ['content','want','puppies'].filter(a => !arrayA.includes(a));

console.log(arrayB);

ES5

var arrayA =['content','I dont','want'],
    arrayB = ['content','want','puppies'].filter(function (a) {
        return arrayA.indexOf(a) === -1;
    });

console.log(arrayB);

ne1410s · Answer 2 · 2017-04-13T20:52:17.663

1

For value types, the following should work: (alas not in IE8 - as pointed out!)

function (arrayA, arrayB) {
  return arrayB.filter(function(b) {
    return arrayA.indexOf(b) == -1;
  });
}

edited Apr 13 '17 at 20:52

answered Apr 13 '17 at 20:43

ne1410s

6,864
6
55
61

That won't work in IE8. IE8 doesn't support filter or indexOf – jas7457 Apr 13 '17 at 20:46
@jas7457 I think I really knew that about `filter` deep down. Although `indexOf()` support lacking in IE8 was genuinely news to me! Learn something new everyday! – ne1410s Apr 13 '17 at 20:51
You can add indexOf to IE8 http://stackoverflow.com/questions/3629183/why-doesnt-indexof-work-on-an-array-ie8 – genichm Apr 13 '17 at 20:58

score 1 · Answer 3 · answered Apr 13 '17 at 20:43

remove all items in arrayA from arrayB

The solution using Array.prototype.forEach() and Array.prototype.splice() functions:

var arrayA =['content','I dont','want'],
    arrayB = ['content','want','puppies'];

arrayA.forEach(function (w) {
    var idx = arrayB.indexOf(w);
    ~idx && arrayB.splice(idx, 1);
});

console.log(arrayB);

score 0 · Answer 4 · answered Apr 13 '17 at 20:45

This will get you down to IE9, but IE8 doesn't support indexOf. If you absolutely need IE8 support, you'll have to write a polyfill for indexOf.

var arrayA =['content','I dont','want'];
var arrayB = ['content','want','puppies'];

for(var i = 0; i < arrayA.length; i++){
    var index = arrayB.indexOf(arrayA[i]);
  if(index !== -1) {
    arrayB.splice(index, 1);
  }
}

console.log(arrayB);

Lifehack · Answer 5 · 2017-04-13T21:27:23.190

0

This will get you to IE8

var arrayA =['content','I dont','want'];
var arrayB = ['content','want','puppies'];

for (var i = arrayB.length - 1; i >= 0; i--) {
    for (var j = arrayA.length - 1; j >= 0; j--) {
        if (arrayA[j] == arrayB[i]) {
            arrayB.splice(i, 1);
        }
    }
}

console.log(arrayB);

edited Apr 13 '17 at 21:27

answered Apr 13 '17 at 20:52

Lifehack

1,981
15
12

score 0 · Answer 6 · answered Apr 13 '17 at 20:55

0

arrayA.forEach((valueA)=>{
    let idx = (arrayB.findIndex( (valueB)=>valueB === valueA))
    if(idx != -1){
      arrayB.splice(idx,1)
    }
})

answered Apr 13 '17 at 20:55

gropapa

577
6
10

score 0 · Answer 7 · edited May 23 '17 at 11:46

ES3 solution.

var arrayA = ['content', 'I dont', 'want'];
var arrayB = ['content', 'want', 'puppies'];

for (var bIdx = arrayB.length - 1; bIdx >= 0; bIdx -= 1) {
  for (var aIdx = 0; aIdx < arrayA.length; aIdx += 1) {
    if (arrayB[bIdx] === arrayA[aIdx]) {
      arrayB.splice(bIdx, 1);
      break;
    }
  }
}

console.log(arrayB);

Notice that the outer loop (arrayB) runs in reverse as you will be removing items from the array with Array#splice and it will therefore be re-indexed while you are iterating it, which would mean that you could miss some items if forward iterated.

See the following for some further examples and explanations.

How to remove element from array in forEach loop?

You can happily use functional methods on IE8 (as long as you are not using sparse arrays) provided you load the appropriate shims for the methods that you use.

https://github.com/es-shims/es5-shim

https://github.com/es-shims/es6-shim

https://github.com/es-shims/es7-shim

If it is not essential that you mutate the original array, then you can use the Array#filter concept and replace the old array with a new one.

var arrayA = ['content', 'I dont', 'want'];
var arrayB = ['content', 'want', 'puppies'];

var result = [];
for (var bIdx = 0; bIdx < arrayB.length; bIdx += 1) {
  var itemB = arrayB[bIdx];
  var found = false;
  for (var aIdx = 0; aIdx < arrayA.length; aIdx += 1) {
    if (itemB === arrayA[aIdx]) {
      found = true;
      break;
    }
  }
  if (found !== true) {
    result.push(itemB);
  }
}
arrayB = result;

console.log(arrayB);

Notice that we can now forward iterate both arrays as they are not being mutated and no re-indexing is occuring.

How do I remove all items in arrayA from arrayB? in javascript

7 Answers7