Vue中数组常用操作函数/迭代器使用总结 -- 数组亦可称为集合

电玩女神 2024-03-30 11:08 14阅读 0赞

#### 文章目录 ####

*  Vue中数组常用操作函数/迭代器使用总结 -- 数组亦可称为集合
 *   *  一、 数组常用的函数/方法
     *   *  1. push(Element): 向数组末尾添加元素（更新原数组），并且会返回更新后数组的长度
         *  2. pop（Element): 删除数组的最后一个元素（更新原数组），并且会返回更新后数组的长度
         *  3. shift(Element): 删除数组的第一个元素（更新原数组），并且会返回更新后数组的长度
         *  4. unshift(Element)：向数组的开头添加一个或多个元素（更新原数组），并且会返回更新后数组的长度。
         *  5. splice(index,len,\[item\])： 可以 替换/删除/添加 数组内某一个或者几个值（该方法会改变原始数组）
         *   *  5-1 删除
             *  5-2 替换
             *  5-3 添加
         *  6. slice：从某个已有的数组返回选定的元素，请注意，该方法并不会修改数组，而是返回一个子数组，可以通过使用负值从数组的尾部选取元素
         *  7. reverse：反转：颠倒原数组元素位置，并且会返回更新后数组的长度
         *  8. sort：排序，通过函数的方式规定排序方式，修改的是原数组；(默认是升序排列)
         *  9. join：把数组的所有元素放入一个字符串中，元素通过指定的分隔符进行分割，此方法有一个参数，即指定分隔符，形成新的字符串，不修改原数组；
         *  10. concat：连接两个或多个数组，并返回连接后的新数组，不修改原数组
     *  二、常见的迭代器forEach,map,filter,some,every等
     *   *  1. filter：过滤出满足条件的部分数据，不会改变原数组，返回符合条件的新数组
         *   *  1-1 filter案例二：筛选数组中满足某条件的集合组成新数组
             *  1-2 filter案例一：巧妙的去重
         *  2. forEach: 全部循环，可以重新给原数组赋值，遍历数组， 没有返回值
         *  3. map: 全部循环，有返回值，不改变原数组，生成新的数组
         *  4. every：全部满足条件，返回true，否则返回false
         *  5. some：由一个对象满足条件，返回true，否则返回false
         *  6. reduce：常用于累加计算，可以代替forEach等，返回值为计算后的数值
         *  7. find：在数组中找到符合要求的对象
         *  8. findIndex返回第一个符合条件的索引号
     *  三. Vue修改或添加data中的元素: Vue.set(target,propertyName/index,value) 或者写成 vm.$set(target,propertyName/index,value);

## Vue中数组常用操作函数/迭代器使用总结 – 数组亦可称为集合 ##

### 一、 数组常用的函数/方法 ###

#### 1. push(Element): 向数组末尾添加元素（更新原数组），并且会返回更新后数组的长度 ####

let arr = ['first','second','third','last']
            arr.push('new');
            console.log(arr);
            
            result----->Array(5)
                0: "first"
                1: "second"
                2: "third"
                3: "last"
                4: "new"
                length: 5

#### 2. pop（Element): 删除数组的最后一个元素（更新原数组），并且会返回更新后数组的长度 ####

let arr = ['first','second','third','last']
            arr.pop();
            console.log(arr);
            
            result------Array(3)
                ['first', 'second', 'third']
                0: "first"
                1: "second"
                2: "third"
                length: 3

#### 3. shift(Element): 删除数组的第一个元素（更新原数组），并且会返回更新后数组的长度 ####

let arr = ['first','second','third','last']
            arr.shift('newFirst');
            console.log(arr);
           
           result------Array(3)
               ['second', 'third', 'last']
               0: "second"
               1: "third"
               2: "last"
               length: 3

#### 4. unshift(Element)：向数组的开头添加一个或多个元素（更新原数组），并且会返回更新后数组的长度。 ####

*  ***注意这里的添加可以是多种类型的***

let arr = ['first','second','third','last']
            arr.unshift(4,[1,2,1],' ','char');
            console.log(arr);
     
            result------ Array(8)
                0: 4
                1: (3) [1, 2, 1]
                2: " "
                3: "char"
                4: "first"
                5: "second"
                6: "third"
                7: "last"
                length: 8

