變異方法和替換數組
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>