在VUE中也可以使用find,findIndex,map等方法对数组对象进行查询,赋值等操作,记录一下

定义数组对象

var arrobj = [{"id":1,"keyword":"羽绒服","times":1000},{"id":2,"keyword":"棉衣","times":605},{"id":3,"keyword":"女装","times":589},{"id":4,"keyword":"童装","times":543},{"id":5,"keyword":"保暖内衣","times":489},{"id":6,"keyword":"外套","times":431}]

1. slice方法,获取数组中的指定位置的数据,该方法有两个参数,分别为开始索引和结束索引,结束索引如果大于总数会返回最开始索引值到最后的一条记录,如果开始索引值大于数组最大行数则会返回一个空数组,其中第二个参数可以为空,为空则返回索引值开始到最后一条的数据

代码1:返回索引0开始到索引值为2的结果(第二个参数要减1)

var newAarray = arrobj.slice(0, 3)

返回结果

[{id: 1, keyword: "羽绒服", times: 1001} {id: 2, keyword: "棉衣", times: 606} {id: 3, keyword: "女装", times: 590}]

代码2:返回从索引1到索引3-1的记录

var newAarray = arrobj.slice(1, 3)

返回结果

[{id: 2, keyword: "棉衣", times: 606} {id: 3, keyword: "女装", times: 590}]

代码3:返回从索引1开始到最后一条的记录

var newArray = arrobj.slice(1)

返回结果:

[{"id":1,"keyword":"羽绒服","times":1000},{"id":2,"keyword":"棉衣","times":605},{"id":3,"keyword":"女装","times":589},{"id":4,"keyword":"童装","times":543},{"id":5,"keyword":"保暖内衣","times":489},{"id":6,"keyword":"外套","times":431}]

代码4:索引值为负数,如下代码返回倒数第3行到倒数第二行的数据

arrobj.slice(-3,-2)

返回结果如下:

[{"id":4,"keyword":"童装","times":543}]

代码5:索引值为负数,不指定第二个索引值,返回倒数第3行开始到最后一行的数据

arrobj.slice(-3)

返回结果:

[{"id":4,"keyword":"童装","times":543},{"id":5,"keyword":"保暖内衣","times":489},{"id":6,"keyword":"外套","times":431}]

2. map方法,批量处理数据,如下代码,会将数组中所以对象的times值加1并且返回给新的对象,注意:map函数内部必须要有return 将数据返回 否则默认返回 undefined

let newArray = arrobj.map(item=>{
return item.times += 1;
});

执行后newArray的值为

[{id: 1, keyword: "羽绒服", times: 1001} {id: 2, keyword: "棉衣", times: 606} {id: 3, keyword: "女装", times: 590} {id: 4, keyword: "童装", times: 544} {id: 5, keyword: "保暖内衣", times: 490} {id: 6, keyword: "外套", times: 432}]

3. filter方法,根据条件过滤和查找,返回一个数组,如下代码,代码1会返回所有keyword中包含装的记录,代码2会返回所有id>10的记录,如果没有匹配到记录会返回空数组

代码1:

let newArray = arrobj.filter(item => item.keyword.indexOf("装") > -1)

执行后newArray的值为

[{"id":3,"keyword":"女装","times":589},{"id":4,"keyword":"童装","times":543}]

代码2:

let newArray = arrobj.filter(item=>item.id>10)

执行后newArray的值为

[]

3. forEach方法,用于遍历数组,可用于修改数组中对象的值,类似于map方法,但是forEach是没有返回值的,只能用于修改对象本身的值或者用于遍历,在forEach循环中是无法使用break和continue的,普通的for循环和while循环可以使用,要使用continue可以使用return,return方法会结束本次循环开始下一次循环,如下代码,用于遍历修改times的值

arrobj.forEach(item => {
item.times += 1;
})

执行后,arrobj的数据变成如下

{id: 1, keyword: "羽绒服", times: 1001} {id: 2, keyword: "棉衣", times: 606} {id: 3, keyword: "女装", times: 590} {id: 4, keyword: "童装", times: 544} {id: 5, keyword: "保暖内衣", times: 490} {id: 6, keyword: "外套", times: 432}

