vue之push() pop() shift() unshift() splice() sort() reverse()等等
一、变更方法
Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
let arr = ['a', 'b', 'c', 'd']
console.log(arr) // ["a", "b", "c", "d"]
console.log(arr.push('new')) //6
console.log(arr) // ["a", "b", "c", "d", "new"]
1234
pop() 方法数组最后一位元素删除并返回数组的最后一个元素。
let arr = ['a', 'b', 'c', 'd']
console.log(arr) // ["a", "b", "c", "d"]
console.log(arr.pop()) //d
console.log(arr) // ["a", "b", "c"]
1234
shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
let arr = ['a', 'b', 'c', 'd']
console.log(arr) // ["a", "b", "c", "d"]
console.log(arr.shift()) //a
console.log(arr) // ["b", "c", "d"]
1234
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
let arr = ['a', 'b', 'c', 'd']
console.log(arr) // ["a", "b", "c", "d"]
console.log(arr.unshift('new')) //6
console.log(arr) // ["new","a", "b", "c", "d"]
1234
splice(index,howmany,item1, …, itemX) 方法向/从数组中添加/删除项目，然后返回被删除的项目
第一个参数：表示从哪个索引位置（index）添加/删除元素
第二个参数：要删除的项目数量。如果设置为 0，则不会删除项目。
第三个参数：可选。向数组添加的新项目。
例:splice(1);保留前一个元素之后的全部删除，splice(2);保留前两个元素之后的全部删除
let arr = ['a', 'b', 'c', 'd']
arr.splice(2)
console.log(arr) //["a", "b"]
123
例:splice(2, 1) 从索引位置(index:2)删除，删除一个元素
let arr = ['a', 'b', 'c', 'd']
arr.splice(2, 1)
console.log(arr) // ["a", "b", "d"]
123
例:splice(1,2,‘a’,‘b’) 从索引位置(index:1)删除，删除2个元素，并添加2个新元素来替代被删除的元素
let arr = ['a', 'b', 'c', 'd']
arr.splice(1, 2, '1', '2')
console.log(arr) // ["a", "1", "2", "d"]
123
例:splice(1,0,‘a’)从索引位置(index:1)添加，添加两个元素
let arr = ['a', 'b', 'c', 'd']
arr.splice(1, 0, '1', '2')
console.log(arr) // ["a", "1", "2", "b", "c", "d"]
123
sort() 方法对原列表进行排序，如果指定参数，则使用比较函数指定的比较函数。
arr.sort(sortby) 可选。规定排序顺序。必须是函数。
例:字母顺序进行排序
let arr = ['e', 'a', 'c', 'b', 'd']
arr.sort()
console.log(arr) //["a", "b", "c", "d", "e"]
123
例:大小排序
function sortNumber (a, b) {
return a - b
}
let arr = [10,5,40,25,1000,1]
arr.sort(sortNumber)
console.log(arr) // [1, 5, 10, 25, 40, 1000]
123456
reverse() 方法颠倒数组中元素的顺序。
let arr = ['a', 'b', 'c', 'd']
arr.reverse()
console.log(arr) // ["d", "c", "b", "a"]
123
二、替换数组
它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})
123
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
concat() 方法用于连接两个或多个数组。
slice() 方法可从已有的数组中返回选定的元素。
三、其他
split() 方法用于把一个字符串分割成字符串数组。
四、综合：列表搜索和排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表搜索和排序</title>
</head>
<body>
<div id="demo">
<div><input type="text" v-model="searchKey" placeholder="请输入搜索关键字"></div>
<ul>
<li v-for="(v, k) in filtersList" :key="k">
{{v.name}}-{{v.age}}
</li>
</ul>
<button @click="sortType = 1">年龄升序</button>
<button @click="sortType = 2">年龄降序</button>
<button @click="sortType = 0">年龄默认</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
new Vue({
el: '#demo',
data () {
return {
searchKey: '',
sortType: 0, // 0代表默认 1代表升序 2代表降序
list: [
{ name: 'Tom', age: 18 },
{ name: 'Body', age: 12 },
{ name: 'Lily', age: 25 },
{ name: 'Boss', age: 35 },
{ name: 'Dive', age: 28 }
]
}
},
computed: {
filtersList () {
const {searchKey, list, sortType} = this
let arr
arr = list.filter(v => v.name.indexOf(searchKey) > -1)
if (sortType !==0) {
arr.sort(function (v1, v2) {
if (sortType === 2) {
return v2.age-v1.age
} else {
return v1.age-v2.age
}
})
}
return arr
}
}
})
</script>
</body>
</html>