Several ways to remove elements of specified position in an array by vue

1. Record the background

Recently I encountered a table checking problem. Because I had committed a relatively obscure logical bug, I will record it here to take it as a warning.

1. Introduction to the role of event participation

Role:
1. Record the array multipleSelection, responsible for recording the currently selected records
2. The table variable currentDeviceList displays the content of the current table

2. Event Relationship

Since tables have filtering functions and records have memory, the record array multipleSelection may carry table variables.
The elements that are not in the currentDeviceList are not available, which leads to the fact that when all checks/cancels are all in place, multipleSelection cannot be used for record arrays.

3. Event development

When all cancels, the part of the current table content in the record array multipleSelection should be eliminated.

So I looped to match each multipleSelection in the record array, and then culled.

   var removeArr = []
   (row => {
      const removeIndex = (item => item === )
      if (removeIndex !== -1) {
        (removeIndex)
      }
    })
     (removeItem => {
      (removeItem, 1)
    })

At first glance, this code seems to be fine. RemoveArr records the positions to be removed, such as [1, 3], and eliminates positions 1 and 3. However, after removing positions 1, splice will modify the length of the array itself. The original element in position 3 should have retreated to position 2. If the element in position 3 is also removed, it is logically wrong.

This problem was solved by adding descending order.

((a, b) =&gt; b - a) 
// Sort in descending order and remove from the back, so that the position change will not affect multipleSelection

When writing this article, I found the following simpler writing method. Before each culling, just directly obtain the position to be removed. Although the culling position may remain unchanged, the element has changed, so there will be no culling errors.

(row => {
      const removeIndex = (item => item === )
      if (removeIndex !== -1) {
        (removeIndex, 1)
      }
    })

But I've come here, so let's take a look at other methods.

2. Single removal

1. According to the identification method one filter

Availablefilter()Method to remove an element in the array.filter()The method returns a new array containing only elements that meet the specified criteria. Can be passed infilter()The method's callback function excludes elements that meet the conditions.

let arr = [1, 2, 3, 4, 5];
let elementToRemove = 3;
let newArr = (item =&gt; item !== elementToRemove);
(newArr); // Output [1, 2, 4, 5]

2. According to index method two splice

Availablesplice()Method to remove an element in the array.splice()The method will modify the original array and delete the specified number of elements at the specified location.

let arr = [1, 2, 3, 4, 5];
let indexToRemove = 2; // To delete the index of the element(indexToRemove, 1);
(arr); // Output [1, 2, 4, 5]

3. According to the index method three slices

Availableslice()The method stores the elements before and after the elements to be deleted in a new array, thereby obtaining the array after the specified elements are removed.

let arr = [1, 2, 3, 4, 5];
let indexToRemove = 2; // To delete the index of the elementlet newArr = (0, indexToRemove).concat((indexToRemove + 1));
(newArr); // Output [1, 2, 4, 5]

3. Batch removal

1. If the specified location has a specific identifier, filter

// Original arrayvar arr = [1, 2, 3, 4, 5];
// List of elements to be removedvar removeList = [2, 4];
// Use filter() function to filter array and return new arrayvar newArr = (function (item) {
    return !(item); // Determine whether the current element is in the list to be removed});
(newArr); // The output result is [1, 3, 5]

2. If the specified location has a specific identifier, reduce

const arr = [1, 2, 3, 'a', 'b', 'c']; // Original arrayconst removeItems = ['a', 'b']; // List of elements to be removed// Use reduce() function to perform batch deletion operationconst resultArr = ((accumulator, currentValue) =&gt; {
    if (!(currentValue)) {
        (currentValue);
    }
    return accumulator;
}, []);
(resultArr); // The output is [1, 2, 3, 'c']

3. Index + descending order + splice (also the idea in the first section of this article)

function removeElements(arr, positions) {
// Order the positions to be removed in descending orderconst sortedPositions = [...positions].sort((a, b) =&gt; b - a);
    for (let i = 0; i &lt; ; i++) {
        (sortedPositions[i], 1);
    }
}
// Example usageconst array = ['A', 'B', 'C', 'D', 'E'];
removeElements(array, [2, 4]);
(array); // Output ["A", "B", "D"]

4. Summary

There are many methods, but they are all just two parts: identification and index, and then they are combined with loop functions such as forEach, filter, reduce, for, map, etc., and then add substitution functions such as splice.

The above is the detailed content of several methods of vue to eliminate elements of specified positions in arrays. For more information about vue to eliminate elements of specified positions in arrays, please pay attention to my other related articles!