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

由于前端的业务比较复杂，在数据的增删过程中可能需要以数组的形式操作，但是数组有时候可能会不满足用户的需求，比如说我在数组中插入某一个值，不影响原来的元素，或者删除一个元素。删除的时候从开头删呢还是结尾删，都需要考虑。所有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)

④执行效果

⑤项目实战

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)

④执行效果

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

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>

执行效果

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>

执行效果

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>

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

③项目实战

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

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

猜你喜欢