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

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

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

 

③项目实战

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

 

展开阅读全文
©️2020 CSDN 皮肤主题: 创作都市 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值