学习笔记：Vue常用操作数组函数(一)

一. 更新数组

注

以下API最大的好处是可以被Vue的watch和计算属性监视到，可以方便在watch或者computed的操作。

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

shift(Element)也可以用在数组对象上，可以删除数组中第一个对象（pop可以删除数组中最后一个对象）

例

        let arr = [{name:'张三',age:18},{name:'李四',age:20}]
        arr.shift();
        console.log(arr);

       result------ [{…}]
            0: {name: '张三', age: 18}
            length: 1

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(start,count,newElement)：从指定索引号对应元素开始删除count个元素，并在删除元素的后面添加新元素。

例

        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

6. reverse()：颠倒原数组元素位置（更新原数组），并且会返回更新后数组的长度。我个人用的时候理解就是升序变降序，降序变升序，大佬们勿喷qaq

例

        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

7.Vue.set(target,propertyName/index,value); 修改或添加data中的元素也可以写成vm.$set(target,propertyName/index,value);

例

        Vue.config.productionTip = false;

        const vm = new Vue({
            el: '#root',
            data: {
                student: {
                    name: '小王',
                    age: 18,
                }
            },
            mounted() {
                Vue.set(this.student, 'age', '20')
            }
        });
        result------>
            学生姓名：小王
            学生年龄：20