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

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

④执行效果

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

3.splice()

①说明

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

②语法

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

第一种，删除并插入

 
    点击按钮向数组添加元素。

    点击删除元素并插入
      
 

第二种，只删除

 
    点击按钮删除数组中的元素

    点击只删除元素
      
 

③项目实战

      // 接收子组件传递过来的内容
       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.如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

 点击按钮截取数组下标 1 到 2 的元素。

    点我
    

执行效果 

 

5.shift()

①说明

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

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

    单击按钮删除数组的第一个元素。

    

    点我
    
  

 执行效果

 

6.join()方法

①说明

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

②代码

 
    
单击按钮删除数组的第一个元素。
    

    点我
    
  

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

 

③项目实战

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