vue数据.map过滤返回数组
时间: 2024-05-09 09:20:05 浏览: 94
Vue数组更新及过滤排序功能
假设有如下数据:
```javascript
const data = [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 25 },
{ id: 3, name: '王五', age: 30 }
]
```
可以使用 `map` 方法过滤并返回一个新数组:
```javascript
const filteredData = data.map(item => {
if (item.age > 20) {
return {
id: item.id,
name: item.name
}
}
})
```
上述代码中,使用 `map` 方法遍历原数组 `data`,并根据条件过滤出符合条件的项,返回一个新的数组 `filteredData`。在过滤的过程中,使用 `if` 语句判断当前项的年龄是否大于 20,如果是,则返回一个新的对象,包含 `id` 和 `name` 字段,否则返回 `undefined`,不会被加入新数组中。最终得到的 `filteredData` 数组如下所示:
```javascript
[
undefined,
{ id: 2, name: '李四' },
{ id: 3, name: '王五' }
]
```
由于原数组的第一项年龄小于 20,所以对应的项在新数组中是 `undefined`。
阅读全文