js数组的常用方法

sp旧梦

已于 2024-09-28 03:13:04 修改

阅读量924

点赞数 20

于 2024-09-08 13:58:33 首次发布

本文链接：https://blog.csdn.net/qq_39465114/article/details/142004050

版权

js中数组中有一些常用且重要的方法，以下是我对数组方法的总结。

一，常见的数组方法

常见的数组方法大致可以分为增删改查以及其他一些方法。

增：push()，unshift()、concat()、splice()。

删：pop()、shift()、splice()。

改：splice()、fill()、sort()。

查：indexOf()、lastIndexOf()、includes()、find()、findIndex()。

其他一些有：

reverse()方法用于反转数组的顺序；

forEach()、map()、filter()、every()、some()、reduce()、reduceRight()等方法主要用于对数组进行遍历和操作，但不太适合单纯的增删改查分类；

join()方法将数组元素连接成字符串；

toString()和valueOf()方法通常用于将数组转换为字符串表示；

from()方法用于从类数组对象或可迭代对象创建新的数组；

flat()和flatMap()方法用于处理多维数组；

二.方法详解

1.push()方法

功能：在数组末尾添加一个或多个元素，并返回新的数组长度，添加多个元素用逗号隔开。

var arr = [1, 2, 3]
var arrs = arr.push("zs", "ls")
console.log(arr);//[1,2,3,"zs","ls"]
console.log(newarr); //5

2.shift()方法

功能：在数组中删除第一个元素，且每次只能删除数组的第一个，并返回被数据元素的值，会改变原来的数组。

var arr = ["张三", "李四", "赵五"]
var arrs = arr.shift()
console.log(arr); //['李四', '赵五']
console.log(arrs); //张三

3.unshift()方法

功能：在数组的开头添加一个或多个元素，添加多个元素用逗号隔开，并返回新数组的长度，改变原数组。

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

4.pop()方法

功能：从数组的末尾删除最后一个元素，且每次只能删除最后一个元素，并返回被删除的元素，会改变原来数组的值

var arr = [1, 2, 3]
var arrs = arr.pop(3, 4)
console.log(arr); //[1, 2]
console.log(arrs); //3

5.reverse()方法

功能：将数组中的元素反转，并返回被反转的数组，会改变原数组

var arr = [1, 2, 3,"a","b",4,5]
var arrs = arr.reverse()
console.log(arr); //[5, 4, 'b', 'a', 3, 2, 1]
console.log(arrs); //[5, 4, 'b', 'a', 3, 2, 1]

6.sort()方法

功能：对数组中的元素进行排序，并返回数组，它是按照Unicode码点进行排序。

例1：

var arr = [2,6,11,5,1,3]
var arrs = arr.sort()
console.log(arr); //[1, 11, 2, 3, 5, 6]
console.log(arrs); //[1, 11, 2, 3, 5, 6]

由于它是根据Unicode编码进行排序，从结果得知其不稳定性。

语法：arr.sort(function(a,b))

参数：两个参数用于比较，如果a小于b，返回值为负数，如果a大于b，返回值为正数，如果两个参数相等，返回值为0，如果省略函数，元素会转换为字符串根据Unicode 码位值进行排序。

用法：

var arr = [2,6,11,5,1,3]
arr.sort(function(a,b){
   return a-b //从小到大排序
})
console.log(arr); //[1, 2, 3, 5, 6, 11]

var arr = [2,6,11,5,1,3]
arr.sort(function(a,b){
   return b-a //从大到小排序
})
console.log(arr); //[11, 6, 5, 3, 2, 1]

还可以对对象数组中的某个属性进行排序：

var data = [
   { name: "张三", age: 25 },
   { name: "李四", age: 28 },
   { name: "赵五", age: 20 },
]
data.sort(function (a, b) {
    return a.age - b.age //按照age排序
})
console.log(data);

7.concat()方法

功能：将两个或多个数组合并，该方法不会改变原数组，且返回一个新数组。

var arr1 = [1, 2, 3]
var arr2 = ["a", "b", "c"]
var arr3 = ["A", "B", "C"]
var arr = arr1.concat(arr2, arr3)
console.log(arr1); //[1, 2, 3]
console.log(arr); //[1, 2, 3, 'a', 'b', 'c', 'A', 'B', 'C']

8.join()方法

功能：将数组的所有元素用特定字符连接成一个字符串。

var arr = [1, 2, 3, "a", "b"]
var res = arr.join(",") // "1,2,3,a,b"
var res = arr.join("/") // "1/2/3/a/b"
var res = arr.join(" ") // "1 2 3 a b"
console.log(res);

9.splice()方法

功能：向数组中删除/替换/添加元素，然后返回被删除/替换/添加的元素的数组，可实现数组的增删改。

语法：ArrayObject.splice(start,deletecount,tiem1,...,itemX)

参数：

start：必写，必须是整数，删除/添加元素项目位置，为负数时从数组末尾规定位置。

deletecount：可写，必须是整数，表示数组从start开始删除元素的数量。

