技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

JavaScript 从数组中添加和删除元素的5种方法

作者:admin    时间:2022-1-13 22:58:32    浏览:

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

 JavaScript 从数组中添加和删除元素的5种方法

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

方法 位置 动作
pop() 结尾 移除并退回项目
shift() 开始 移除并退回项目
push() 结尾 添加项目
unshift() 开始 添加项目
splice() 任何地方 添加、删除或替换项目

什么是 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) 也发生了变异。

pop()方法

pop() 方法用于删除并返回数组的最后一个元素。

语法

arrayObject.pop()

返回值

arrayObject 的最后一个元素。

说明

pop() 方法将删除 arrayObject 的最后一个元素,把数组长度减 1,并且返回它删除的元素的值。如果数组已经为空,则 pop() 不改变数组,并返回 undefined 值。 

实例

在本例中,我们将创建一个数组,然后删除数组的最后一个元素。请注意,这也会改变数组的程度:

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr)

document.write("<br />")

document.write(arr.pop())

document.write("<br />")

document.write(arr)

</script>

输出

George,John,Thomas
Thomas
George,John

shift()方法

shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。

语法

arrayObject.shift()

返回值

数组原来的第一个元素的值。

说明

如果数组是空的,那么 shift() 方法将不进行任何操作,返回 undefined 值。请注意,该方法不创建新数组,而是直接修改原有的 arrayObject

提示和注释

注释:该方法会改变数组的长度。

提示:要删除并返回数组的最后一个元素,请使用 pop() 方法。

实例

在本例中,我们将创建一个数组,并删除数组的第一个元素。请注意,这也将改变数组的长度:

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.shift() + "<br />")
document.write(arr)

</script>

输出

George,John,Thomas
George
John,Thomas

push()方法

push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。

语法

arrayObject.push(newelement1,newelement2,....,newelementX)

参数

  • newelement1 必需。要添加到数组的第一个元素。
  • newelement2 可选。要添加到数组的第二个元素。
  • newelementX 可选。可添加多个元素。

返回值

把指定的值添加到数组后的新长度。

说明

push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject,而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。

提示和注释

注释:该方法会改变数组的长度。

实例

在本例中,我们将创建一个数组,并通过添加一个元素来改变其长度:

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.push("James") + "<br />")
document.write(arr)

</script>

输出

George,John,Thomas
4
George,John,Thomas,James

unshift()方法

unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。

语法

arrayObject.unshift(newelement1,newelement2,....,newelementX)

参数

  • newelement1 必需。要添加到数组的第一个元素。
  • newelement2 可选。要添加到数组的第二个元素。
  • newelementX 可选。可添加多个元素。

返回值

arrayObject 的新长度。

说明

unshift() 方法将把它的参数插入 arrayObject 的头部,并将已经存在的元素顺次地移到较高的下标处,以便留出空间。该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新的元素 1,以此类推。

请注意,unshift() 方法不创建新的创建,而是直接修改原有的数组。

提示和注释

注释:该方法会改变数组的长度。

注释unshift() 方法无法在 Internet Explorer 中正确地工作!

提示:要把一个或多个元素添加到数组的尾部,请使用 push() 方法。

实例

在本例中,我们将创建一个数组,并把一个元素添加到数组的开头,并返回数组的新长度:

<script type="text/javascript">

var arr = new Array()
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.unshift("William") + "<br />")
document.write(arr)

</script>

输出

George,John,Thomas
4
William,George,John,Thomas

splice()方法

splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。

注释:该方法会改变原始数组。

语法

arrayObject.splice(index,howmany,item1,.....,itemX)

参数

  • index 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
  • howmany 必需。要删除的项目数量。如果设置为 0,则不会删除项目。
  • item1, ..., itemX 可选。向数组添加的新项目。

返回值

Array 包含被删除项目的新数组,如果有的话。

说明

splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。

提示和注释

请注意,splice() 方法与 slice() 方法的作用是不同的,splice() 方法会直接对数组进行修改。

实例

例子 1

在本例中,我们将创建一个新数组,并向其添加一个元素:

<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
arr.splice(2,0,"William")
document.write(arr + "<br />")

</script>

输出

George,John,Thomas,James,Adrew,Martin
George,John,William,Thomas,James,Adrew,Martin

例子 2

在本例中我们将删除位于 index 2 的元素,并添加一个新元素来替代被删除的元素:

<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
arr.splice(2,1,"William")
document.write(arr)

</script>

输出

George,John,Thomas,James,Adrew,Martin
George,John,William,James,Adrew,Martin

例子 3

在本例中我们将删除从 index 2 ("Thomas") 开始的三个元素,并添加一个新元素 ("William") 来替代被删除的元素:

<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
arr.splice(2,3,"William")
document.write(arr)

</script>

输出

George,John,Thomas,James,Adrew,Martin
George,John,William,Martin

总结

本文介绍了从数组中添加和删除元素的各种方法,这些方法有一些使用上的区别,以及使用时需要注意的地方,文章中都进行了详细的介绍。

标签: 数组  Array  
相关文章
    • IT热文
    • 站长推荐