变异方法和替换数组
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>