Delete a specified element from an array

Question

Delete a specified element from an array

I am currently in the process of re-learning JavaScript, and unfortunately, I'm facing some difficulties.

Here's the challenge at hand:

In the destroyer function, you will receive an initial array as the first argument. Following that, one or more arguments will be provided. The goal is to remove all elements from the initial array that have the same value as these arguments.

I need help understanding why the code snippet below is not removing the necessary elements for the second test case.

function destroyer(arr) {
  console.log(arguments);

  for (var array_i = 0; array_i < arr.length; array_i++){
    for (var arg_i = 1; arg_i < arguments.length; arg_i++){
      console.log("indexes", array_i, arg_i);
      if (arr[array_i] === arguments[arg_i]){
        console.log(arr[array_i], arguments[arg_i], "destroyed");
        arr.splice(array_i, 1);
        console.log(arr, arguments);
        array_i = 0;
        arg_i = 1;
      }
    }
  }
  return arr;
}

The code works as expected in this scenario:

destroyer([3, 5, 1, 2, 2], 2, 3, 5);

However, it fails to produce the desired outcome in this case:

destroyer([2, 3, 2, 3], 2, 3);

javascript arrays

Answer 1

Answer №1

Instead of trying to compensate for the elements removed along the way by resetting your indices, a more effective approach is to delete from the end of the array. This method is simpler and does not require any resets.

function destroyer(arr) {

  for (var array_i = arr.length - 1; array_i >= 0; array_i--){
    for (var arg_i = 1; arg_i < arguments.length; arg_i++){
      if (arr[array_i] === arguments[arg_i]){
        arr.splice(array_i, 1);
        break;
      }
    }
  }
  return arr;
}

console.log( destroyer([2, 3, 4, 2, 3], 2, 3)  );   // [4]
console.log( destroyer([2, 3, 2, 3], 2, 3)  );      // []

Answer 2

Instead of trying to compensate for the elements removed along the way by resetting your indices, a more effective approach is to delete from the end of the array. This method is simpler and does not require any resets.

function destroyer(arr) {

  for (var array_i = arr.length - 1; array_i >= 0; array_i--){
    for (var arg_i = 1; arg_i < arguments.length; arg_i++){
      if (arr[array_i] === arguments[arg_i]){
        arr.splice(array_i, 1);
        break;
      }
    }
  }
  return arr;
}

console.log( destroyer([2, 3, 4, 2, 3], 2, 3)  );   // [4]
console.log( destroyer([2, 3, 2, 3], 2, 3)  );      // []

Answer 3

Answer №2

The issue lies in the fact that you are altering the array while iterating through it.

One way to solve this problem is by using the filter function instead:

function removeElements(arr) {
  var args = [].slice.call(arguments);
  return arr.filter(function(item) {
    return args.indexOf(item) == -1;
  });
}
document.getElementById('output').innerHTML = 
  JSON.stringify(removeElements([2,3,2,3], 2, 3)) + "\n" +
  
  JSON.stringify(removeElements([1,2,3,4,2,3], 2, 3))

<pre id="output"></pre>

Answer 4

The issue lies in the fact that you are altering the array while iterating through it.

One way to solve this problem is by using the filter function instead:

function removeElements(arr) {
  var args = [].slice.call(arguments);
  return arr.filter(function(item) {
    return args.indexOf(item) == -1;
  });
}
document.getElementById('output').innerHTML = 
  JSON.stringify(removeElements([2,3,2,3], 2, 3)) + "\n" +
  
  JSON.stringify(removeElements([1,2,3,4,2,3], 2, 3))

<pre id="output"></pre>

Answer 5

Answer №3

An approach to eliminating unwanted elements from an array without altering the original array's content.

function remover(inputArray) {
  var excluded = Array.prototype.slice.call(arguments, 1);
  excluded.forEach(function(item) {
    var index = inputArray.indexOf(item);
    while (index > -1) {
      inputArray.splice(index, 1);
      index = inputArray.indexOf(item);
    }
  });
  return inputArray;
}

