Vue中map()方法的使用
原创:丶无殇 2023-06-25
map函数常被用于修改数据格式
给map传入一个回调函数
,map就会遍历数组元素,将相关信息一起传入回调函数,并取这个回调函数的返回值作为新数组的对应索引的元素,并将这个新数组返回
回调函数每次可以获取三个参数:数值
,索引
,本身
:(value
,index
,array
)
接收数据:
["2022-12-25","2022-12-28","2022-12-31"]
想转换成:
{date:"2022-12-25",id:0}
{date:"2022-12-28",id:1}
{date:"2022-12-31",id:2}
代码如下:
var getdata=["2022-12-25","2022-12-28","2022-12-31"];
var output=getdata.map((item,index)=>{
let json={}
json.date=item
json.id=index
return json
})
console.log(output);
接收数据:
[
[36, '12', 5],
[50, '1G', 10],
[64, '1W', 20],
]
只想要其中一列的数据:
['12','1G','1W']
代码如下:
var mapping = [
[36, '12', 5],
[50, '1G', 10],
[64, '1W', 20],
]
var tempmapping = mapping.map((item) => (item[1]))
console.log(tempmapping);
接收数据:
{ id: 1, name: "张三", sex: "男", age: 20 },
{ id: 2, name: "李四", sex: "女", age: 30 },
{ id: 3, name: "王五", sex: "男", age: 40 },
想添加一列list
成:
{id: 1, name: '张三', sex: '男', age: 20, list: 0}
{id: 2, name: '李四', sex: '女', age: 30, list: 1}
{id: 3, name: '王五', sex: '男', age: 40, list: 2}
代码如下:
var getdata = [
{ id: 1, name: "张三", sex: "男", age: 20 },
{ id: 2, name: "李四", sex: "女", age: 30 },
{ id: 3, name: "王五", sex: "男", age: 40 },
];
var output=getdata.map((item) => {
item.list=item.id-1
return item
})
console.log(output);
只想要name
字段组成新组的代码:
var getdata = [
{ id: 1, name: "张三", sex: "男", age: 20 },
{ id: 2, name: "李四", sex: "女", age: 30 },
{ id: 3, name: "王五", sex: "男", age: 40 },
];
var output=getdata.map((item) => item.name)
console.log(output);
// 输出:['张三', '李四', '王五']
比如将name
重命名为newname
:
var getdata = [
{ id: 1, name: "张三", sex: "男", age: 20 },
{ id: 2, name: "李四", sex: "女", age: 30 },
{ id: 3, name: "王五", sex: "男", age: 40 },
];
var output=getdata.map((item) => ({newname:item.name}))
console.log(output);
// 输出:[{newname: '张三'},{newname: '李四'},{newname: '王五'}]
多个字段也是一样:
var getdata = [
{ id: 1, name: "张三", sex: "男", age: 20 },
{ id: 2, name: "李四", sex: "女", age: 30 },
{ id: 3, name: "王五", sex: "男", age: 40 },
];
var output=getdata.map((item) => ({newname:item.name,newid:item.id}))
console.log(output);
// 输出:[{newname: '张三'},{newname: '李四'},{newname: '王五'}]
如有新的内容,以后将进行补充。