JavaScript中操作数组的方法


对数组操作的方法分为两种 一种是会改变原始数组的变异方法,还有一种是不会改变原始数组的非变异方法。

变异方法 (mutation method)

1.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

2. push() 方法

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

语法

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

newelement1  必需。要添加到数组的第一个元素。

newelement2  可选。要添加到数组的第二个元素。

newelementX  可选。可添加多个元素。

返回值

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

说明

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

提示和注释

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

提示:要想数组的开头添加一个或多个元素,请使用 unshift() 方法。

实例

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

<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

 

3. 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

 

4. 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

5.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

6.sort() 方法 

sort() 方法用于对数组的元素进行排序。

语法

arrayObject.sort(sortby)

参数         描述

sortby       可选。规定排序顺序。必须是函数。

返回值

对数组的引用。请注意,数组在原数组上进行排序,不生成副本。

说明

如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。

如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:

若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。

若 a 等于 b,则返回 0。

若 a 大于 b,则返回一个大于 0 的值。

实例

例子 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 />")

document.write(arr.sort())

 

</script>

输出:

George,John,Thomas,James,Adrew,Martin

Adrew,George,James,John,Martin,Thomas

例子 2

在本例中,我们将创建一个数组,并按字母顺序进行排序:

<script type="text/javascript">

 

var arr = new Array(6)

arr[0] = "10"

arr[1] = "5"

arr[2] = "40"

arr[3] = "25"

arr[4] = "1000"

arr[5] = "1"

 

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

document.write(arr.sort())

 

</script>

  

输出:

10,5,40,25,1000,1

1,10,1000,25,40,5

请注意,上面的代码没有按照数值的大小对数字进行排序,要实现这一点,就必须使用一个排序函数:

<script type="text/javascript">

 

function sortNumber(a,b)

{

return a - b

}

 

var arr = new Array(6)

arr[0] = "10"

arr[1] = "5"

arr[2] = "40"

arr[3] = "25"

arr[4] = "1000"

arr[5] = "1"

 

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

document.write(arr.sort(sortNumber))

 

</script>

  

输出:

10,5,40,25,1000,1

1,5,10,25,40,1000

 7.reverse() 方法

reverse() 方法用于颠倒数组中元素的顺序。

语法

arrayObject.reverse()

提示和注释

注释:该方法会改变原来的数组,而不会创建新的数组。

实例

在本例中,我们将创建一个数组,然后颠倒其元素的顺序:

<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.reverse())

 

</script>

  

输出:

George,John,Thomas

Thomas,John,George

 

非变异 (non-mutating method) 方法

1.filter() 方法

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意: filter() 不会对空数组进行检测。

注意: filter() 不会改变原始数组。

语法

array.filter(function(currentValue,index,arr), thisValue)

参数说明

function(currentValue, index,arr)    必须。函数,数组中的每个元素都会执行这个函数

函数参数:

currentValue    必须。当前元素的值

index         可选。当期元素的索引值

arr    可选。当期元素属于的数组对象

thisValue 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。

如果省略了 thisValue ,"this" 的值为 "undefined"

 

返回值:返回数组,包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。

实例:

返回数组 ages 中所有元素都大于输入框指定数值的元素:

<p>最小年龄: <input type="number" id="ageToCheck" value="18"></p>

<button onclick="myFunction()">点我</button>

 

<p>所有大于指定数组的元素有? <span id="demo"></span></p>

 

<script>

var ages = [32, 33, 12, 40];

 

function checkAdult(age) {

    return age >= document.getElementById("ageToCheck").value;

}

 

function myFunction() {

    document.getElementById("demo").innerHTML = ages.filter(checkAdult);

}

</script>

  

2.concat() 方法

concat() 方法用于连接两个或多个数组。

该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

语法

arrayObject.concat(arrayX,arrayX,......,arrayX)

arrayX      必需。该参数可以是具体的值,也可以是数组对象。可以是任意多个。

返回值

返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组,那么添加的是数组中的元素,而不是数组。

实例

例子 1

在本例中,我们将把 concat() 中的参数连接到数组 a 中:

<script type="text/javascript">

 

var a = [1,2,3];

document.write(a.concat(4,5));

 

</script>

输出:

1,2,3,4,5

例子 2

在本例中,我们创建了两个数组,然后使用 concat() 把它们连接起来:

<script type="text/javascript">

 

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

 

var arr2 = new Array(3)

arr2[0] = "James"

arr2[1] = "Adrew"

arr2[2] = "Martin"

 

document.write(arr.concat(arr2))

 

</script>

  

输出:

George,John,Thomas,James,Adrew,Martin

例子 3

在本例中,我们创建了三个数组,然后使用 concat() 把它们连接起来:

<script type="text/javascript">

 

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

 

var arr2 = new Array(3)

arr2[0] = "James"

arr2[1] = "Adrew"

arr2[2] = "Martin"

 

var arr3 = new Array(2)

arr3[0] = "William"

arr3[1] = "Franklin"

 

document.write(arr.concat(arr2,arr3))

 

</script>

  

输出:

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

3. slice() 方法

slice() 方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。

语法

stringObject.slice(start,end)

start         要抽取的片断的起始下标。如果是负数,则该参数规定的是从字符串的尾部开始算起的位置。也就是说,-1 指字符串的最后一个字符,-2 指倒数第二个字符,以此类推。

end  紧接着要抽取的片段的结尾的下标。若未指定此参数,则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数,那么它规定的是从字符串的尾部开始算起的位置。

返回值

一个新的字符串。包括字符串 stringObject 从 start 开始(包括 start)到 end 结束(不包括 end)为止的所有字符。

说明

String 对象的方法 slice()、substring() 和 substr() (不建议使用)都可返回字符串的指定部分。slice() 比 substring() 要灵活一些,因为它允许使用负数作为参数。slice() 与 substr() 有所不同,因为它用两个字符的位置来指定子串,而 substr() 则用字符位置和长度来指定子串。

还要注意的是,String.slice() 与 Array.slice() 相似。

实例

例子 1

在本例中,我们将提取从位置 6 开始的所有字符:

<script type="text/javascript">

 

var str="Hello happy world!"

document.write(str.slice(6))

 

</script>

  

输出:

happy world!

  

例子 2

在本例中,我们将提取从位置 6 到位置 11 的所有字符:

<script type="text/javascript">

 

var str="Hello happy world!"

document.write(str.slice(6,11))

 

</script>

  

输出:

happy

  


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM