最近处于面试的长途火车上,有一些关于数组的方法的返回值以及是否改变数组,相信有很多小伙伴和我一样,每次用的时候,都去找,相对来说比较麻烦,所以我整理了下,(#^.^#),主要合并了W3school和RUNOOB两个网站里面的知识。
主要有以下一些方法,有添加的下次随时安排上~
方法名 | 介绍 | 返回值 | 是否改变数组 |
join() | 把数组中的所有元素放入一个字符串 | 返回一个字符串 | 不会 |
pop() | 删除并返回数组的最后一个元素 | 返回数组最后一个元素 | 改变数组的长度 |
push() | 向数组的末尾添加一个或多个元素 | 返回新的长度 | 直接修改数组 |
shift() | 把数组的第一个元素从其中删除 | 数组原来的第一个元素的值(就是删除的那个值) | 直接修改原有的数组 |
unshift() | 向数组的开头添加一个或更多元素 | 返回新的长度 | 直接修改原有的数组 |
splice() | 向/从数组中添加/删除项目 | 返回被删除的项目 | 会改变原始数组 |
slice() | 从已有的数组中返回选定的元素 | 返回一个新的数组 | 不会 |
concat() | 用于连接两个或多个数组 | 返回被连接数组的一个副本 | 不会 |
reverse() | 颠倒数组中元素的顺序 | 返回颠倒后的数组 | 会 |
map() | 按照原始数组元素顺序依次处理元素 | 返回一个新数组 | 不会 |
filter() | 指定数组中符合条件的所有元素 | 创建一个新的数组 | 不会 |
forEach() | 用于调用数组的每个元素,并将元素传递给回调函数 | undefined | 会 |
具体介绍:
1、join()方法
定义和用法
join() 方法用于把数组中的所有元素放入一个字符串。
元素是通过指定的分隔符进行分隔的。
语法
arrayObject.join(separator)
参数 | 描述 |
---|---|
separator | 可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。 |
返回值
返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串,然后把这些字符串连接起来,在两个元素之间插入 separator 字符串而生成的。
实例
例子 1
在本例中,我们将创建一个数组,然后把它的所有元素放入一个字符串:
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(
arr.join()
)
</script>
输出:
George,John,Thomas
2、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
3、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
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、splice()
定义和用法
splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。
注释:该方法会改变原始数组。
语法
arrayObject.splice(index,howmany,item1,.....,itemX)
参数 | 描述 |
---|---|
index | 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。 |
howmany | 必需。要删除的项目数量。如果设置为 0,则不会删除项目。 |
item1, ..., itemX | 可选。向数组添加的新项目。 |
返回值
类型 | 描述 |
---|---|
Array | 包含被删除项目的新数组,如果有的话。 |
说明
splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。
技术细节
JavaScript 版本: | 1.2 |
---|
浏览器支持
所有主流浏览器都支持 splice() 方法。
提示和注释
注释:请注意,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
7、slice()
定义和用法
slice() 方法可从已有的数组中返回选定的元素。
语法
arrayObject.slice(start,end)
参数 | 描述 |
---|---|
start | 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。 |
end | 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。 |
返回值
返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。
说明
请注意,该方法并不会修改数组,而是返回一个子数组。如果想删除数组中的一段元素,应该使用方法 Array.splice()。
提示和注释
注释:您可使用负值从数组的尾部选取元素。
注释:如果 end 未被规定,那么 slice() 方法会选取从 start 到数组结尾的所有元素。
实例
例子 1
在本例中,我们将创建一个新数组,然后显示从其中选取的元素:
<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.slice(1)
+ "<br />")
document.write(arr)
</script>
输出:
George,John,Thomas
John,Thomas
George,John,Thomas
8、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
9、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
10、map()
定义和用法
map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意: map() 不会对空数组进行检测。
注意: map() 不会改变原始数组。
语法
array.map(function(currentValue,index,arr), thisValue)
参数说明
参数 | 描述 | ||||||||
---|---|---|---|---|---|---|---|---|---|
function(currentValue, index,arr) | 必须。函数,数组中的每个元素都会执行这个函数 函数参数:
|
||||||||
thisValue | 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。 如果省略了 thisValue,或者传入 null、undefined,那么回调函数的 this 为全局对象。 |
实例
返回一个数组,数组中元素为原始数组的平方根:
var numbers = [4, 9, 16, 25];
function myFunction() {
x = document.getElementById("demo")
x.innerHTML = numbers.map(Math.sqrt);
}
输出结果为:
2,3,4,5
11、filter()
filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意: filter() 不会对空数组进行检测。
注意: filter() 不会改变原始数组。
语法
array.filter(function(currentValue,index,arr), thisValue)
参数说明
参数 | 描述 | ||||||||
---|---|---|---|---|---|---|---|---|---|
function(currentValue, index,arr) | 必须。函数,数组中的每个元素都会执行这个函数 函数参数:
|
||||||||
thisValue | 可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。 如果省略了 thisValue ,"this" 的值为 "undefined" |
实例
返回数组 ages 中所有元素都大于 18 的元素:
var ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}
输出结果为:
32,33,40
12、forEach()
定义和用法
forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。
注意: forEach() 对于空数组是不会执行回调函数的。
语法
array.forEach(function(currentValue, index, arr), thisValue)
参数
参数 | 描述 | ||||||||
---|---|---|---|---|---|---|---|---|---|
function(currentValue, index, arr) | 必需。 数组中每个元素需要调用的函数。 函数参数:
|
||||||||
thisValue | 可选。传递给函数的值一般用 "this" 值。 如果这个参数为空, "undefined" 会传递给 "this" 值 |
实例
列出数组的每个元素:
<button onclick="numbers.forEach(myFunction)">点我</button>
<p id="demo"></p>
<script>
demoP = document.getElementById("demo");
var numbers = [4, 9, 16, 25];
function myFunction(item, index) {
demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + item + "<br>";
}
</script>
输出结果:
index[0]: 4
index[1]: 9
index[2]: 16
index[3]: 25