#### 5. splice(index,len,\[item\])： 可以 替换/删除/添加 数组内某一个或者几个值（该方法会改变原始数组） ####

##### 5-1 删除 #####

// 实例一: 删除起始下标为1，长度为1的一个值(len设置1，如果为0，则数组不变)
    var arr = ['a','b','c','d'];
    arr.splice(1,1);
    console.log(arr);
    //['a','c','d'];
    
    // 实例二： 删除起始下标为1，长度为2的一个值(len设置2)
    var arr2 = ['a','b','c','d']
    arr2.splice(1,2);
    console.log(arr2);
    //['a','d']

##### 5-2 替换 #####

// 实例一： 替换起始下标为1，长度为1的一个值为‘ttt’，len设置的1
    var arr = ['a','b','c','d'];
    arr.splice(1,1,'ttt');
    console.log(arr);
    //['a','ttt','c','d']
    
    // 实例二： 替换起始下标为1，长度为2的两个值为‘ttt’，len设置的1
    var arr2 = ['a','b','c','d'];
    arr2.splice(1,2,'ttt');
    console.log(arr2);
    //['a','ttt','d']
    
    // 实例三： 将第三个元素'third'替换成‘newEle’
            let arr = ['first','second','third','last']
            arr.splice(2,1,'newEle');
            console.log(arr);
            
            result------ Array(4)
                0: "first"
                1: "second"
                2: "newEle"
                3: "last"
                length: 4

##### 5-3 添加 #####

// 实例： 在下标为1处添加一项'ttt'
    var arr = ['a','b','c','d'];
    arr.splice(1,0,'ttt');
    console.log(arr);
    //['a','ttt','b','c','d']

#### 6. slice：从某个已有的数组返回选定的元素，请注意，该方法并不会修改数组，而是返回一个子数组，可以通过使用负值从数组的尾部选取元素 ####

var arr = [1,2,3,4,5,6];
    var arr2 = arr.slice(-4,-2); //返回的arr2结果是:[3,4]
    // 说明：负值从-1开始计算，slice的结果是含头不含尾

#### 7. reverse：反转：颠倒原数组元素位置，并且会返回更新后数组的长度 ####

let arr = ['first','second','third','last']
            arr.reverse();
            console.log(arr);
     
            result------ Array(4)
                (4) ['last', 'third', 'second', 'first']
                0: "last"
                1: "third"
                2: "second"
                3: "first"
                length: 4

#### 8. sort：排序，通过函数的方式规定排序方式，修改的是原数组；(默认是升序排列) ####

