vue 组件typescript定义一个对象 vue定义一个对象数组

转载

网络安全侠 2023-10-12 06:52:39

在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开始

定义字符串数组