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

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