arr=[1,9,3,7,3,2]
    arr.sort(function(a,b){
        
      if(a>b){
        
        return 1;
      }else if(a<b){
        
        return -1;
     }else{
        
        return 0;
     })
     
    或者
    arr.sort(function(a,b){
        
     return a-b; //升序排列
     return b-a;//降序排列
      })
    console.log(arr)

#### 9. join：把数组的所有元素放入一个字符串中，元素通过指定的分隔符进行分割，此方法有一个参数，即指定分隔符，形成新的字符串，不修改原数组； ####

var arr = ['a','b','c'];
    var arrStr = arr.join("-"); // 结果是a-b-c
    var arrStr = arr.join(""); // 结果是abc
    var arrStr = arr.join(","); // 结果是a,b,c

#### 10. concat：连接两个或多个数组，并返回连接后的新数组，不修改原数组 ####

var arr1 = [1,2,3];
    var arr2 = ['a','b','c']
    var arr3 = arr1.concat(arr2);// 对应的结果是 [1,2,3,'a','b','c']

### 二、常见的迭代器forEach,map,filter,some,every等 ###

#### 1. filter：过滤出满足条件的部分数据，不会改变原数组，返回符合条件的新数组 ####

##### 1-1 filter案例二：筛选数组中满足某条件的集合组成新数组 #####

data = [
    {
         id:1, name:'小馨', tel:'136****123', time:'2022-04-12', tag:'0',age:'20' },
    {
         id:2, name:'小航', tel:'136****456', time:'2022-04-14', tag:'1',age:'21' },
    {
         id:3, name:'大航', tel:'152****789', time:'2022-04-16', tag:'1',age:'22' }，
    {
         id:4, name:'小艺', tel:'158****987', time:'2022-04-14', tag:'0',age:'21' }]
    
    // 已审核数组okList   tem.tag='1'--已审核
    this.okList = this.data.filter(item => item.tag === '1')
    console.log(this.okList)
    /**
    	[{ id:2, name:'小航', tel:'136****456', time:'2022-04-14', tag:'1',age:'21' },
    	 { id:3, name:'大航', tel:'152****456', time:'2022-04-16', tag:'1',age:'22' }]
    */

##### 1-2 filter案例一：巧妙的去重 #####

data = ['小馨','小白','小张','小航','小馨','小航']
    // 筛选后新数组为newData
    this.newData = this.data.filter((item,index,self) => self.indexOf(item)===index)
    console.log(this.newData)
    // 控制台输出
    // ['小馨', '小白', '小张', '小航']

#### 2. forEach: 全部循环，可以重新给原数组赋值，遍历数组， 没有返回值 ####

//	需要一个回调函数作为参数
    // array.forEach(callback(currentValue, index, array){
        
        //do something
    // })　
    //		回调函数的形参说明如下：
    //			value: 遍历数组的内容 index: 对应数组的索引 array: 数组本身
    //	forEach() 方法主要是用于调用数组的每个元素，并将元素传递给回调函数。
    var a = [1,2,3,4,5]
    var b = a.forEach((item) => {
        
        item = item * 2
    })
    console.log(a)  // [2,4,6,8,10]
    console.log(b)  // undefined

#### 3. map: 全部循环，有返回值，不改变原数组，生成新的数组 ####

var a = [1,2,3,4,5]
    var b = a.map((item) => {
        
        return item = item * 2
    })
    console.log("a--:", a)  // [1,2,3,4,5]
    console.log("b--:", b)	// [2,4,6,8,10]

#### 4. every：全部满足条件，返回true，否则返回false ####

test(){
        
          let arr=[0,1,2,3,4];
          let every_result = arr.every(one => one>2);
          console.log(every_result); //false
        },

#### 5. some：由一个对象满足条件，返回true，否则返回false ####

test(){
        
          let arr=[0,1,2,3,4];
          let some_result = arr.some(one => one>2);
          console.log(some_result);//true
        },

#### 6. reduce：常用于累加计算，可以代替forEach等，返回值为计算后的数值 ####

test() {
        
          let arr = [0, 1, 2, 3, 4];
          // reduce的第二个参数0：代表sum的起始值是0
          var sumValue = arr.reduce(function (sum, number) {
        
            // 第一个参数为叠加总值，需要初始化，第二个参数是当前项
            return sum + number;
          }, 0); //sum的初始化
          console.log(sumValue); //10
        },

#### 7. find：在数组中找到符合要求的对象 ####

// 和filter的区别就是找到符合要求的对象就停止寻找了，
    // 	返回的是一个对象，而filter返回的是所有符合要求的对象组成的新数组
    test() {
        
          let arr = [0, 1, 2, 3, 4];
          var big = arr.find(val => val>2);
          console.log(big); //3
        },

#### 8. findIndex返回第一个符合条件的索引号 ####

test1() {
        
          let arr = [1, 1, 2, 0, 4];
          var big = arr.findIndex(val => val>2);
          console.log(big); 	// 下标为4
        },

### 三. Vue修改或添加data中的元素: Vue.set(target,propertyName/index,value) 或者写成 vm.$set(target,propertyName/index,value); ###

// 实例： 通过Vue.set或者vm.$set修改data中student对象的age值
            Vue.config.productionTip = false;
            const vm = new Vue({
        
                el: '#root',
                data: {
        
                    student: {
        
                        name: '小王',
                        age: 18,
                    }
                },
                mounted() {
        
                    Vue.set(this.student, 'age', '20')
                }
            });
            result------>
                学生姓名：小王
                学生年龄：20