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>
相关文章：
Vue基础(14)_列表过滤、列表排序
Array.prototype.filter()【ES5】 filter() 方法创建给定数组一部分的浅拷贝，其包含通过所提供函数实现的测试的所有元素。 语法： filter(callbackFn) filter(callbackFn, thisArg) 参数： callbackFn(回调函数)：为数组中的每个元…...
Spring Boot项目中JSON解析库的深度解析与应用实践
在现代Web开发中，JSON（JavaScript Object Notation）作为轻量级的数据交换格式，已成为前后端通信的核心桥梁。Spring Boot作为Java生态中最流行的微服务框架，提供了对多种JSON库的无缝集成支持。本文将深入探讨Spring B…...
我用Amazon Q写了一个Docker客户端，并上架了懒猫微服商店
自从接触了Amazon Q，我陆陆续续写了不少小软件，其中这个项目是一个典型的例子，自己平时来使用，也分享给一些 NAS 爱好者来用。 故事还要用上次折腾黑群晖说起，本意想把 NAS 和打印机共享二合一的，所以把闲着…...
Django CMS 的 Demo
以下是关于 Django CMS 的 Demo 示例及相关资源的整理 安装与运行 Django CMS 示例 使用 djangocms-installer 快速创建 Django CMS 项目： pip install django_cms djangocms -p . mysite安装记录 pip install django-cms Looking in indexes: https://pypi.tun…...
在 UE5 蓝图中配置Actor类型的Asset以作为位置和旋转设置目标
目标 UE5的蓝图的事件图表里面，有一个模块（节点）如图，这是一个设置Actor的location和rotation量的模块，其中需要接收一个Target作为输入，这个Target应该就是一个在map中具备location和rotation信息的实例化…...
Android 之 kotlin 语言学习笔记四（Android KTX）
一、Android KTX 简介 Android KTX 是包含在 Android Jetpack 及其他 Android 库中的一组 Kotlin 扩展程序。KTX 扩展程序可以为 Jetpack、Android 平台及其他 API 提供简洁的惯用 Kotlin 代码。为此，这些扩展程序利用了多种 Kotlin 语言功能，其中包括&…...
适用于vue3的大屏数据展示组件库DataV(踩坑版)
踩坑版 如果按照官网(https://datav-vue3.jiaminghi.com/)的vue3安装有问题 官网是将dataview/datav-vue3 安装为本地依赖 npm install dataview/datav-vue31、跑起来报错（报错信息忘记保留了） 有人说找到node_modules， 安装成功后会有这个…...
mysql实现分页查询
文章目录 mysql实现分页查询1. 使用LIMIT和OFFSET2. 使用计算OFFSET的函数（适用于动态分页）3. 使用MySQL的变量（适用于存储过程） 获取所有用户数据并分页 mysql实现分页查询 在MySQL中实现分页查询，通常我们会使用LIM…...
Flink checkpoint
对齐检查点 (Aligned Checkpoint) Flink 的分布式快照机制受到 Chandy-Lamport 算法的启发。 其核心元素是数据流中的屏障（Barrier）。 Barrier 注入 ：JobManager 中的 Checkpoint Coordinator 指示 Source 任务开始 Checkpoint。Source 任务…...
【java】在springboot中实现证书双向验证
证书生成 public static void main(String[] args) throws Exception {// 生成密钥对KeyPairGenerator keyPairGenerator KeyPairGenerator.getInstance("RSA");keyPairGenerator.initialize(2048);KeyPair keyPair keyPairGenerator.generateKeyPair();// 获取私…...
CppCon 2015 学习:Functional Design Explained
这两个 C 程序 不完全相同。它们的差异在于对 std::cout 的使用和代码格式。 程序 1： #include <iostream> int main(int argc, char** argv) {std::cout << "Hello World\n"; }解释：这个程序是 正确的。std::cout 是 C 标准库中…...
基于3D对象体积与直径特征的筛选
1，目的 筛选出目标3D对象。 效果如下： 2，原理 使用3D对象的体积与直径特征进行筛选。 3，代码解析 3.1，预处理2.5D深度图。 * 参考案例库：select_object_model_3d.hdev * ****************************…...
GIT - 如何从某个分支的 commit创建一个新的分支？
如果上一个Release 分支被污染了，想要还原这个分支最原始的样子，有什么办法或者说该怎么办呢？简单来说，就是如何从某个指定的 commit 创建一个新的 Git 分支？ 操作非常简单！ 命令格式 git branch <ne…...
Claude vs ChatGPT vs Gemini：功能对比、使用体验、适合人群
随着AI应用全面进入生产力场景，市面上的主流AI对话工具也进入“三国杀”时代： Claude（Anthropic）：新锐崛起，语言逻辑惊艳，Opus 模型被称为 GPT-4 杀手ChatGPT（OpenAI）&a…...
线程基础编程
早期的计算机只能执行一个任务，一旦任务完成，计算机就会等待下一个任务。这种模型效率低下，无 法充分利用计算机的性能。 随着计算机技术的发展，操作系统开始支持多进程模型，即同时执行多个任务。每个任务被称为一个进…...
DJango项目
一.项目创建 在想要将项目创键的目录下,输入cmd (进入命令提示符)在cmd中输入:Django-admin startproject 项目名称 (创建项目)cd 项目名称 (进入项目)Django-admin startapp 程序名称 (创建程序)python manage.py runserver 8080 (运行程序)将弹出的网址复制到浏览器中…...
深入了解JavaScript当中如何确定值的类型
JavaScript是一种弱类型语言，当你给一个变量赋了一个值，该值是什么类型的，那么该变量就是什么类型的，并且你还可以给一个变量赋多种类型的值，也不会报错，这就是JavaScript的内部机制所决定的，那…...
excel数据对比找不同：6种方法核对两列数据差异
工作中，有时需要核对两列数据的差异，用于对比、复核等。数据较少的情况下差异肉眼可见，数据量较大时用什么方法比较好呢？从个人习惯出发，我整理了6种方法供参考。 6种方法核对两列数据差异： 1、Ctrl G定位…...
基于智能代理人工智能（Agentic AI）对冲基金模拟系统:模范巴菲特、凯西·伍德的投资策略
股票市场涉及众多统计数据和模式。股票交易基于研究和数据驱动的决策。人工智能的使用可以实现流程自动化，让投资者在研究上花费更少的时间，同时提高准确性。这使他们能够更加专注于监督实际交易和服务客户。 顶尖对冲基金经理发挥着至关重要的作用&…...
MySQL数据库基础(二)———数据表管理
前言 上篇文章介绍了MySQL数据库以即数据库的管理 这篇文章将给大家讲解数据表的管理 一、数据表常见操作 数据表常见操作的指令 进入数据库use数据库； 查看当前所有表：show tables; 创建表结构 1.创建表操作 1.1创建表 create table 表名(列名 …...
如何在Lyra中创建一个新的Game Feature Plugin和Experience游戏体验
目录 -1.前言0.预备知识1.创建一个新的Game Feature Plugin插件2.创建Lyra Pawn Data Asset3. 创建Lyra Experience Definition4. 创建自定义关卡5. 设置资产管理器Asset Manager引用6. 创建Lyra User Facing Experience Definition7. 在编辑器中运行测试后记-1.前言 由于转职…...
RDMA简介5之RoCE v2队列
在RoCE v2协议中，RoCE v2队列是数据传输的最底层控制机制，其由工作队列（WQ）和完成队列（CQ）共同组成。其中工作队列采用双向通道设计，包含用于存储即将发送数据的发送队列（SQ…...
SAFe/LeSS/DAD等框架的核心适用场景如何选择？
在敏捷开发的规模化实践中，SAFe（Scaled Agile Framework）、LeSS（Large Scale Scrum）和DAD（Disciplined Agile Delivery）是三大主流框架。它们分别以不同的哲学和方法论应对复杂性、协作与交付的…...
鸿蒙应用开发之uni-app x实践
鸿蒙应用开发之uni-app x实践 前言 最近在开发鸿蒙应用时，发现uni-app x从4.61版本开始支持纯血鸿蒙（Harmony next），可以直接编译成ArkTS原生应用。这里记录一下开发过程中的一些经验和踩过的坑。 一、环境搭建 1.1 开发工具 …...
window查看SVN账号密码
背景 公司的SVN地址发生迁移，想迁移一下本地SVN地址，后来发现SVN账号密码忘记了。写此文章纯记录。 迁移SVN地址： 找到svn目录点击relocate，输入新的svn地址，如需输入账号密码，输入账号密码即完成svn地址…...
Python训练营---Day44
DAY 44 预训练模型 知识点回顾： 预训练的概念常见的分类预训练模型图像预训练模型的发展史预训练的策略预训练代码实战：resnet18 作业： 尝试在cifar10对比如下其他的预训练模型，观察差异，尽可能和他人选择的不同尝试通…...
前端项目初始化
目录 1. 安装 nvm 2. 配置 nvm 并切换到 Node.js 16.15.0 3. 安装 LightProxy 代理 4. GIT安装 1. 配置用户名和邮箱（这些信息将用于您在提交代码时的标识）： 2. 生成SSH密钥（用于将本地代码仓库与远程存储库连…...
USB扩展器与USB服务器的2个主要区别
在现代办公和IT环境中，连接和管理USB设备是常见需求。USB扩展器（常称USB集线器）与USB服务器（如朝天椒USB服务器）是两类功能定位截然不同的解决方案。前者主要解决物理接口数量不足的“近身”连接扩展问题，而…...
第46节：多模态分类（图像+文本）
一、多模态分类概述 多模态分类是指利用来自不同模态（如图像、文本、音频等）的数据进行联合分析和分类的任务。 在当今大数据时代，信息往往以多种形式存在，例如社交媒体上的图片配文字、视频附带字幕、医疗检查中的影像与报告等。单一模态的数据往往只能提供有限的信息，…...
spring获取注册的bean并注册到自定义工厂中管理
背景 在开发的时候，对于同一个对象的按照某个字段的不同有很多的处理方式。想着开发一个类似于工厂模式，由上层工厂统一分配。 由于是基于springboot开发，所以有很多自动注入的对象，如果由工厂统一创建new对象的方式，那…...