tiem1,...,itemX：从start开始添加的到数组的元素。

var arr = [1, 2, 3, "a", "b"]
//删除数组从索引2开始的所有元素
var arrs = arr.splice(2)
console.log(arr); //[1, 2]
console.log(arrs); //[3, 'a', 'b']

var arr = [1, 2, 3, "a", "b"]
//删除索引2开始的一个元素
var arrs = arr.splice(2,1)
console.log(arr); //[1, 2, 'a', 'b']
console.log(arrs); //[3]

var arr = [1, 2, 3, "a", "b"]
//删除索引从-2开始的一个元素
var arrs = arr.splice(-2,1)
console.log(arr); //[1, 2, 3, 'b']
console.log(arrs); //['a']

var arr = [1, 2, 3, "a", "b"]
//删除索引2开始的一个元素，且添加"c"和"b"
var arrs = arr.splice(2,1,"c","d")
console.log(arr); //[1, 2, 'c', 'd', 'a', 'b']
console.log(arrs); //[3]

10.slice()方法

功能：从开始位置到结束位置对数组进行浅拷贝，并返回一个新数组，且不会改变原数组。

语法：arr.slice(start,end)

参数：

start：可写，起始位置，默认从0开始。

end：可写，结束位置，但slice()方法会提取但不会包括end的位置

var arr = [1, 2, 3, "a", "b"]
var arrs = arr.slice(1, 3)
console.log(arr); //[1, 2, 3, 'a', 'b']
console.log(arrs); //[2, 3]

11.toString()方法

功能：将数组直接转换为字符串，不会改变原数组。

var arr = [1, 2, 3, "a", "b"]
var arrs = arr.toString(1, 3)
console.log(arr); //[1, 2, 3, 'a', 'b']
console.log(arrs); //"1,2,3,a,b"

12.valueOf()方法

功能：返回数组的原始值

var arr = [1, 2, 3, "a", "b"]
var arrs = arr.valueOf()
console.log(arr); //[1, 2, 3, 'a', 'b']
console.log(arrs); //[1, 2, 3, 'a', 'b']

13.indexOf()方法

功能：查询数组第一次出现给定的下标，不存在则返回-1

var arr = [1, 2, 3, "a", "b"]
console.log(arr.indexOf(2)); //1
console.log(arr.indexOf("a")); //3
console.log(arr.indexOf("4")); //-1

14.lastIndexOf()方法

功能：查询数组中给定最后一次出现的索引，不存在则返回-1

语法：arr.lastIndexOf(search,fromindex)

search:被查找的元素

fromindex：以起始0的索引开始反向索引

var arr = [2, 5, 9, 2]
console.log(arr.lastIndexOf(2)); //3
console.log(arr.lastIndexOf(8)); //-1
console.log(arr.lastIndexOf(2, 3)); //3
console.log(arr.lastIndexOf(2, -2)); //0
console.log(arr.lastIndexOf(2, -1)); //3
console.log(arr.lastIndexOf(2, 2)); //0

15.forEach()方法

功能：遍历数组，并将元素传递给回调函数，对空数组不会执行回调函数，且无法用break中途跳出循环，也不支持return操作输出，return只用于控制循环是否跳出当前循环。

语法：array.forEach(function(value,index,arr) {}, thisvalue)

参数：

value：必写，当前元素。

index：可写，当前元素的索引值。

arr：可写，当前元素所属的数组对象。

thisvalue：可写，传递给函数的值一般用this值，如果这个参数为空，“undefined”会传递给this值

var arr = [11, 22, 33, 44, 55]
arr.forEach(function (item, index, arr) {
   console.log(item, index, arr);
})

执行结果：

16.map()方法

功能：遍历数组，并返回一个新数组，且不会改变原数组，该方法不会对空数组进行检测

语法：array.map(function(value,index,arr) {}, thisvalue)

参数：

value：必写，当前元素。

index：可写，当前元素的索引值。

arr：可写，当前元素所属的数组对象。

thisvalue：可写，对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisvalue，或者传入 null、undefined，那么回调函数的 this 为全局对象。

var arr = [
            { name: "张三", age: 35 },
            { name: "李四", age: 36 },
            { name: "王五", age: 30 },
            { name: "老六", age: 30 },
        ]
        var arr1 = arr.map((item, index, array) => {
            item.name = "名字：" + item.name
            return item.name
        })
        console.log(arr1)

执行结果：

17.filter()方法

功能：遍历数组，该方法创建一个新数组，新数组中的元素通过检查数组中符合条件的所有元素，每次循环时传入回调函数，回调函数返回条件，把满足条件的放到新数组中。

语法：array.filter(function(value,index,arr) {}, thisvalue)

参数：

value：必写，当前元素。

index：可写，当前元素的索引值。

arr：可写，当前元素所属的数组对象。

thisvalue：对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”。

var arr = [
            { name: "张三", age: 35 },
            { name: "李四", age: 36 },
            { name: "王五", age: 30 },
            { name: "老六", age: 30 },
        ]
        var arr1 = arr.filter((item, index, array) => {
            item.age += 5
            return item.age > 35
        })
        console.log(arr1)

