浅谈常见数组的方法

JavaScript中数组有各种操作方法,以下通过举例来说明各种方法的使用:

push

在数组最后添加一个元素

1
2
3
4
5
var arr=[3,4,5,6]
console.log(arr) //[3, 4, 5, 6]

arr.push("evenyao") //字符串需要加"",数字不加
console.log(arr) //[3, 4, 5, 6, "evenyao"]


pop

把数组最后一位取出来,并返回,且原来数组发生变化

1
2
3
4
5
6
var arr=[3, 4, 5, 6, "evenyao"]
console.log(arr) //[3, 4, 5, 6, "evenyao"]

var value = arr.pop() //arr.pop()的返回值就是取出的值,但这里是undefined是因为前面有var value
console.log(value) //"evenyao"
console.log(arr) //[3, 4, 5, 6]


shift

把数组第一位取出来,并返回,且原来数组发生变化

1
2
3
4
5
6
var arr=["root",3, 4, 5, 6, "evenyao"]
console.log(arr) //["root",3, 4, 5, 6, "evenyao"]

var value = arr.shift()
console.log(value) //"root"
console.log(arr) //[3, 4, 5, 6, "evenyao"]


unshift

在数组第一位新增一个元素

1
2
3
4
5
var arr=[3, 4, 5, 6, "evenyao"]
console.log(arr) //[3, 4, 5, 6, "evenyao"]

arr.unshift("root") //字符串需要加"",数字不加
console.log(arr) //["root",3, 4, 5, 6, "evenyao"]


join

把数组元素使用参数作为连接符,链接成字符串,不会修改原数组的内容

1
2
3
var arr=[3, 4, 5, 6, "evenyao"]
console.log(arr.join('-')) //3-4-5-6-evenyao
console.log(arr) //[3, 4, 5, 6, "evenyao"]


splice

splice方法用于一次性解决数组添加、删除(这两种方法一结合就可以达到替换效果),方法有三个参数

1.开始索引
2.删除元素的位移
3.插入的新元素,当然也可以写多个

使用splice完成删除

1
2
3
4
5
var arr=[3, 4, 5, 6, "evenyao"]
var arr2 = arr.splice(1,2) //从下标为1的元素开始,取出2个元素作为一个数组的返回,原数组发生改变

console.log(arr) //[3, 6, "evenyao"]
console.log(arr2) //[4, 5]

使用splice完成新增

1
2
3
4
var arr=[3, 4, 5, 6, "evenyao"]
arr.splice(1,0,8,9,"yes") //从下标为1的位置(元素4)开始,删除0个,新增三个元素(8,9,"yes"),位置在(元素4)之前

console.log(arr) //[3, 8, 9, "yes", 4, 5, 6, "evenyao"]


slice

取出元素(区间)可作为新数组。但不一样的是原数组不发生变化

1
2
3
4
5
var arr=[3, 4, 5, 6, "evenyao"]
var arr2 = arr.slice(2,3) //从arr下标为2开始,到下标为3结束(不包括3,即只取了一个),作为新数组,原数组不变

console.log(arr) //[3, 4, 5, 6, "evenyao"]
console.log(arr2) //[5]


reverse

将数组逆序,会修改原数组

1
2
3
4
5
var arr=[3, 4, 5, 6, "evenyao"]
console.log(arr) //[3, 4, 5, 6, "evenyao"]

arr.reverse()
console.log(arr) //["evenyao", 6, 5, 4, 3]


concat

用于拼接数组,但不会修改任何一个原始数组,也不会递归链接数组内部数组

1
2
3
4
5
var a = [1,2,3,4,5]
var b = [6,7,8,9]
console.log(a.concat(b)) //[1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(a) //[1, 2, 3, 4, 5]
console.log(b) //[6, 7, 8, 9]

也因为不会改变任何一个原始数组,因此可以用concat来进行数组的深拷贝,即:

1
2
3
4
5
6
var arr=[3, 4, 5, 6, "evenyao"]
var arr2 = arr.concat([]) //相当于和一个空数组进行了拼接,然后生成了arr2看上去和arr一模一样,但是却是两块不一样的内存空间

console.log(arr) //[3, 4, 5, 6, "evenyao"]
console.log(arr2) //[3, 4, 5, 6, "evenyao"]
arr === arr2 //false


sort

用于对数组进行排序,会改变原数组

1
2
3
var arr=[5,4,3,2,1]
arr.sort()
console.log(arr) //[1, 2, 3, 4, 5]

但是有一些情况下情况下会变成下面这样:

1
2
3
var arr=[7,8,9,10,11]
arr.sort()
console.log(arr) //[10, 11, 7, 8, 9]

因为按照字母表排序,7比10大,这时候我们需要传入自定义排序函数

1
2
3
4
5
6
var arr = [7,8,9,10,11]

arr.sort(function(v1,v2){
return v1-v2
})
console.log(arr) //[7, 8, 9, 10, 11]

sort 排序 其他案例:

对以下代码 users中的对象,分别以 name 字段、age 字段、company 字段进行排序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var users = [
{ name: "John", age: 20, company: "Baidu" },
{ name: "Pete", age: 18, company: "Alibaba" },
{ name: "Ann", age: 19, company: "Tecent" }
]

//以name字段进行排序:
var sortByName = users.sort(function(v1, v2){
return v1.name > v2.name
})
console.log(sortByName)


//以age字段进行排序:
var sortByAge = users.sort(function(v1, v2){
return v1.age > v2.age
})
console.log(sortByAge)

//以company字段进行排序:
var sortByCompany = users.sort(function(v1, v2){
return v1.company > v2.company
})
console.log(sortByCompany)

本文结束  感谢您的阅读
0%