vue 遍历数组

vue 遍历数组1 forEach 遍历数组需要一个回调函数作为参数回调函数的形参 value 遍历数组的内容 index 对应数组的索引 array 数组本身 forEach 方法主要是用于调用数组的每个元素 并将元素传递给回调函数 注 对于空数组不会执行回调函数语法 array forEach function currentValue index array thisValue 例子 没有返回值 vara 1 2 3 4 5 v

1.forEach(): 遍历数组

需要一个回调函数作为参数

回调函数的形参: ①. value: 遍历数组的内容 ②.index: 对应数组的索引 ③.array: 数组本身

forEach() 方法主要是用于调用数组的每个元素,并将元素传递给回调函数。

注:对于空数组不会执行回调函数

语法:

array.forEach(function(currentValue, index, array), thisValue)

例子: ①. 没有返回值

var a = [1,2,3,4,5] var b = a.forEach((item) => { item = item * 2 }) console.log(b) // undefined 

②.原数组不会改变

2. map(): 有返回值,返回一个新的数组

①. 返回一个经过处理的新数组,但不改变原数组的值

var a = [1,2,3,4,5] var b = a.map((item) => { return item = item * 2 }) console.log("a--:", a) console.log("--b-:", b)

vue 遍历数组

 ②. 重新构建数据 (一般适用于接口给你返回的数组格式和想呈现的数据格式不一样)

let arr = res.data;

   let newArr = arr.map(val => {

      let json = {};

         json.date = val.split(‘-‘).join(‘-‘);

         json.title = ”;

        return json;

this.demoEvents = newArr; 

//重新构建出来的数据格式为{value: “”,title: “”}

③. 在vue中的应用

例如: 充值金额需要在整数的基础上随机减去100或者加上100

export default { data() { moneyList: [1000,2000,5000,10000,20000,50000] }, computed: { moneyList_new() { return this.moneyList.map((item) => { const random = Math.random() > 0.5 ? 1 : -1; return Math.floor(Math.random()*100) * random + item; }) } } }

//  实际渲染处理过的数组

   

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/177221.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月26日 下午8:01
下一篇 2026年3月26日 下午8:01


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号