前端对数组操作最常用的几种方法

素颜马尾好姑娘i 2023-02-21 12:25 220阅读 0赞

由于前端的业务比较复杂，在数据的增删过程中可能需要以数组的形式操作，但是数组有时候可能会不满足用户的需求，比如说我在数组中插入某一个值，不影响原来的元素，或者删除一个元素。删除的时候从开头删呢还是结尾删，都需要考虑。所有js提供了几种常用的方法进行对数组操作，详解如下代码：

1.push()

①说明

*  push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
 *  如果出现push()方法,那后边就必须跟一个参数,最少是一个,其他的可选
 *  push() 方法可把它的参数顺序添加到 arrayObject 的尾部,直接修改原来数组的长度,而不是创建一个新的数组

②语法

arrayObject.push(newelement1,newelement2,....,newelementX)

③用法

var arr = new Array(3)
        arr[0] = "George"
        arr[1] = "John"
        arr[2] = "Thomas"    
        document.write(arr + "<br />")
        document.write(arr.push("James") + "<br />")
        document.write(arr.push("helloword")+"<br/>")
        document.write(arr)

④执行效果

![20200630163054971.png][]

⑤项目实战

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg_size_16_color_FFFFFF_t_70][]

2.unshift()

①说明

*  unshift() 方法可向数组的开头添加一个或多个元素，并返回新的长度。
 *  如果出现push方法,那后边就必须跟一个参数,最少是一个,其他的可选. 
 *  unshift() 方法可把它的参数顺序添加到 arrayObject 的头部,直接修改原来数组的长度,而不是创建一个新的数组

②语法

arrayObject.unshift(newelement1,newelement2,....,newelementX)

③用法

var arr = new Array(3)
        arr[0] = "George"
        arr[1] = "John"
        arr[2] = "Thomas"
    
        document.write(arr + "<br />")
        document.write(arr.unshift("James") + "<br />")
        document.write(arr.unshift("helloword")+"<br/>")
        document.write(arr)

④执行效果

可以看出，插入的元素已经到了数组的第一个位置

![20200630164159920.png][]

3.splice()

①说明

*  从数组的某个位置开始插入，插入之后可以删除某个元素，也可以不删除，根据数组的下标操作。
 *  index开始插入和或删除的数组元素的下标，必须是数字，或是下标变量。
 *  从这个数组的下标为2的位置开始插入两个元素，插入之后删除一个元素，删除的元素的下标是刚插入的这个元素的下标的下一个位置，返回的数组是操作后的新数组

②语法

array.splice(index,howmany,item1,.....,itemX)

第一种，删除并插入

<body>
        <p id="demo">点击按钮向数组添加元素。</p>
        <button onclick="myFunction()">点击删除元素并插入</button>
          <script>
             function myFunction() {
             var Sports = ["basketball", "baseball", "volleyball", "handball","golfball"];
             fruits.splice(2, 1, "volleyball", "bowlingball");
             var x = document.getElementById("demo"); 
             x.innerHTML = fruits;
          }
         </script>
     </body>

第二种，只删除

<body>
        <p id="demo">点击按钮删除数组中的元素</p>
        <button onclick="myFunction()">点击只删除元素</button>
          <script>
             function myFunction() {
             var Sports = ["basketball", "baseball", "volleyball", "handball","golfball"];
             fruits.splice(2, 1, "volleyball", "bowlingball");
             var x = document.getElementById("demo"); 
             x.innerHTML = fruits;
          }
         </script>
     </body>

③项目实战

// 接收子组件传递过来的内容
           getMoreInfo(obj) {
             console.log("子组件" + obj);
            // 这里做过滤，判断之前传过来的值是否存在，如果存在，就删除，重新push
            //如果不存在就直接push到数组中。
             for (let i = 0; i < this.selectedObj.length; i++) {
              this.smallQuestionScore = this.selectedObj[i].questionValue;
              if (this.selectedObj[i].questionType == obj.questionType) {
                 this.selectedObj.splice(i, 1);
              }
             }
             //将子组件传过来的对象推入selectobj数组
            this.selectedObj.push(obj);
           },

4.slice()

①说明

*  将原来数组中的某个或某几个特定的值截取出来
 *  返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
 *  正数形式

1. start    可选。规定从何处开始选取。

2.end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。

*  负数形式：

1.如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。

2.如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

<p id="demo">点击按钮截取数组下标 1 到 2 的元素。</p>
        <button onclick="myFunction()">点我</button>
        <script>
         function myFunction() {
          var Sports = ["basketball", "baseball", "volleyball", "handball","golfball"];
            //截取出来的数组
            var intercept = Sports.slice(1, 3);
            var x = document.getElementById("demo");
            x.innerHTML = intercept;
          }
       </script>

执行效果

![20200630171614637.png][]

5.shift()

①说明

*  shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
 *  会改变原来的数组,返回的是一个新的数组
 *  和它对应的方法是从数组中移除最后一个元素，用pop方法

注意：和对应的还有一个pop()方法，正好和shift的相反，pop用于把数组的最后一个元素从其中删除

<body>
        <p id="demo">单击按钮删除数组的第一个元素。</p>
        <p id="demo2"></p>
        <button onclick="myFunction()">点我</button>
        <script>
          var Sports = ["basketball", "baseball", "volleyball", "handball","golfball"];
          function myFunction() {
            var delell = Sports.shift();
            // var delell=Sports.pop();
            var x = document.getElementById("demo");
            x.innerHTML = "删除后数组为：" + Sports;
            document.getElementById("demo2").innerHTML = "删除的元素是：" + delell;
          }
        </script>
      </body>

执行效果

![20200630171443737.png][]

6.join()方法

①说明

*  用户把一个数组中的元素用不用的分隔符进行分割，把数组中的元素转换成字符串格式。

②代码

<body>
        <p id="demo">单击按钮删除数组的第一个元素。</p>
        <p id="demo2"></p>
        <button onclick="myFunction()">点我</button>
        <script>
          var Sports = [
            "basketball",
            "baseball",
            "volleyball",
            "handball",
            "golfball",
          ];
          function myFunction() {
            var energy = Sports.join();
            // var energy = Sports.join("|");
            // var energy = Sports.join("and");
            // var delell=fruits.pop();
            var x = document.getElementById("demo");
            x.innerHTML = "删除后数组为：" + Sports;
            document.getElementById("demo2").innerHTML = "删除的元素是：" + delell;
          }
        </script>
      </body>

执行效果，这里分割可以用多种方法

![20200630171254503.png][]

③项目实战![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg_size_16_color_FFFFFF_t_70 1][]

总结：这些方法在这次的项目中基本都用到了，因此记录下来。

[20200630163054971.png]: https://img-blog.csdnimg.cn/20200630163054971.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200630163452991.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg==,size_16,color_FFFFFF,t_70
[20200630164159920.png]: https://img-blog.csdnimg.cn/20200630164159920.png
[20200630171614637.png]: https://img-blog.csdnimg.cn/20200630171614637.png
[20200630171443737.png]: https://img-blog.csdnimg.cn/20200630171443737.png
[20200630171254503.png]: https://img-blog.csdnimg.cn/20200630171254503.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200630170712298.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l5cDAzMDREZXZpbg==,size_16,color_FFFFFF,t_70