4. fInd方法,用于查找满足条件的第一条数据,如果没有满足条件会返回undefind,如下代码,查找id=3的数据注意:find方法只会返回满足条件的第一条数据,如果要查找多条可以使用filter,

var obj = arrobj.find(item => item.id === 3)

执行结果:

{id: 3, keyword: "女装", times: 589}

5. findIndex 方法,用于查找满足条件的第一条数据的索引值,如果没有满足条件的数据会返回-1,如下代码,查找id=3的数据索引值,执行后会返回结果为:2

var obj = arrobj.find(item => item.id === 3)

执行如果: true

6. some 方法,用于判断数组中是否有数据满足条件(只要有一条数据满足则返回true),返回true或者false,类似Linq中的Any,以下代码,用于判断是否有搜索次数(times)>800次的记录

arrobj.some(item => item.times >= 800)

执行结果:true

7. every方法,与some方法相反,判断数组中是否所有数据都满足条件(数组中的数据都满足则舞蹈true),与LInq中的All方法类似,以下代码,用于判断数组中的数据搜索次数(times)>200

arrobj.every(item => item.times >= 200)

执行结果:true

8. indexOf方法,该方法用于查找指定的字符串在数组中的索引值,没有找到会返回-1.注意indexOf方法不使用对象的查询,比如arrobj.indexOf(item=>item.id===1),这个查询是会返回-1,实际上对像数组中是有这个的对像,如果是对象数组请使用find方法,indexOf只适用于字符串数组,数字数组等,该方法有两个参数,第一个参数是要查找的字符串或者数组,必填,第二个参数是查找的开始位置,选填,默认从0开始

定义字符串数组

var arrstr=["xx","bb","cc"]

定义数字数组

var arrnum=[1,3,5,7,9]

代码1:查找字符”bb"的位置

arrstr.indexOf("bb")

返回值为:1

代码2:查找字符串"b"的位置,注意字符串在数组中的位置是全匹配

arrstr.indexOf("b")

返回值为:-1

代码3:从位置2开始查找字符串"bb"的位置,因为“bb”的位置为1,所以从2开始查找是找不到的

arrstr.indexOf("bb",2)

返回为值为:-1

代码4:查找数字5 位置

arrnum.indexOf(5)

返回值为:3

9.includes方法,用于判断数组中是否包含了指定的字符串或者数字,该方法返回true,或者false,同indexOf方法一样不同用于对象数组,参数与indexOf一致

代码1:查找字符串"bb"在数组中是否包含

arrstr.includes("bb")

返回值为:true