var list1 = [2, 3, 2, 3];
remover(list1, 2, 3);
document.getElementById('output1').textContent = JSON.stringify(list1);
console.log(list1);

var list2 = [3, 5, 1, 2, 2];
remover(list2, 2, 3, 5);
document.getElementById('output2').textContent = JSON.stringify(list2);
console.log(list2);

<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.4.1/es5-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
<pre id="output1"></pre>
<pre id="output2"></pre>

Answer 6

An approach to eliminating unwanted elements from an array without altering the original array's content.

function remover(inputArray) {
  var excluded = Array.prototype.slice.call(arguments, 1);
  excluded.forEach(function(item) {
    var index = inputArray.indexOf(item);
    while (index > -1) {
      inputArray.splice(index, 1);
      index = inputArray.indexOf(item);
    }
  });
  return inputArray;
}

var list1 = [2, 3, 2, 3];
remover(list1, 2, 3);
document.getElementById('output1').textContent = JSON.stringify(list1);
console.log(list1);

var list2 = [3, 5, 1, 2, 2];
remover(list2, 2, 3, 5);
document.getElementById('output2').textContent = JSON.stringify(list2);
console.log(list2);

<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.4.1/es5-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
<pre id="output1"></pre>
<pre id="output2"></pre>

Answer 7

Answer №4

The issue at hand is relying on the length to iterate through an array while simultaneously reorganizing its elements. This can lead to problems where, after removing certain elements, those same elements end up back at the beginning of the array, causing the loop counter to skip over necessary positions. To avoid this issue, it's better to loop through each argument only once and search for it in the array.

for(var i = 1; i < arguments.length; i++)
{
    var index = arr.indexOf(arguments[i]);
    while(index > -1)
    {
        arr.splice(index, 1);
        index = arr.indexOf(arguments[i]);
    }
}

By following this approach, you will achieve the desired outcome without complications.

Answer 8

The issue at hand is relying on the length to iterate through an array while simultaneously reorganizing its elements. This can lead to problems where, after removing certain elements, those same elements end up back at the beginning of the array, causing the loop counter to skip over necessary positions. To avoid this issue, it's better to loop through each argument only once and search for it in the array.

for(var i = 1; i < arguments.length; i++)
{
    var index = arr.indexOf(arguments[i]);
    while(index > -1)
    {
        arr.splice(index, 1);
        index = arr.indexOf(arguments[i]);
    }
}

By following this approach, you will achieve the desired outcome without complications.

Delete a specified element from an array

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to arrange the elements of an array based on a specified value?

I am interested in extracting the "Index array" from a multi-dimensional array

Choose images at random from an array within a React Native application

Introducing the new default in Google Chrome: Now accessing window.opener for target="_blank" links after rel="noopener" is the standard feature

Deactivating the submit button after a single click without compromising the form's functionality

Adjust the value before moving to the next tab, or if you choose to leave the

Transforming javascript's array.map into php's array_map function

Unable to Retrieve Modified Content with $().text();

Promise rejection not handled: Trying to modify headers after they have already been sent to the client

Transforming a numerical function into an HTML span tag: A quick guide

Updating votes on the client side in WebForms can be achieved by following these steps

Error encountered in jQuery validation script due to incorrect data type

JavaScript nested function that returns the ID of the first div element only upon being clicked

What causes errors in my AJAX request based on the particular file extension?

Exploring AngularJS with Filtering for Advanced Search Results

Unusual occurrences regarding scope in the world of JavaScript and d3.js

Tips for integrating jwt token into axios request

Ensure that all checkboxes are only selected within a single table

Python - Assigning Values in a Nested Array

Angularjs - Navigating the Depths of OrderBy: Effective Strategies for Handling Complex Sorting Structures