JavaScript 数组操作方法 和 ES5数组拓展

2018-07-22 06:07:40来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

数组操作方法

push

在数组最后添加一个元素

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

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

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

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

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

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

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

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

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完成删除

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完成新增

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

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

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

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

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

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

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来进行数组的深拷贝,即:

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

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

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

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

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

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

var arr = [7,8,9,10,11]

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

其他案例:

    var users = [
        {
            name: 'aaa',
            age: 21
        },
        {
            name: 'baa',
            age: 18
        },
        {
            name: 'abc',
            age: 24
        }
    ]

    // 按age 从小到大排序
    var sortByAge = users.sort(function(v1, v2){
        return  v1.age > v2.age
    })

  // 按name从大到小排序
    var sortByName = users.sort(function(v1, v2){
        return  v1.name > v2.name
    })

ES5 数组拓展

ES5为Array做了大幅拓展

.indexOf / .lastIndexof

该方法用于查找数组内指定元素的位置,查到第一个之后返回其索引,没有找到则返回-1。lastIndexOf反向搜索,查到第一之后,返回其索引,但顺序还是取正序。

var arr = [2,3,4,"root","evenyao",3,8,7]
console.log(arr.indexOf(3))   //1
console.log(arr.indexOf(11))   //-1
console.log(arr.lastIndexof(3))   //5

 

forEach

遍历数组,参数为一个回调函数,回调函数有三个参数

  1. 当前元素 value
  2. 当前元素索引值 i
  3. 整个数组 array
var arr = [1,2,3,4,5,6]

arr.forEach(function(value,i,array){
    array[i]= value + 1
})

console.log(arr); //[2, 3, 4, 5, 6, 7]
var arr  = [3,4,"evenyao"]
arr.forEach(function(value,index){
    console.log('' + value+value)
})

//33
//44
//evenyaoevenyao

 

map

遍历数组,回调函数。返回值做操作之后组成一个新数组返回,新数组索引结构和原数组一致,原数组不变

var arr = [1,2,3,4,5,6]
var arr2 = arr.map(function(val){
    return val * val
})

console.log(arr)   //[1, 2, 3, 4, 5, 6]
console.log(arr2)   //[1, 4, 9, 16, 25, 36]

 

every、some

逻辑判定,回调函数返回一个布尔值

  • every是所有函数的每个回调函数都返回true,才返回true,遇到false就终止执行,返回false
var arr = [1,2,-1,0,5]
arr.every(function(val){
    return val>0
})  //false
 
 
 
var arr = [1,2,1,3,5]
arr.every(function(val){
    return val>0
})  //true
 
 
  • some是存在有一个回调函数返回true就终止执行并返回true,否则返回false
var arr = [1,2,-1,0,5]
arr.some(function(val){
    return val>0
})  //true

  



 

filter

返回数组的一个子集,回调函数用于逻辑判断是否返回,返回true则把当前元素加入到返回数组中,false则不加。新数组只包含返回true的值,原数组保持不变。

var arr = [3,5,6,-1,-2,-3]
var arr2 = arr.filter(function(val){
    return val > 0
})

console.log(arr)  //[3, 5, 6, -1, -2, -3]
console.log(arr2)  //[3, 5, 6]

其他案例:

var users = [
  { name: "John", age: 15 },
  { name: "Pete", age: 19 },
  { name: "Ann", age: 12 }
]

//筛选age > 18的用户
var age18 = users.filter(function(user){
    return user.age > 18
})
console.log(age18)
 
 
 
var users = [
  { name: "John", age: 15 },
  { name: "Pete", age: 19 },
  { name: "Ann", age: 12 }
]

//筛选姓名中含有'n'的用户
var namehasn = users.filter(function(user){
    return user.name.indexOf('n')>-1
})
console.log(namehasn)

 

 



 

reduce

遍历数组,调用回调函数,将数组元素组合成一个值,不影响原数组

  1. 回调函数:把两个值合为一个,返回结果
  2. value,一个初始值,可选
var arr = [3,4,5]
arr.reduce(function(v1,v2){
    return v1 + v2
})  //12
arr.reduce(function(v1,v2){
    return v1 * v2 
})  //60

//含value初始值
arr.reduce(function(v1,v2){
    return v1 + v2
},10)  //22
arr.reduce(function(v1,v2){
    return v1 * v2 
},10)  //600
 

参考链接

  • 参考 阮一峰 javascript 教程
  • 参考 JavaScript 之 对象/JSON/数组
 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:vue使用树形控件z-tree,动态添加数据

下一篇:TypeScript在node项目中的实践