⭐数组方法⭐

容易混淆的地方:

Vue中 响应式并不包括数组中的 项

1. vue对在data中声明的数据进行处理，将这些数据都变成响应式的。(响应式即数据变化会自动更新页面)
2. 对在data中声明的基本类型的数据，对象及对象中的属性，都是响应式的，但是例外对数组中的项并不是响应式的

new Vue({
    el: '#app',
    data: {
        // 基本类型的数据，响应式的
        str: 'abc',
        num: 123,
        flag: true,
        // 对象及对象的属性，都是响应式的
        obj: {
            a: 1,
            b: 2,
            c: 3
        },
        // 数组本身是响应式的，如对数组arr重新赋值 或者 使用【改变原数组的那些数组方法】
        // 但是 直接通过索引找到数组项进行改变如: this.arr[2] = 33是不行的，因为数组项不是响应式的
        // 解决方案:
        // 1. 改变数组本身，因为数组本身是响应式
        // 2. 使用数组的splice方法去改变数组的项
        // 3. Vue.set 或者 this.$set方法。二者是同一个方法，如果在实例对象上调用使用this.$set。类上调用使用Vue.set
        arr: [1, 2, 3, 4]
    }
})

	变成响应式：

  响应式后的结果：

好了，下面开始言归正传

数组方法

1. 改变数组本身的方法

• push，向数组的尾新增一个元素，返回值是改变后的该数组的length值
• unshift，向数组的头新增一个元素，返回值是改变后的该数组的length值
• pop，从数组的最后删除一个元素，返回值是被删除的元素
• shift，从数组的头部删除一个元素，返回值是被删除的元素
• splice(index, num, item1, item2, …)，index是指定开始处理的索引位置，num指定删除多少项，从第三个元素开始都是新增的元素项。可以实现从指定的索引位置新增、删除、替换元素。返回值是被删除的元素组成的数组。
• sort，对数组排序，默认按照升序排列，可以传递函数类型的参数决定排序的方式
• reverse，反转数组
• reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

2. 不改变数组本身返回新数组的方法

• concat，concat的参数，可以是单个/多个基本类型的值，也可以是数组。对原数组和参数拼接，返回拼接后形成的新数组。
• slice(startIndex, endIndex)，截取原数组的片段，前闭后开区间，包含startIndex索引的元素开始截取，一直到endIndex索引之前的那个元素

3. 循环遍历相关的方法

这些方法也可以在循环的过程中 间接的改变数组自身的元素

• forEach((item, index) => {})方法，遍历数组的每个元素，参数为一个函数，参数函数的两个参数为数组项和对应的索引
• map((item, index) => {})方法，遍历数组的每个元素，参数为一个函数，参数函数的两个参数为数组项和对应的索引，根据参数函数的执行结果，把这些结果组成一个新数组返回。
• filter((item, index) => {})方法，遍历数组的每个元素，执行参数函数，将符合参数函数中定义条件的那些项留下，组成一个新数组返回
• some((item, index) => {})方法，循环数组，对每一项执行参数函数中的条件，有符合条件的项则立即返回true，不再继续遍历；如果全部遍历完还没有找到符合项则返回false
• every((item, index) => {})，与some相反，every需要是数组中每一项都符合参数函数中的条件才返回true，如果遇见任何一项不符合立即返回false，也不再继续遍历后续项。

4. 总结

1. vue中数组类型的数据，本身是响应式，只要能够改变数组自身，都可以做到数据变化，页面随之更新。可以使用上面【改变数组自身的方法】+ 【循环方法，在循环中改变数组元素也做到了数组自身变化】+ 【给数组赋新值】
2. 数组的项不是响应时的，所以直接通过索引赋新值的方式不可行，this.arr[2] = 'abc'这种操作很明确就是改变数组的某一项，所以无法响应式的更新页面中的对应数据。

5. 其他方法

• indexOf，获取数组中某元素的索引，如果存在该元素则返回该元素的索引，不存在则返回-1.仅适用于数组元素为基本类型时
• findIndex，是对indexOf方法的补充，indexOf能做的，findIndex都能做。findIndex方法接收一个函数，在函数中写查找逻辑，如arr.findIndex(item => item.id === 2)查找数组中含有属性id值为2的那个项的索引。返回值同indexOf,找到返回对应的索引值，找不到返回-1