js数组方法总结

最新推荐文章于 2025-07-30 16:36:32 发布

爱编程的梨清

最新推荐文章于 2025-07-30 16:36:32 发布

阅读量282

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/nbsl_/article/details/124865410

js 专栏收录该内容

16 篇文章

订阅专栏

这篇博客详细介绍了JavaScript中数组的各种操作方法，包括join、push、pop、unshift、shift、splice、reverse、sort、includes、indexOf、lastIndexOf、slice、concat、toString、map、filter、some、every、find、reduce等。这些方法涵盖了数组的转换、添加、删除、查找、排序等常见操作，既有修改原数组的方法，也有保持原数组不变的。同时，还讲解了遍历数组的for循环、forEach、map、filter、some、every、find方法，以及reduce方法的使用。文章以实例演示，帮助读者理解并掌握JavaScript数组操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数组方法

join(分隔符) 将数组转为字符串

    var arr=[1,2,3,4]
    console.log(arr.join());
    // 1,2,3,4
    console.log(arr.join(':'));
    // 1:2:3:4

实现重复字符串

    function repetStr(str,n){
      return new Array(n+1).join(str)
    }
    console.log(repetStr('嗨',5));

push方法数组尾部添加元素，返回数组的长度

arr.push(element1, ..., elementN)
//可以传递多个参数

    var arr=[]
    console.log(arr.push('a'));
	//1
    console.log(arr);
	//a

pop删除最后一个元素，返回值为删除的那个最后元素

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

unshift 在头部添加元素，返回值为数组长度
1. arr.unshift (element1, …, elementN)
2. 可以在头部添加多个元素
```
    var arr=[1,2,3]
    console.log(arr.unshift('0'));
    console.log(arr);
```

shift删除第一个元素，返回删除的第一个元素

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

splice数组的增删改，第一个参数为开始位置，第二个参数为操作的个数，第三个参数是替换删除的数据
1. 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
2. start指定修改的位置(从0开始计数)。如果这个值超出了数组的长度，则丛数组尾部添加内容；如果是负值，则表示从数组末位开始的第几位（从-1计数，这意味着-n是倒数第n个元素并且等价于arr.length-n）
  如果负数的绝对值大于数组的长度，则表示开始从0位置
3. deleteCount 整数，表示要移除数组元素的个数。如果deleteCount大于start之后元素的总数，则从start后面的元素将被删除，包含start元素。如果deleteCount被省略了，或者它的值大于等于start之后的值的总数，则start之后的元素都会被删除。如果为0或者负数的时候，则不移除元素，这种情况下，至少可以添加一个元素
4. item1,item2 要添加进数组的元素，从start开始。如果不指定，则splcie只删除数组元素
5. 返回值是删除的元素，如果没有删除，则返回空数组
```
    var arr=[1,2,3,4]
    // 从索引为0开始删除所有
    console.log(arr.splice(0));
    console.log(arr);
    var arr1=[1,2,3,4]
    // 从2的位置删除0个插入5
    console.log(arr1.splice(2,0,5));
    console.log(arr1);
```

reserve 颠倒数组的位置

返回值是颠倒后的数组
会改变原数组

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

sort()排序括号内传函数，有连个参数比如说a,b

函数返回值为a-b 则为升序从小到大
函数返回值为b-a 则为降序从大到小

    var arr=[1,54,2,16,22,8]
    console.log(arr.sort(function(a,b){return a-b}));//升序
    var arr1=[1,54,2,16,22,8]
    console.log(arr1.sort(function(a,b){return b-a}));//降序

以上都是修改原数组的方法

includes()：第一个参数为检索的目标，第二个参数为检索的起始位置。返回值是布尔值

    var arr=[1,2,3,4,5]
    console.log(arr.includes(2,0));//true
    console.log(arr.includes(12,0));//false

indexOf：方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
1. 第一个参数检索的目标，第二个参数是检索的开始位置，如果检索到，返回值为为检索的第一个匹配元素的索引，没有检索到返回值为-1
2. 第二个参数，如果大于整个数组的长度，说明不会从数组中查找，返回-1，如果提索引值是一个负数，则从数组尾部开始查找，-1表示倒数第一个元素，以此类推，如果负值抵消数组小于0，则表示0，从整个数组开始查找
3. 从前往后查
```
    var arr=[1,2,3,4,5]
    console.log(arr.indexOf(5,2));
    console.log(arr.indexOf(15,2));
    console.log(arr.indexOf(5,-1));
    console.log(arr.indexOf(2,-15));
```
lastIndexOf：方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。
1. 从后往前查找
2. 如果为负数，从后面的位置开始查找，比如果-1，代表最后一个元素
```
    var arr=[1,2,3,4,2,3]
    console.log(arr.lastIndexOf(2,0));//-1
    console.log(arr.lastIndexOf(2,6));//4
    console.log(arr.lastIndexOf(2,-1));//4
```
slice方法方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。
1. arr.slice([begin[, end]])
2. begin 表示提取元素开始位置，从0开始。如果为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2)代表原数组中的倒数第二个元素到最后一个。如果省略begin，则默认为slice(0)提取元素，如果begin超出数组的索引范围，则会返回空数组
3. end 和begin结合提取二者之间的数据，如果为负数slice(-2,-1)则提取倒数第二个元素，如果end大于整个数组的长度，则表示提取到最后，end被省略也会提取到最后
4. 一个含有被提取元素的新数组。
```
    var arr=[1,2,3,4,5,6,7]
    console.log(arr.slice(-2));
	//[6,7]
    console.log(arr.slice(0));
	//[1,2,3,4,5,6,7]
    console.log(arr.slice(-2,-1));
	//[6]
    console.log(arr.slice(1,9));
	//[2,3,4,5,6,7]
```

