数组变异方法

6、数组的变异方法

​ ● 在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变

​ ● 变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展

push()	往数组最后面添加一个元素，成功返回当前数组的长度
pop()	删除数组的最后一个元素，成功返回删除元素的值
shift()	删除数组的第一个元素，成功返回删除元素的值
unshift()	往数组最前面添加一个元素，成功返回当前数组的长度
splice()	有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除 后想要在原位置替换的值
sort()	sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组
reverse()	reverse() 将数组倒序，成功返回倒序后的数组

替换数组

不会改变原始数组，但总是返回一个新数组

filter	filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
concat	concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组
slice	slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组

​

<div id="app">
        <!-- <div v-for="item in list" v-text="item" :key="item.id"></div> -->
        <div v-for="item in clothes" v-text="item.cname" :key="item.id"></div>
        <p v-text="obj.uname"></p>
        <input type="button" value="按钮" @click="updateList">
</div>
 <script>
        const app = new Vue({
            el: "#app",
            data: {
                list: ['苹果', '香蕉', '梨'],
                clothes: [{
                    id: 111,
                    cname: '上衣',
                    price: 200
                },
                {
                    id: 112,
                    cname: '裤子',
                    price: 200
                },
                {
                    id: 115,
                    cname: '帽子',
                    price: 200
                }],
                obj:{
                    uname:'孙悟空',
                    age:501
                }
            },
            methods: {
                updateList() {

                    // 数组中的数组元素如果不是值类型,通过索引进行修改,可以修改原数据并且触发视图更新
                    this.clothes[0].cname='毛衣'


                    // 可以改变原数组并且可以触发视图更新
                    // reverse sort splice pop push shift unshift

                    // this.list.push('芒果')
                    // this.list.pop()

                    // this.list.reverse()
                    // this.list.sort()

                    // this.list.splice(0,1,'芒果')

                    // this.clothes=this.clothes.map(item=>item.cname)
                    // console.log(this.clothes) //[上衣,裤子,帽子]


                    // forEach无法改变原数组
                    // this.list.forEach(item=>item='sss')
                    // console.log(this.list)

                    // 改变了原数组，不会触发视图更新
                    // for(let i=0;i<this.list.length;i++){
                    //     this.list[i]='111'
                    // }
                    // console.log(this.list)

                    // 如果数组中的数组元素为值类型，通过索引改变数组元素并不会触发视图更新
                    // this.list[0]=111
                    // console.log(this.list)

                    // 上述情况可以使用以下方法修改数组并且触发视图更新
                    // this.$set(原数据，索引，改变之后的值)
                    // this.$set(this.list,0,'芒果')

                    // this.$set还可以改变对象
                    // this.obj.uname='猪八戒'
                    // vue实例调用$set方法
                    // this.$set(this.obj,'uname','猪八戒')
                    // Vue构造函数调用set方法
                    Vue.set(this.obj,'uname','猪八戒')


                    // 面试题:  vue中数组变异方法有哪几个?

                }
            }
        })

    </script>