VUE对象数组,和普通数组的常用方法的更多相关文章

  1. vue :class 可以接收 字符串 数组 和 对象 对象里面的key值 根据true或false 显示不显示

    vue :class 可以接收 字符串 数组 和 对象 对象里面的key值 根据true或false 显示不显示 https://cn.vuejs.org/v2/guide/class-and-sty ...

  2. AS3 - 数组Array的几个常用方法(附样例)

    AS3 - 数组Array的几个常用方法(附样例) 2015-03-30 10:39发布:hangge浏览:241   Flex/Flash开发中,经常会使用到数组,下面总结了一些数组的常用方法. 1 ...

  3. Vue源码解析之数组变异

    力有不逮的对象 众所周知,在 Vue 中,直接修改对象属性的值无法触发响应式.当你直接修改了对象属性的值,你会发现,只有数据改了,但是页面内容并没有改变. 这是什么原因? 原因在于: Vue 的响应式 ...

  4. 关于javascript数组的定义与其一些常用方法总结

    由于JavaScript是一门宽松的语言,这种宽松可能会带来更加麻烦的事情.比如JavaScript的数组,定义与使用的方式太灵活有时候让人迷惑.下面将JavaScript中关于数组常用的方法.定义之 ...

  5. 关于JSON对象,以及联合数组,eval函数的使用参考

    关于JSON对象,以及联合数组,eval函数的使用参考 var json="{persons:[{name:'Zhangsan',sex:'male'},{name:'Lisi',sex:' ...

  6. Yii框架AR对象数据转化为数组

    demo函数作用:将AR对象数据转化为数组 局限:仅用于findAll的多维数组,find一维数组可以先转化为多维数组的一个元素在使用 function actionIndex() { $data = ...

  7. java 数组变量与数组对象

    数组是否必须初始化 对于这个问题,关键在于要弄清楚数组变量和数组对象的差别.数组变量是存放在栈内存中的,数组对象是存放在堆内存中的.数组变量只是一个引用变量,他能够指向实际的数组对象. 所谓的数组初始 ...

  8. javascript中对象字面量与数组字面量

    第一部分 我们知道JavaScript中的数据类型有基本数据类型和引用类型,其中Object类型就是非常常用的类型.那么如果创建一个Object类型的实例呢?下面我介绍两种方法: 第一:构造函数法. ...

  9. 双层嵌套json字符串(即json对象内嵌json数组)解析为Map

    之前我层写过一篇文章,介绍了json与map的相互转化,但当时只涉及到单一的json对象或json数组,对json对象内嵌套这json数组的json字符串无法处理,这篇文章主要解决这个问题. 之前的那 ...

  10. jQuery根据元素值或元素下标来删除一个数组元素及数组对象方法列表

    在前提不知道b在这个数组的下标,删除b这个元素  var arrList = ['a','b','c','d'];         arrList.splice(jQuery.inArray('b', ...

随机推荐

  1. wqs 二分

    初看这个东西可能很难理解,我个人也学习了很多遍,然后发现这个直接理解实际上并不难. wqs 二分主要是解决 恰好分成/选 \(k\) 段 这一类 DP 问题的算法.如果不知道形式可以看一下 P4983 ...

  2. React-Native开发鸿蒙NEXT-蓝牙与图片处理的更正补充

    .markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rg ...

  3. Linux ls 查看目录结构与文档信息

    摘要:Linux ls命令用于列出目标目录中所有的子目录和文件,发掘并掌握ls命令及其参数设置可以驾轻就熟地管理文件,随心所欲地浏览并确定所在的位置! ls命令介绍   今天,楼兰胡杨继续跟各位猿友一 ...

  4. 2024杭电钉耙1-1003 HDOJ7435 树

    本文同步发布于我的网站 Problem 给一棵根为 1 的有根树,点 \(i\) 具有一个权值 \(A_i\) . 定义一个点对的值 \(f(u, v)=\max \left(A_u, A_v\rig ...

  5. 「Log」做题记录 2023.10.30-2023.11.26

    \(2023.10.30-2023.11.5\) \(\color{blueviolet}{AT\_abc285\_g}\) 神秘题. 网络流是显著的,建边方式如下: 所有边容量都为 \(1\). 每 ...

  6. cuda grid block size

    编译命令:nvcc hello.cu -o hello 运行:./hello #include <stdio.h> __global__ void helloWorldKernel() { ...

  7. uniapp中使用mqtt.js的踩坑记录

    最近在uniapp的vue3.0版本中使用mqtt.js库时遇到了一些坑,经过亲身踩坑,现在把实际能够实现在uniapp的app端能够使用mqtt.js的方法步骤记录如下: 一.安装 首先安装mqtt ...

  8. Coze/Dify/FastGPT/N8N :该如何选择Agent平台?

    你好,小钗在医疗AI.教育AI.管理AI有丰富的经验 关注公众号,回复1,与我交个朋友吧 书接上文: AI创业如何选择Agent平台,Coze.Dify.腾讯元器?可能都不是 Coze案例,个人知识库 ...

  9. 如何在FastAPI中构建一个既安全又灵活的多层级权限系统?

    title: 如何在FastAPI中构建一个既安全又灵活的多层级权限系统? date: 2025/06/14 12:43:05 updated: 2025/06/14 12:43:05 author: ...

  10. 数栈技术分享:开源·数栈-扩展FlinkSQL实现流与维表的join

    一.扩展FlinkSQL实现流与维表的join ​ 二.为什么要扩展FlinkSQL? 1.实时计算需要完全SQL化 SQL是数据处理中使用最广泛的语言.它允许用户简明扼要地声明他们的业务逻辑.大数据 ...