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+)

Answer 1

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); 

Answer 2

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;
  });
}

Answer 3

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); 

Answer 4

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);

Answer 5

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);

Answer 6

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

Answer 7

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.