微信小程序数组
常用函数
concat(): 连接两个或多个数组,返回连接后的新数组。
示例:const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = arr1.concat(arr2); // 返回 [1, 2, 3, 4, 5, 6] copyWithin(): 从数组指定位置开始替换指定长度的元素。
示例:const arr = [1, 2, 3, 4, 5]; arr.copyWithin(0, 3, 4); // 将数组 [4] 替换到数组起始位置,返回 [4, 2, 3, 4, 5] entries(): 返回一个数组迭代器,可以遍历数组中的键值对。
示例:const arr = [‘a’, ‘b’, ‘c’]; const iterator = arr.entries(); for (const [index, value] of iterator) { console.log(index, value); } // 输出:0 “a”, 1 “b”, 2 “c” every(): 检测数组中的所有元素是否符合指定条件,返回布尔类型的值。
示例:const arr = [1, 2, 3]; const result = arr.every((value) => value > 0); // result 为 true fill(): 用指定的值填充数组的所有元素。
示例:const arr = [1, 2, 3]; arr.fill(0); // 返回 [0, 0, 0] filter(): 返回一个新数组,包含符合条件的原数组元素。
示例:const arr = [1, 2, 3, 4]; const result = arr.filter((value) => value % 2 === 0); // 返回 [2, 4] find(): 返回数组中符合条件的第一个元素,否则返回 undefined。
示例:const arr = [1, 2, 3, 4]; const result = arr.find((value) => value > 2); // result 为 3 findIndex(): 返回数组中符合条件的第一个元素的索引,否则返回 -1。
示例:const arr = [1, 2, 3, 4]; const result = arr.findIndex((value) => value > 2); // result 为 2 flat(): 返回一个新数组,将多维数组拍平为一维数组。
示例:const arr = [1, [2, [3, 4]]]; const result = arr.flat(); // 返回 [1, 2, 3, 4] forEach(): 对数组中的每个元素执行指定的操作。
示例:const arr = [1, 2, 3]; arr.forEach((value, index) => { console.log(value, index); }); // 输出:1 0, 2 1, 3 2 includes(): 返回一个布尔值,表示数组中是否包含指定元素。
示例:const arr = [1, 2, 3]; const result = arr.includes(2); // result 为 true indexOf(): 返回数组中指定元素的第一个索引,如果不存在,返回 -1。
示例:const arr = [1, 2, 3]; const result = arr.indexOf(2); // result 为 1 join(): 将数组中的所有元素连接成一个字符串。
示例:const arr = [1, 2, 3]; const result = arr.join(); // 返回 “1,2,3” keys(): 返回一个数组迭代器,可以遍历数组的索引。
示例:const arr = [‘a’, ‘b’, ‘c’]; const iterator = arr.keys(); for (const index of iterator) { console.log(index); } // 输出:0, 1, 2 lastIndexOf(): 返回数组中指定元素的最后一个索引,如果不存在,返回 -1。
示例:const arr = [1, 2, 2, 3]; const result = arr.lastIndexOf(2); // result 为 2 map(): 返回一个新数组,每个元素都是对原数组中的元素执行指定操作后的结果。
示例:const arr = [1, 2, 3]; const result = arr.map((value) => value *
微信小程序中的数组有许多常用的方法和用法
模糊查询
var backendData = [];
// 定义一个方法来执行模糊查询
function fuzzySearch(keyword) {
// 使用 filter 方法筛选包含关键字的元素
const result = backendData.filter(item => {
// 检查 name 属性是否存在,并且是一个字符串
if (item.userName && typeof item.userName === 'string') {
// 将字符串都转为小写进行比较,实现不区分大小写的模糊查询
return item.userName.toLowerCase().includes(keyword.toLowerCase());
}
return false;
});
return result;
}
var list = [];
const searchResult = fuzzySearch(list);
精确查询
function exactSearch(keyword) {
const result = backendData.filter(item => {
if (item.userName && typeof item.userName === 'string') {
// 将字符串都转为小写进行比较,实现不区分大小写的精确查询
return item.userName.toLowerCase() === keyword.toLowerCase();
}
return false;
});
return result;
}
var list = [];
const searchResult = exactSearch(list);
---------------------------只比较整数类型的属性-----------------------------------
数组中找到对应的对象
//数组中找到对应的对象
let list = this.data.Teacher.find(item => item.userId === e.currentTarget.dataset.id); //list是对象
数组中找到满足指定条件的所有元素
let list = this.data.Teacher.filter(item => item.userId === e.currentTarget.dataset.id); //list是集合
数组中的每个元素克隆到一个新对象中,并给新对象添加一个新的字段
const modifiedList = this.data.list.map(item => {
// 给每一项添加一个新的字段
return {
...item,
static: 0
};
});
--------------------------------------------------------------------
let newList = this.data.prodectList.map(item => ({
...item,
static: 1
}));
--------------------------------------------------------------------
第二段代码使用了对象的展开运算符 ...,而第一段代码使用了传统的对象属性赋值方式。 两种方式都可以实现相同的效果,最终都会生成一个新的数组,其中包含原数组元素的深拷贝,并且在新对象中添加了新的字段。
如果你想将一个新的集合与旧的集合拼接在一起,并且当新集合中的数据的id与旧集合中的数据相同时进行过滤去除
// 假设旧集合为oldCollection,新集合为newCollection // 使用 Set 数据结构来保存旧集合中的id
const oldIds = new Set();
oldCollection.forEach(item => {
oldIds.add(item.id);
}); // 过滤新集合中与旧集合中相同id的数据
const filteredCollection = newCollection.filter(newItem => {
return !oldIds.has(newItem.id);
}); // 将过滤后的新集合与旧集合拼接在一起
const mergedCollection = oldCollection.concat(filteredCollection);
集合数据按时间(字段)重新排序
let sortedList = that.data.oldClassList.sort((a, b) => new Date(b.datetime) - new Date(a.datetime))
更新中 ----
微信小程序数组的更多相关文章
- 微信小程序数组对象
xml:<block wx:for="{{post_key}}" wx:for-item="{{item}}"></block> dat ...
- 微信小程序 数组索引 data-“”解释
按照官方最新文档循环的方式,索引值是以 wx:for-index="index" 方式写的, 以 parseInt(event.currentTarget.dataset.i ...
- 微信小程序-数组操作
Page({ data: { list:[{ id:, name:'芒果', count: },{ id:, name:'香蕉', count: }, }] } }) 向前插入数据 //要增加的数组 ...
- 微信小程序中如何使用setData修改数组或对象中的某一参数
本人也是刚开始接触微信小程序,在微信小程序中经常会遇到修改数组中某一项的值,比如array[0]或者是对象中object.item的值.这些值在微信小程序中都需要使用一个名为setData的方法,而这 ...
- 微信小程序setData复杂数组的更新、删除、添加、拼接
众所周知,微信小程序里所有对数据的修改只有在setData里修改才会在页面上渲染.在此分享小程序里复杂数组的更新.删除.添加.拼接 初始数据 数组嵌套对象 data: { cartList = [{ ...
- 微信小程序之数组操作:push与concat的区别
微信小程序中需要用到数组的操作,push和concat二者功能很相像,但有两点区别. 先看如下例子: var arr = []; arr.push(); arr.push(); arr.push([, ...
- 【微信小程序】数组操作
Page({ data: { list:[{ id:1, name:'应季鲜果', count:1 },{ id:2, name:'精致糕点', count:6 },{ id:3, name:'全球美 ...
- 微信小程序前端源码逻辑和工作流
看完微信小程序的前端代码真的让我热血沸腾啊,代码逻辑和设计一目了然,没有多余的东西,真的是大道至简. 废话不多说,直接分析前端代码.个人观点,难免有疏漏,仅供参考. 文件基本结构: 先看入口app.j ...
- 微信小程序开发日记——高仿知乎日报(中)
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教 ...
- 微信小程序开发初探
一.关于微信小程序 1.1 小程序诞生的背景 张小龙说道: (1)一切以用户价值为依归→用户是微信的核心,所以微信中没有很多与客户无关的功能,比如QQ中的乱七八糟一系列东西. (2)让创造发挥价值→所 ...
随机推荐
- WebKit Insie: Active 样式表
WebKit Inside: CSS 样式表的匹配时机介绍了当 HTML 页面有不同 CSS 样式表引入时,CSS 样式表开始匹配的时机.后续文章继续介绍 CSS 样式表的匹配过程,但是在匹配之前,首 ...
- CF580B
题目简化和分析: 选择 \(n\) 个朋友,满足以下条件: 工资差异 \(<d\) 友谊和最大(题目翻译不太清楚) 现在面临两个问题 求差异值 求友谊和 所以我们理应想到线段树双指针. 排序后满 ...
- vue之留言板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS之3D翻转效果
<!DOCTYPE html> <html> <head> <title></title> <style type="tex ...
- 配置虚拟主机-部署nginx代理并验证缓存生效
1.虚拟主机的配置: 虚拟主机的作用: 虚拟主机提供了同一台服务器上运行多个网站的功能. 虚拟主机的三种模式: 1)基于域名配置虚拟主机是最常见的一种虚拟主机配置. 只需配置你的DNS服务器,将每 ...
- exgcd|扩展欧几里得算法|扩展欧几里得算法证明|exgcd求逆元 一文说明白
exgcd 扩展欧几里得算法(Extended Euclidean algorithm, EXGCD),常用于求 \(ax+by=\gcd(a,b)\) 的一组可行解. 部分选自OI Wiki 扩展欧 ...
- SQL改写案例1
一开发哥们找我改写SQL,他写的逻辑始终不对,安排! -- 他写的SQL: -- order_id 是主键 with a as ( select str_to_date(regist_time,'%Y ...
- 模拟ASP.NET Core MVC设计与实现
前几天有人在我的<ASP.NET Core框架揭秘>读者群跟我留言说:"我最近在看ASP.NET Core MVC的源代码,发现整个系统太复杂,涉及的东西太多,完全找不到方向,你 ...
- GitHub 官方开源的字体集「GitHub 热点速览」
前几天 GitHub 官方一口气开源了 5 款字体,各有特色,彼此兼容,重要的是代码友好.这不,一开源就获得了 4.5k+ 的 star. 本周除了这个热点之外,当属 OpenAI 又有新动态了,你可 ...
- 【随手记录】Llama Tutorial 大语言模型实践
这个tutorial的契机是yy突然看到了一个workshop 所以类似于一周大作业的形式,输入command输出使用了自动驾驶哪些模块,代码在这里 所以就干一干,顺便写一个tutorial给大家参考 ...