Vue 数组的变异方法和替换数组

变异方法和替换数组

目录

• 变异方法和替换数组
  • 1. 变异方法(修改原有数据)
  • 2. 替换数组(生成新的数组)
  • 3. 修改响应式数据

---

1. 变异方法(修改原有数据)

• push()
  接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度

• pop()
  从数组末尾移除最后一项，减少数组的length值，然后返回移除的项

• shift()
  移除数组中的第一个项并返回该项，同时数组的长度减1

• unshift()
  在数组前端添加任意个项并返回新数组长度

// 将新项添加到数组起始位置:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
// fruits 将输出：Lemon,Pineapple,Banana,Orange,Apple,Mango

• splice()
  删除原数组的一部分成员，并可以在被删除的位置添加入新的数组成员

// 移除数组的第三个元素，并在数组第三个位置添加新元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
// 参数1必填，其他参数可选
fruits.splice(2,1,"Lemon","Kiwi");
// fruits 输出结果：Banana,Orange,Lemon,Kiwi,Mango

• sort()
  调用每个数组项的toString()方法，然后比较得到的字符串排序，返回经过排序之后的数组

• reverse()
  用于反转数组的顺序，返回经过排序之后的数组

2. 替换数组(生成新的数组)

• filter()
  创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素

// currentValue 必须。当前元素的值
// index 可选。当前元素的索引值
// arr 可选。当前元素属于的数组对象
// thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"
.filter(function(currentValue,index,arr), thisValue)

• concat()
  方法用于连接两个或多个数组。该方法不会改变现有的数组

// 参数arrayX必选。该参数可以是具体的值，也可以是数组对象。可以是任意多个。
.concat(arrayX,arrayX,......,arrayX)

• slice()
  方法可从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组

// 参数1必选，规定开始选取元素的位置；参数2可选，规定结束选取元素的位置
.slice(start,stop)

3. 修改响应式数据

  在改变数组的值的时候，值确实是改变了，但是视图却无动于衷，这时候就需要修改响应式数据。

  Vue.set(vm.items, indexOfItem, newValue)
  vm.$set(vm.items, indexOfItem, newValue)

  ① 参数一表示要处理的数组名称
  ② 参数二表示要处理的数组的索引
  ③ 参数三表示要处理的数组的值

  <div id="app">
    <ul>
      <li v-for='item in list'>{{item}}</li>
    </ul>
    <div>
      <div>{{info.name}}</div>
      <div>{{info.age}}</div>
      <div>{{info.gender}}</div>
    </div>
  </div>

  <script type="text/javascript">
    /*
      动态处理响应式数据
    */
    var vm = new Vue({
      el: '#app',
      data: {
        list: ['apple', 'orange', 'banana'],
        info: {
          name: 'lisi',
          age: 12
        }
      },
    });
    // vm.list[1] = 'lemon';
    // Vue.set(vm.list, 2, 'lemon');
    vm.$set(vm.list, 1, 'lemon');
 
    // vm.info.gender = 'male';
    vm.$set(vm.info, 'gender', 'female');
  </script>