concat 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

var new_array = old_array.concat(value1[, value2[, …[, valueN]]])
返回的是原数组和另一个数组结合的浅拷贝
不会改变原数组

    var arr1=[0,1,2,3]
    var arr2=[12,11,10,13]
    var arr3=['dsd','dada','ddd']
    console.log(arr1.concat(arr2));
    console.log(arr1.concat(arr2,arr3));
    var arr4=[[1]]
    var arr5=[2,[3]]
    console.log(arr4.concat(arr5));

toString方法返回一个字符串，表示指定的数组及其元素。

    var arr=['hello','vue','react']
    console.log(arr.toString());
	//hello,vue,react

join 把数组转为字符串

    var arr=['h','e','l','l','o']
    console.log(arr.join());
    console.log(arr.join(''));
    console.log(arr.join(' '));
    console.log(arr.join('-'));
    h,e,l,l,o
    hello
    h e l l o
    h-e-l-l-o

以上是不改变原数组的方法

遍历数组方法

for循环：有三个参数，每一项，索引，整个数组

    var arr=[1,2,3,4]
    for(var i=0;i<arr.length;i++)
    {
      console.log(arr[i]);
    }

forEach（value，index，self）三个参数，值，索引，自身数组

没有返回值，返回值为undefined

    var arr=[1,2,3,4,5]
    arr.forEach((value,index,self)=>{
      console.log(value,index,self);
    })

map方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
1. 有三个参数 currentValue ，当前元素，index当前元素的索引，self数组
2. 返回值：一个由原数组每个元素执行回调函数的结果组成的新数组。
3. map方法会给原数组中的每个元素都按顺序调用一次callback函数。callback每次执行的返回值(包括undefined)组合起来形成一个新数组。callback函数只会在有值的索引进行调用，那些从来没有赋值过值或者使用delete删除的索引不会被调用
4. 因为map返回一个新数组，当你不打算返回一个新数组确使用map时违背设计初衷的，使用forEach或者for of代替。不打算使用map：1.你不打算返回新的数组2.回调函数没有返回值
5. map方法不会改变原数组
```
    var arr=[1,2,3,4,5,6]
    console.log(arr.map(v=>v*2));
    console.log(arr);
    var arr2=[1,4,9]
    console.log(arr2.map(Math.sqrt));
```

filter 根据回调函数返回符合条件的数据组成的数组

不会改变原数组

    var arr=[1,2,3,4,5]
    console.log(arr.filter(v=>v>3));
    console.log(arr);

some 根据回调函数返回布尔值，只有一个符合回调条件即返回true
```
    var arr=[1,2,3,5,6,8]
    console.log(arr.some(v=>v>6));//true
```
every 根据回调函数，当数组所有元素都符合回调条件时才返回true
```
    var arr=[1,2,3,5,1,2]
    console.log(arr.every(v=>v>0));//true
```

find 返回符合条件的第一个值

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

for in 返回返回值为index索引想要获取值为 arr[i]

    var arr=[1,2,3,4,5]
    for(var i in arr)
    {
      console.log(i);
      console.log(arr[i]);
    }

for of 返回值为value

    var arr=[1,2,3,4,5,6]
    for(var i of arr)
    {
      console.log(i);
    }

reduce方法对数组的每个元素按序执行一个由您提供的reducer函数，每一次运行reducer会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值
1. 第一次执行时，不存在上一次的计算结果。如果需要回调函数从数组索引值为0的元素开始执行，则需要传递初始值。否则数组索引为0的元素将会作为初始值，迭代器将从第二个元素开始执行(索引为1而不是0
2. 包含四个参数：
  1. previousValue：上一次调用callback的返回值。在第一次调用时，若指定了初始值inialValue，则值为initialValue，否则为索引为0的元素array[0]
  2. currentValue：数组中正在处理的元素。第一次调用时，若指定了初始值，则值为array[0],否则为array[1]
  3. currentIndex：数组中正在处理的元素索引，若指定了initialValue，则起始索引号为0，否则索引1起始
  4. array用于遍历的数组
  5. initiValue 可选
    
    作为第一次调用callback函数时参数previousValue的值。若指定了初始值initiValue，则currentValue则使用数组的第一个元素；否则previousValue将使用数组的第一个元素，而currentValue使用数组第二个元素
3. 回调函数第一次执行时，previousValue和currentValue的取值有两种情况：
  1. 如果调用reduce()提供的initialValue，previousValue取值为initiValue，currentValue则取数组的第一个值
  2. 如果没有提供initiValue，那么previousValue取数组中的第一个值，currentValue取数组的第二个值、
  数组求和：
```
    var arr=[1,2,3,4,5,6]
    var count=0
    var sum=arr.reduce((prev,curr,currIndex,arr)=>{
      // console.log(currIndex);
      // console.log(arr);
      return prev+curr
    },count)
```
4. 如果数组仅有一个元素(无论位置如何)并且没有提供初始值initiValue，或者有提供initiValue 但是数组为空，那么此唯一值将被返回且回调函数不会执行
  1. 提供初始值initiValue通常更安全，下边例子，如果没有提供initiValue，则reduce方法会因数组的长度不同(大于0，等于0，小于0)而有不同表现：
```
    console.log([1,100].reduce((a,b)=>Math.max(a,b),50));
    console.log([50].reduce((a,b)=>Math.max(a,b),500));
    console.log([60,50].reduce((a,b)=>Math.max(a,b)));
    console.log([].reduce((a,b)=>Math.max(a,b),5));
    console.log([].reduce((a,b)=>Math.max(a,b)));//不传初始值会报错
```