Vue map遍历数组(map方法的使用)

 分类:vue教程时间:2022-06-19点击: 2022前端视频教程(自学必看)

Vue项目中在template标签里循环遍历可以使用v-for,那么在script标签里要循环遍历就可以用到forEach方法和map方法,基本用法与 forEach 一致,但是不同的,它会返回一个新的数组,所以callback需要有return值,如果没有会返回undefined。

Vue map遍历数组

一、map方法介绍

1、map方法,给map传入一个回调函数,map就会遍历数组元素,将相关信息一起传入回调函数,并取这个回调函数的返回值作为新数组的对应索引的元素,并将这个新数组返回;

2、基本用法与 forEach 一致,但是不同的,它会返回一个新的数组,所以callback需要有return值,如果没有会返回undefined;

3、回调函数每次可以拿到的当前迭代的(1)数组元素(2)索引值(3)以及数组本身。

二、Vue map遍历数组,实例代码如下:

let arr = [1, 2 , 3, 4]
let arrNew = []
arrNew = arr.map((value, index, array) => {
   return value * 2;
})
console.log(arrNew)
//打印结果为: [2, 4, 6, 8]
除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: