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>
)
