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

╰半夏微凉° 2022-04-24 10:50 298阅读 0赞

# 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

![12904618-f39bcf9629377747.png][]

var arr = [1,2,1,3,5]
    arr.every(function(val){
        return val>0
    })  //true

![12904618-9f2be573b753ad5c.png][]

*  some是存在有一个回调函数返回true就终止执行并返回true，否则返回false

var arr = [1,2,-1,0,5]
    arr.some(function(val){
        return val>0
    })  //true

![12904618-eb9f0ff05195926e.png][]

## 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)

![12904618-872e295ef99b1956.png][]

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)

![12904618-ea9f99f2ccd855c5.png][]

## 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

作者：[evenyao][]

出处：[http://www.cnblogs.com/evenyao/][evenyao]

[12904618-f39bcf9629377747.png]: /images/20220216/ac3e74ea8e3e4158b744278a56016d76.png
[12904618-9f2be573b753ad5c.png]: /images/20220216/f46970ab17c744a3a4de0e8c11664c06.png
[12904618-eb9f0ff05195926e.png]: /images/20220216/820d85f34d974b29af7a48bd0c938231.png
[12904618-872e295ef99b1956.png]: /images/20220216/154e41b2d656444e8cbb091df0fbdab6.png
[12904618-ea9f99f2ccd855c5.png]: /images/20220216/5267b9de67eb40c58dbaef6c02e7956f.png
[evenyao]: http://www.cnblogs.com/evenyao/