执行结果：

18.every()方法

功能：遍历数组，并判断数组中每个元素都满足条件，如果有一个条件不满足则返回false，否则返回true。

var arr = [
            { name: "张三", age: 35 },
            { name: "李四", age: 36 },
            { name: "王五", age: 30 },
            { name: "老六", age: 30 },
        ]
        var arr1 = arr.every((item, index, array) => {
            item.age += 5
            //return item.age > 35 返回false
            return item.age > 30 //返回true
        })
        console.log(arr1)

19.some()方法

功能：遍历数组，并判断数组中元素至少有一个满足条件，如果有一个条件满足则返回true，否则返回false。

var arr = [
            { name: "张三", age: 35 },
            { name: "李四", age: 36 },
            { name: "王五", age: 30 },
            { name: "老六", age: 30 },
        ]
        var arr1 = arr.some((item, index, array) => {
            item.age += 5
            //return item.age > 25 返回false
            return item.age > 30 //返回true
        })
        console.log(arr1)

20.reduce()方法

功能：遍历数组，该方法接收一个函数作为累加器，数组中每个值开始缩减，最终计算为一个值。

语法：array.reduce(function(total,value,index,arr) {}, initialvalue)

参数：

total：必写，初始值，或计算结束后的返回值。

value：必写，当前元素。

index：可写，当前元素的索引值。

arr：可写，当前元素所属的数组对象。

initialvalue：可写，传递函数的初始值

var arr = [1, 2, 3, 4, 5]
        var arr1 = arr.reduce((prev, item, index, array) => {
            console.log(prev, item, index, array);
            return prev + item
        },0)
        console.log(arr, arr1)

执行结果：

21.reduceRight()方法

功能：用法与reduce相同，但reduceRight()方法是从右往左

22.includes()方法

功能：判断数组中是否包含一个指定值，是返回true，否则返回false

var arr = [1, 2, 3, 4, "b"]
        console.log(arr.includes(4)) //true
        console.log(arr.includes("a")) //false

23.from()方法

功能：将类数组对象或可遍历对象转换成一个真正的数组。

var obj = {
            0: "张三",
            1: 25,
            2: "男",
            length: 3
        }
        var objs = Array.from(obj)
        console.log(obj); //
        console.log(objs);

24.find()方法

功能：遍历数组，该方法为数组中每个元素调用一次函数执行，返回数组中满足条件的第一个元素，不存在则返回undefined。

语法：array.find(function(value,index,arr){}, thisvalue)

参数：

value：必写，当前元素。

index：可写，当前元素的索引值。

arr：可写，当前元素所属的数组对象。

thisvalue：传递给函数的值一般用 “this” 值。如果这个参数为空，“undefined”会传递给 “this” 值。

var arr = [1, 2, 3, 4, 5, 6]
        var arrs = arr.find(function (a) {
            return a > 4
        })
        console.log(arrs); //5

25.findIndex()方法

功能：遍历数组，该方法为数组中每个元素调用一次函数，返回数组中满足条件的第一个元素的下标，不存在则返回-1

语法：array.findIndex(function(value,index,arr){}, thisvalue)

参数：

value：必写，当前元素。

index：可写，当前元素的索引值。

arr：可写，当前元素所属的数组对象。

thisvalue：传递给函数的值一般用 “this” 值。如果这个参数为空，“undefined”会传递给 “this” 值。

var arr = [11, 22, 33, 44, 5, 6]
        var arrs = arr.findIndex(function (a) {
            return a > 11
        })
        console.log(arrs); //1

26.fill()方法

功能：用一个固定值填充一个数组

参数：

value：必写，填充的值。

start：可选，开始填充的位置。

end：可选，停止填充的位置。

var arr = [11, 22, 33, 44, 5, 6]
        var arrs = arr.fill("填充fill方法", 2, 4)
        //[11, 22, '填充fill方法', '填充fill方法', 5, 6]
        console.log(arrs);

27.flat()方法

功能：将多维数组“拉平”，变成一维数组，并返回新数组，不会改变原数组（默认拉平一次，自定义拉平需要手动传参，如果想全部拉平，传Infinity）

var arr = [1,2,[3,[4,5,[6]]]]
        var arrs = arr.flat()
        console.log(arrs); //[1, 2, 3, [ 4, 5, [6]]]
        var arrs1 = arr.flat(2)
        console.log(arrs1); //[1, 2, 3, 4, 5, [6]]
        var arrs2 = arr.flat(Infinity)
        console.log(arrs2); //[1, 2, 3, 4, 5, 6]

28.flatMap()方法

功能：flat()和map()组合版，先通过map()返回一个新数组，再将数组拉平(只能拉平一次)

var arr = [11, 22, 33, 44, 55]
            var arrs = arr.flatMap(function (item, index) {
                return [item, index]
            })
        console.log(arrs);//[11, 0, 22, 1, 33, 2, 44, 3, 55, 4]