JS数组删除指定元素方法详解

一、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 (
      <div>
        {this.state.arr.map(item => 
          <p key={item}>{item}</p>
        )}
        <button onClick={this.handleClick.bind(this)}>删除c</button>
      </div>
    );
  }
}
ReactDOM.render(<MyComponent />, document.getElementById('root'));

以上代码将在React组件MyComponent中删除数组中的值为c的元素，并更新组件状态。

八、JS数组删除指定对象

如果数组中的元素是对象，可以使用findIndex方法查找对象在数组中的位置，再使用splice方法删除它。例如：

let arr = [{id: 1, name: 'a'}, {id: 2, name: 'b'}, {id: 3, name: 'c'}, {id: 4, name: 'd'}];
let obj = {id: 3, name: 'c'};
let index = arr.findIndex(function(item) {
  return item.id === obj.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数组删除元素

除了删除指定元素外，还可以删除数组中的元素。可以使用splice方法指定要删除的元素的位置和数量。例如：

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

以上代码会删除数组中的第三个元素'c'。

JavaScript数组删除指定元素