在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