Vue基础(14)_列表过滤、列表排序

Array.prototype.filter()【ES5】

filter() 方法创建给定数组一部分的浅拷贝，其包含通过所提供函数实现的测试的所有元素。

语法：
filter(callbackFn)
filter(callbackFn, thisArg)

参数：
callbackFn(回调函数) ：为数组中的每个元素执行的函数。它应该返回一个真值以将元素保留在结果数组中，否则返回一个假值。 该函数被调用时将传入以下参数：

element：数组中当前正在处理的元素。

index：正在处理的元素在数组中的索引。

array：调用了 filter() 的数组本身。

thisArg(可选):执行 callbackFn 时用作 this 的值。

返回值：
**返回给定数组的一部分的浅拷贝，其中只包括通过提供的函数实现的测试的元素。**如果没有元素通过测试，则返回一个空数组。

筛选排除所有较小的值：

以下示例使用 filter() 创建一个过滤数组，该数组删除了所有值小于 10 的元素。

javascript 复制代码

function isBigEnough(value) {
  return value >= 10;
}
const filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]

在数组中搜索：

下例使用 filter() 根据搜索条件来过滤数组内容。

javascript 复制代码

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() 方法：

javascript 复制代码

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); // false

fromIndex 大于等于数组长度

如果 fromIndex 大于等于数组的长度，则将直接返回 false，且不搜索该数组。

javascript 复制代码

const arr = ["a", "b", "c"];

arr.includes("c", 3); // false
arr.includes("c", 100); // false

计算出的索引小于 0

如果 fromIndex 为负值，计算出的索引将作为开始搜索 searchElement 的位置。如果计算出的索引小于 0，则整个数组都会被搜索。

javascript 复制代码

// 数组长度为 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

列表过滤、排序之实例演练：

html 复制代码

<!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)实现：

javascript 复制代码

<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)实现：

javascript 复制代码

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