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: true
const pets = ["cat", "dog", "bat"];
console.log(pets.includes("cat"));
// Expected output: true
console.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) = -97
const 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>
