js数组常用19种方法（建议收藏）

最新推荐文章于 2025-06-12 13:44:18 发布

小屎壳郎

最新推荐文章于 2025-06-12 13:44:18 发布

阅读量2.3k

点赞数 15

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/L2636504548/article/details/137271083

本文详细介绍了JavaScript中对数组的各种操作方法，包括改变原数组的push、pop、unshift、shift、reverse、sort和splice，以及不改变原数组的concat、join、slice、indexOf和lastIndexOf。此外，还重点讲解了ES6新增的数组方法如forEach、map、filter、every、some、find和reduce。

一、对原数组有改变的方法

1.push（）末尾添加数据

2.pop（）末尾处删除数据

3.unshift（）头部添加数据

4.shifr（）头部删除数据

5.reverse（）翻转数组

6.sort（）排序

7.splice（）截取数组

二、不改变原数组的方法

1.concat（）合并数组

2.join（）数组转字符串

3.slice（）截取数组的一部分数据

4.indexOf 从左检查数组中有没有这个数值

5.lastIndexOf 从右检查数组中有没有这个数值

三、ES6新增的数组方法

1、forEach（）用来循环遍历的for

2、map 映射数组的

3.filter 过滤数组

4.every 判断数组是不是满足所有条件

5.some（）数组中有没有满足条件的

6.find（）用来获取数组中满足条件的第一个数据

7.reduce（）叠加后的效果

1.push（）末尾添加数据数组

    <script>
        var  arr=[1,2,3,4,5];
        res =arr.push(6);
        console.log(res);
        console.log(arr);
    </script>

2.pop（）末尾处删除数据

    <script>
        //pop() 删除数组最后一个元素
        var  arr=[1,2,3,4,5];
        res =arr.push();
        console.log(res);//[5]
        console.log(arr);//[1,2,3,4] 
    </script>

3.unshift（）头部添加数据

    <script>
        //unshift(数据)方法
        //向数组的开头添加一个或更多元素，并返回新的长度。
        var  arr=[1,2,3,4,5];
        res =arr.unshift(0);
        console.log(res);//[6]
        console.log(arr);//[0,1,2,3,4,5] 
    </script>

4.shift（）头部删除数据

    <script>
        //shift()方法
        //删除数组的第一项，并返回删除的项
        //原数组改变
        var  arr=[1,2,3,4,5];
        res =arr.shift();
        console.log(res);//[1]
        console.log(arr);//[2,3,4,5] 
    </script>

5.reverse（）翻转数组

    <script>
        //reverse()方法用于颠倒数组中元素的顺序。
        //返回值：返回颠倒后的数组。
        var  arr=[1,2,3,4,5];
        res =arr.reverse();
        console.log(res);//[5,4,3,2,1]
        console.log(arr);//[5,4,3,2,1]
    </script>

6.sort（）排序

<script>
      //sort()
       var arr = [3, 43, 48, 52, 4, 5, 99, 41, 67]
       arr.sort()
          console.log(arr);
       arr.sort(function(a,b){return(a-b)})
          console.log(arr);
       arr.sort(function(a,b){return(b-a)})
          console.log(arr);
    </script>

7.splice（）截取数组

    <script>
     //用法一：splice(开始的索引，结束的索引，添加的元素) 
     // 截取从开始到结束的元素，并添加元素
     //返回被删除的元素
       var arr = [10, 60, 8, 56, 48, 75]
          res = arr.splice(1,2,100,200)
          console.log(arr);//[10, 100, 200, 56, 48, 75]
          console.log(res);//[60, 8]
          
     //用法二：slice(开始的索引，结束的索引) 
     // 截取从开始到结束的元素，并返回截取的元素
       var arr = [10, 60, 8, 56, 48, 75]
          res = arr.slice(1,2)
          console.log(arr);//[10, 56, 48, 75]
          console.log(res);//[60, 8]
    </script>

二、不改变原数组的方法

1.concat（）合并数组

    <script>
       //concat() 合并数组，返回新数组
       var arr = [10, 60, 80, 50, 40, 70, 10, 40]
          res = arr.concat(10,"测试",40)
          console.log(arr);//[10, 60, 80, 50, 40, 70, 10, 40]
          console.log(res);//[10, 60, 80, 50, 40, 70, 10, 40, 10, '测试', 40]
    </script>

2.join（）数组转字符串

    <script>
       //join()把数组中的元素用指定的字符串连接起来
       var arr = [10, 60, 80, 50, 40, 70, 10, 40]
          res = arr.join("+")
          console.log(arr);//[10, 60, 80, 50, 40, 70, 10, 40]
          console.log(res);//10+60+80+50+40+70+10+40
    </script>

