JavaScript数组删除指定元素

小蓝 • 2024-12-12 12:54 • 编程

一、JS数组删除指定元素c

在JS数组中删除指定元素c可以使用filter函数，该函数会返回新的数组，而不会改变原有的数组。该方法的具体实现如下：

let arr = ['a', 'b', 'c', 'd', 'e'];
let c = 'c';
let newArr = arr.filter(function(item) {
  return item !== c;
});
console.log(newArr); // ["a", "b", "d", "e"]

以上代码会从数组中删除值为c的元素，并返回新的数组newArr。

二、JS数组对象删除指定元素

如果数组是一个对象数组，则可以使用findIndex方法查找元素的位置，再使用splice方法删除元素。代码如下：

let arr = [{id: 1, name: 'a'}, {id: 2, name: 'b'}, {id: 3, name: 'c'}, {id: 4, name: 'd'}];
let id = 3;
let index = arr.findIndex(function(item) {
  return item.id === id;
});
if (index !== -1) {
  arr.splice(index, 1);
}
console.log(arr); // [{id: 1, name: 'a'}, {id: 2, name: 'b'}, {id: 4, name: 'd'}]

以上代码会在对象数组中删除id为3的元素。

三、JS数组删除指定元素方法

除了使用filter和splice方法外，JS还提供了许多其它的方法来删除指定元素，如pop方法，shift方法等。这里介绍一些常用的方法：

pop方法：

pop方法删除数组最后一个元素并返回该元素的值，如下所示：

let arr = ['a', 'b', 'c', 'd', 'e'];
let last = arr.pop();
console.log(last); // "e"
console.log(arr); // ["a", "b", "c", "d"]

shift方法：

shift方法删除数组第一个元素并返回该元素的值，如下所示：

let arr = ['a', 'b', 'c', 'd', 'e'];
let first = arr.shift();
console.log(first); // "a"
console.log(arr); // ["b", "c", "d", "e"]

四、JS数组删除指定元素改变原数组

如果需要改变原数组，可以使用forEach方法。代码如下：

let arr = ['a', 'b', 'c', 'd', 'e'];
let c = 'c';
arr.forEach(function(item, index, arr) {
  if (item === c) {
    arr.splice(index, 1);
  }
});
console.log(arr); // ["a", "b", "d", "e"]

以上代码会删除数组中的值为c的元素，同时改变原数组。

五、JS数组删除指定元素splice

splice方法可以删除数组中指定位置的元素，并返回被删除的元素数组。代码如下：

let arr = ['a', 'b', 'c', 'd', 'e'];
let startIndex = 2;
let deleteCount = 1;
let deletedItems = arr.splice(startIndex, deleteCount);
console.log(deletedItems); // ["c"]
console.log(arr); // ["a", "b", "d", "e"]

以上代码会删除数组中的第三个元素（从0开始计数），并返回被删除的元素’c’。

六、JS数组删除指定元素返回新数组

除了使用filter方法外，也可以使用slice方法返回一个新的数组。代码如下：

let arr = ['a', 'b', 'c', 'd', 'e'];
let c = 'c';
let startIndex = arr.indexOf(c);
let deletedItems = arr.slice(0, startIndex).concat(arr.slice(startIndex + 1));
console.log(deletedItems); // ["a", "b", "d", "e"]

以上代码会删除数组中的值为c的元素，并返回新的数组deletedItems。

七、React数组删除指定元素

React中的数组删除指定元素和JS无异。可以使用上述提到的方法来实现。例如，可以使用filter方法删除指定元素并更新组件状态：

class MyComponent extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      arr: ['a', 'b', 'c', 'd', 'e']

    };

  }

  handleClick() {

    let c = 'c';

    let newArr = this.state.arr.filter(function(item) {

      return item !== c;

    });

    this.setState({arr: newArr});

  }

  render() {

    return (
        {this.state.arr.map(item => 
{item}
)}
         
                                                        原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/243092.html