Vue基础(14)_列表过滤、列表排序
Array.prototype.filter()【ES5】
filter() 方法创建给定数组一部分的浅拷贝，其包含通过所提供函数实现的测试的所有元素。
语法：
filter(callbackFn)
filter(callbackFn, thisArg)参数：
callbackFn(回调函数)：为数组中的每个元素执行的函数。它应该返回一个真值以将元素保留在结果数组中，否则返回一个假值。该函数被调用时将传入以下参数：
element：数组中当前正在处理的元素。
index：正在处理的元素在数组中的索引。
array：调用了 filter() 的数组本身。thisArg(可选):执行 callbackFn 时用作 this 的值。
返回值：
返回给定数组的一部分的浅拷贝，其中只包括通过提供的函数实现的测试的元素。如果没有元素通过测试，则返回一个空数组。
筛选排除所有较小的值：
以下示例使用 filter() 创建一个过滤数组，该数组删除了所有值小于 10 的元素。
function isBigEnough(value) {return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]在数组中搜索：
下例使用 filter() 根据搜索条件来过滤数组内容。
const fruits = ["apple", "banana", "grapes", "mango", "orange"];
/*** 根据搜索条件（查询）筛选数组项*/
function filterItems(arr, query) {return arr.filter((el) => el.toLowerCase().includes(query.toLowerCase()));
}console.log(filterItems(fruits, "ap")); // ['apple', 'grapes']
console.log(filterItems(fruits, "an")); // ['banana', 'mango', 'orange']Array.prototype.includes()【ES7(2016)】
includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。
语法:
includes(searchElement)
includes(searchElement, fromIndex)参数:
searchElement:需要查找的值。
fromIndex(可选)：开始搜索的索引（从零开始），会转换为整数。
①、负索引从数组末尾开始计数——如果 fromIndex < 0，那么实际使用的是 fromIndex + array.length。然而在这种情况下，数组仍然从前往后进行搜索。
②、如果 fromIndex < -array.length 或者省略 fromIndex，则使用 0，这将导致整个数组被搜索。
③、如果 fromIndex >= array.length，则不会搜索数组并返回 false。返回值:
一个布尔值，如果在数组中（或者在 fromIndex 所指示的数组部分中，如果指定 fromIndex 的话）找到 searchElement 值，则该值为 true。
使用 includes() 方法：
const array1 = [1, 2, 3];console.log(array1.includes(2));
// Expected output: trueconst pets = ["cat", "dog", "bat"];console.log(pets.includes("cat"));
// Expected output: trueconsole.log(pets.includes("at"));
// Expected output: false[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true
["1", "2", "3"].includes(3); // falsefromIndex 大于等于数组长度
如果 fromIndex 大于等于数组的长度，则将直接返回 false，且不搜索该数组。
const arr = ["a", "b", "c"];arr.includes("c", 3); // false
arr.includes("c", 100); // false计算出的索引小于 0
如果 fromIndex 为负值，计算出的索引将作为开始搜索 searchElement 的位置。如果计算出的索引小于 0，则整个数组都会被搜索。
// 数组长度为 3
// fromIndex 为 -100
// 计算出的索引为 3 + (-100) = -97const arr = ["a", "b", "c"];arr.includes("a", -100); // true
arr.includes("b", -100); // true
arr.includes("c", -100); // true
arr.includes("a", -2); // false列表过滤、排序之实例演练：
<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>列表过滤、列表排序</title><script type="text/javascript" src="../js/vue.js"></script>
</head><body><div id="root"><!-- 遍历对象数组 --><h3>人员列表</h3><input type="text" v-model:value="keyword"><button @click="sortType=1">年龄升序</button><button @click="sortType=-1">年龄降序</button><button @click="sortType=0">原顺序</button><ul><li v-for="p in selectPer" :key="p.id">{{p.name}}-{{p.age}}--{{p.sex}}</li></ul></div>
</body></html>用计算属性(computed)实现：
<script>new Vue({el: '#root',data: {keyword: '',sortType: '',persons: [{ id: '001', name: '马小琴', age: 29, sex: '女' },{ id: '002', name: '周晓雨', age: 30, sex: '女' },{ id: '003', name: '周啸天', age: 28, sex: '男' },{ id: '004', name: '李耀宗', age: 29, sex: '男' },{ id: '005', name: '周晓霞', age: 42, sex: '女' },{ id: '006', name: '李国庆', age: 22, sex: '男' },{ id: '007', name: '马晓晴', age: 36, sex: '女' }]},computed: {selectPer() {const arr = this.persons.filter(p => p.name.includes(this.keyword))switch (this.sortType) {case 1: return arr.sort((a, b) => a.age - b.age); break;case -1: return arr.sort((a, b) => b.age - a.age); break;default: return arr; break}}}})
</script>用侦听属性(watch)实现：
<script>new Vue({el: '#root',data: {keyword: '',sortType: '',persons: [{ id: '001', name: '马小琴', age: 29, sex: '女' },{ id: '002', name: '周晓雨', age: 30, sex: '女' },{ id: '003', name: '周啸天', age: 28, sex: '男' },{ id: '004', name: '李耀宗', age: 29, sex: '男' },{ id: '005', name: '周晓霞', age: 42, sex: '女' },{ id: '006', name: '李国庆', age: 22, sex: '男' },{ id: '007', name: '马晓晴', age: 36, sex: '女' }],selectPer: []},watch: {'keyword': {// 立即执行一次监听。此时keyword为空字符，匹配返回真(true)，打印全数组。immediate: true,handler() {this.selectPer = this.persons.filter(p => p.name.includes(this.keyword))}},'sortType'() {switch (this.sortType) {case 1: this.selectPer.sort((a, b) => a.age - b.age); break;case -1: this.selectPer.sort((a, b) => b.age - a.age); break;default: this.selectPer = this.persons.filter(p => p.name.includes(this.keyword)); break}}}})</script>