3.slice（）截取数组的一部分数据

    <script>
       //slice (开始索引,结束索引)
       //截取数组，返回截取的数组
       var arr = [10, 60, 80, 50, 40, 70, 10, 40]
          res = arr.slice(1,4)
          console.log(arr);//[10, 60, 80, 50, 40, 70, 10, 40]
          console.log(res);//[60, 80, 50]
    </script>

4.indexof 从左检查数组中有没有这个数值

    <script>
       //indexOf=>作用就是判断数组中是否包含某个元素
       //语法：数组.indexOf(元素)
       //返回值：如果找到元素，返回元素在数组中的索引位置，如果找不到返回-1
       var arr = [10, 60, 80, 50, 40, 70, 10, 40]
          res = arr.indexOf(50)
          console.log(arr);
          console.log(res);
       //indexOf()语法二：数组.indexOf(元素,起始索引位置)
       var arr = [10, 60, 80, 50, 40, 70, 10, 40]
          res = arr.indexOf(40,3)
          console.log(arr); 
          console.log(res);
    </script>

5.lastIndexOf 从右检查数组中有没有这个数值

    <script>
       //lastIndexOf=>作用就是判断数组中是否包含某个元素
       //语法：数组.lastIndexOf(元素)
       //返回值：如果找到元素，返回元素在数组中的索引位置，如果找不到返回-1
       var arr = [10, 60, 80, 50, 40, 70, 10, 40]
          res = arr.lastIndexOf(50)
          console.log(arr);
          console.log(res);
       //indexOf()语法二：数组.lastIndexOf(元素,起始索引位置)
       var arr = [10, 60, 80, 50, 40, 70, 10, 40]
          res = arr.lastIndexOf(40,3)
          console.log(arr); 
          console.log(res);
    </script>

三、ES6新增的数组方法

1.forEach（）用来循环遍历的 for

    <script>
    //forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
    //item: 数组中正在处理的当前元素。
    //index: 可选,数组中正在处理的当前元素的索引。
    //arr: 可选,forEach() 方法正在操作的数组。
     var arr = [1, 2, 3, 4, 5]
          console.log( arr);
     var res = arr.forEach(function (item, index, arr) {
          console.log(item, index, arr);
       })
    </script>

2.map 映射数组

    <script>
    //map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
     var arr = [1, 2, 3, 4, 5]
          console.log( arr);//[1, 2, 3, 4, 5]
     var res = arr.map(function (item) {
          return item * 200;
       })
       console.log(res);//[200, 400, 600, 800, 1000]
    </script>

3.filter 过滤数组

    <script>
    //filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
    //注意： filter() 不会对空数组进行检测。
    //注意： filter() 不会改变原始数组。
     var arr = [1, 20, 35, 44, 50]
          console.log( arr);//[1, 20, 35, 44, 50]
     var res = arr.filter(function (item) {
          return item > 40;
       })
       console.log(res);//[44, 50]
    </script>

4.every 判断数组是不是满足所有条件

    <script>
    //every 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
    //如果所有元素都通过检测，则返回 true；否则返回 false。
     var arr = [1, 20, 35, 44, 50]
          console.log( arr);//[1, 20, 35, 44, 50]
     var res = arr.every(function (item) {
          return item > 20;
       })
       console.log(res);//false
    </script>

5.some（）数组中有没有满足条件的

    <script>
    //some =>
    //some 方法是用来检测数组中是否含有符合条件的元素
    //如果有，则返回true，否则返回false
    //some 方法不会对空数组进行检测
    //some 方法不会改变原始数组
     var arr = [1, 20, 35, 44, 50]
          console.log( arr);//[1, 20, 35, 44, 50]
     var res = arr.some(function (item) {
          return item > 22;
       })
       console.log(res);//true
    </script>

6.find（）用来获取数组中满足条件的第一个数据

    <script>
    //find()方法
    //find()方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
    //find()方法不会改变原始数组。
     var arr = [1, 20, 35, 44, 50]
          console.log( arr);//[1, 20, 35, 44, 50]
     var res = arr.find(function (item) {
          return item > 22;
       })
       console.log(res);//35
    </script>

7.reduce（）叠加后的效果

    <script>
    //reduce =>
    //用于把数组中的所有值相加得到一个值
    //result => 初始值
    //item => 数组中的每一个值
    //result => 每一次相加的结果
     var arr = [1, 20, 35, 44, 50]
          console.log( arr);//[1, 20, 35, 44, 50]
     var res = arr.reduce(function (result,item) {
          return result+item;
       })
       console.log(res);//150
    </script>