Vue中map()方法的使用

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: '王五'}]

如有新的内容，以后将进行补充。