在JavaScript中从数组中添加和删除元素

在本文中，我们将了解在 javascript 中从数组中添加和删除元素的各种方法。

以下是用于添加或删除项目的不同数组方法的快速参考表。点击方法名称跳转到下面的描述。

什么是 JavaScript 中的数组？

数组是一种特殊变量，一次可以保存多个值。每个值用逗号分隔。

这些值可以是字符串：

const people = ['patrick', 'chimamanda', 'joe', 'sam']

或者它们可以是对象：

const people = [
    { name: "patrick", age: 21 },
    { name: "chimamanda", age: 25 },
    { name: "joe", age: 32 },
    { name: "sam", age: 16 },
]

值也可以是任何数据类型，包括数字、布尔值，甚至是另一个数组。

您可以使用数组方法操作或获取有关数组的信息。例如，我们可以使用以下reverse()方法反转数组：

const people = ['patrick', 'chimamanda', 'joe', 'sam']

let reversedPeople = people.reverse()

console.log(reversedPeople)

// ["sam", "joe", "chimamanda", "Patrick"]

我们还可以使用该includes()方法检查数组中是否存在值：

const people = ['patrick', 'chimamanda', 'joe', 'sam']

console.log(people.includes('sam')) // true
console.log(people.includes('jack')) // false

具体来说，让我们看一下负责将项插入数组和从数组中删除项的方法。

从数组中删除最后一项pop()

该pop()方法从数组中删除最后一个值并返回该值。

const people = ['patrick', 'chimamanda', 'joe', 'sam']

const lastPerson = people.pop()

console.log(lastPerson) // "sam"
console.log(people) // ["patrick", "chimamanda", "joe"]

当在数组pop()上调用时，people数组中的最后一个值被删除并分配给lastPerson. 原始数组 ( people) 也发生了变异。

将一个或多个项目添加到数组的末尾push()

该push()方法在数组末尾添加一项或多项并返回数组的长度。

例如，让我们再向people数组添加两个名称push()：

const people = ['patrick', 'chimamanda', 'joe', 'sam']
const count = people.push('akilah', 'isaac')
console.log(count) // 6
console.log(people) // ["patrick", "chimamanda", "joe", "sam", "akilah", "isaac"]

从数组中删除第一个值shift()

该shift()方法从数组中删除第一个值并返回该值。该方法的行为与该pop()方法直接相反。

const people = ['patrick', 'chimamanda', 'joe', 'sam']
const firstPerson = people.shift()
console.log(firstPerson) // "patrick" 
console.log(people) // ["chimamanda", "joe", "sam"]

当在数组shift()上调用时，people数组中的第一个值被删除并分配给firstPerson. 结果，原始数组发生了变异。

将一个或多个项目添加到数组的开头unshift()

该unshift()方法将一个或多个值添加到数组的开头并返回数组的长度。这与 的相反push()，它在末尾插入值。

在此示例中，unshift()在数组的开头添加两个名称：

const people = ['patrick', 'chimamanda', 'joe', 'sam']
const count = people.unshift('akilah', 'isaac')
console.log(count) // 6
console.log(people) // ["akilah", "isaac", "patrick", "chimamanda", "joe", "sam"]

删除和替换项目splice()

您可以使用splice()在数组中插入一个值或将一个值替换为另一个值。

以下示例显示splice()在索引 2（即第三个位置）处插入一个项目：

const numbers = ['one', 'two', 'four', 'five']
numbers.splice(2, 0, "three")
console.log(numbers) // ["one", "two", "three", "four", "five"]

您还可以将一个值替换为另一个值。在以下示例中，splice()将用另一个单个值替换索引 0（数组的开头）处的值：

const numbers = ['five', 'two', 'three', 'four', 'five']
numbers.splice(0, 1, "one")
console.log(numbers) // ["one", "two", "three", "four", "five"]

概括

该pop()方法从数组中删除最后一项，同时shift()删除第一项。push()在数组末尾添加一个或多个值，同时unshift()在开头添加它们。splice()通过替换值来更改数组。

请注意，这些方法都会改变原始数组。所以谨慎使用它们！