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>
相关推荐
Wcowin5 分钟前
Mkdocs相关插件推荐(原创+合作)
前端·mkdocs
伍哥的传说42 分钟前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
lichenyang4531 小时前
Axios封装以及添加拦截器
前端·javascript·react.js·typescript
Trust yourself2431 小时前
想把一个easyui的表格<th>改成下拉怎么做
前端·深度学习·easyui
苹果醋31 小时前
iview中实现点击表格单元格完成编辑和查看(span和input切换)
运维·vue.js·spring boot·nginx·课程设计
武昌库里写JAVA1 小时前
iView Table组件二次封装
vue.js·spring boot·毕业设计·layui·课程设计
三口吃掉你1 小时前
Web服务器(Tomcat、项目部署)
服务器·前端·tomcat
Trust yourself2431 小时前
在easyui中如何设置自带的弹窗,有输入框
前端·javascript·easyui
烛阴1 小时前
Tile Pattern
前端·webgl
前端工作日常2 小时前
前端基建的幸存者偏差
前端·vue.js·前端框架