vue之数组遍历

最新推荐文章于 2024-06-05 14:26:44 发布
最新推荐文章于 2024-06-05 14:26:44 发布
阅读量3.9k 收藏
点赞数
分类专栏： vue 文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43582611/article/details/103566406
版权

运行结果

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>高阶函数之数组练习</title>
  <script src="../js/vuejs-2.5.16.js"></script>
</head>
<body>

</body>
<script>
  /*
  * filter() 函数的作用主要是对数组进行条件过滤，条件为Boolean值  不是true就是false
  * map()  函数的主要作用是对过滤之后的新数组进行重新映射
  * reduce() 函数的主要作用是对数组的结果进行汇总，改函数至少要有两个参数
  * */
  const arr = [11,52,115,188,68,321,223,64]
  //  写法一
  let totalFirst = arr.filter(function (n) {
    return n<300
  }).map(function (n) {
    return n*2
  }).reduce(function (pre,n) {
    return pre + n
  },0)
  console.log(totalFirst);
  // 写法二  （遍历数组中小于100的）
  let totalSecond = arr.filter( n => n <100).map( n => n*2).reduce((pre,n) => pre+n ,0)
  console.log(totalSecond);
</script>
</html>
Distance-X
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue数组遍历(总结)
weixin_50196748的博客
03-23 1万+
1. forEach 2. filter 3. findIndex() 4.some() ①.语法: arr.some(fn[, thisArg]) 参数fn是用来测试每个元素的函数,接受三个参数: item: 数组中正在处理的元素 index: 数组中正在处理的元素的索引值 array: 被调用的数组 thisArg: 执行callback时使用的this值 ②.描述 some() 方法会依次执行数组的每个元素： 如果有一个元素满足条...
关于Vue前端js循环遍历数组的几种方法：
weixin_49826079的博客
08-09 1880
关于Vue前端js循环遍历数组的几种方法：
vue中数组常用的六种循环方法、VUE中list的各种方法和运用
最新发布
zlfjavahome的专栏
06-05 962
简单记录一下，常用的六种数组循环的方法，分别是for()，map()，forEach()，filter ()，every()，some();
Vue前端js循环遍历数组八种方法总结最新
即使再小的舟,也能远航
01-08 2706
【代码】Vue前端js循环遍历数组八种方法总结最新。
前端Vue日常工作中--Js数组常用方法
前端工作学习中
11-24 1246
前端日常工作数组方法
vue遍历数组
01-14 410
// 获取数组 let update = thisVM.formData.update; //判断数组是否为空，判断顺序不能反 if (update !== undefined && update.length >= 0) { //遍历数组 update.forEach(item => { if (满足条件) { ...
vue遍历对象中的数组取值示例
10-16
在Vue.js中，遍历对象中的数组并获取其值是一个常见的需求，特别是在处理从后端获取的数据时。本文将通过一个具体的示例来讲解如何在Vue中实现这一操作。 首先，我们看一段代码，这是在Vue组件中遍历对象数组并显示...
详解vue数组遍历方法forEach和map的原理解析和实际应用
10-17
主要介绍了详解vue数组遍历方法forEach和map的原理解析和实际应用,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解Vue中数组和对象更改后视图不刷新的问题
12-03
Vue.js 是一款流行的前端框架，它的核心特性之一是数据响应性。当 Vue 实例化时，它会遍历 `data` 选项中的普通 JavaScript 对象，并利用 `Object.defineProperty` 将对象的所有属性转换为 getter 和 setter。这样做...
使用vue中的v-for遍历二维数组的方法
08-27
本篇文章将详细介绍如何在Vue中利用`v-for`遍历二维数组。 首先，我们要了解二维数组的基本概念。二维数组可以看作是由多个一维数组组成的数组，每个一维数组之间是并列关系。在JavaScript中，我们可以这样定义一个...
Vue中的数组遍历
STATICHIT静砸的博客
12-22 7615
2、使用filter循环，代码为【return this.urls.filter(item =>】1、使用foreach循环，代码为【this.urls.forEach(item =>】forEach() 方法主要是用于调用数组的每个元素，并将元素传递给回调函数。forEach(): 遍历数组需要一个回调函数作为参数。注:对于空数组不会执行回调函数。
vue中对象数组去重的实现
12-28
其实很简单，一般的数组去重可以直接用 new Set() 方法即可，但是数组对象的话，比较复杂，不能直接用，我们可以采取间接的方法来去重 unique(arr) { const res = new Map(); return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1)) } 下面有一个示例，根据对象的id作为去重的依据： 点击 quChong() { let
Vue数组赋值问题
weixin_60481396的博客
05-09 917
最近写项目时遇到的问题，用axios发送请求，从后端拿回来了数据（是个数组）。 经过一系列的处理之后，如下图 把处理好的数据从新赋值，然后数组从新渲染了表格，修改了List，然而列表没有改变。 Vue 不是双向绑定吗？当时我就傻了，调试了半天 列表毫无反应，我明明改变了数组的值，还有他的长度 最后请教了实验室的师兄，师兄也是很高冷啊，反手就扔给了我一篇文章，我看完之后醍醐灌顶。内心真佩服师兄哇，按照他的方法也是顺利解决了。 大概的问题就是：由于 JavaScript 的限制，Vue 不能检测..
vue中的数组赋值问题
s_156的博客
11-23 4094
vue中，支持对象赋值，数组，数组对象赋值需要格外注意！
vue 遍历数组
weixin_50196748的博客
03-22 2万+
1.forEach(): 遍历数组 需要一个回调函数作为参数 回调函数的形参: ①. value: 遍历数组的内容 ②.index: 对应数组的索引 ③.array: 数组本身 forEach() 方法主要是用于调用数组的每个元素，并将元素传递给回调函数。 注:对于空数组不会执行回调函数 语法: array.forEach(function(currentValue, index, array), thisValue) 例子: ①. 没有返回值 var a = [1,2,3,4,5] v
数组去重主要的5种方法，
qq_42957741的博客
01-06 5万+
数组去重的方法 一、利用ES6 Set去重（ES6中最常用） var arr = [1,1,8,8,12,12,15,15,16,16]; function unique (arr) { return Array.from(new Set(arr)) } console.log(unique(arr)) //[1,8,12,15,16] 不考虑兼容性，这种去重的方法代码最少。这种方法还无...
Vue-循环遍历选项赋值到对应控件
Phoneix的博客
06-19 3308
老规矩：先走流程，上动图看效果！在此推荐个大佬，为我提供解决思路，大家多多访问他的博客，希望带给大家帮助 https://blog.csdn.net/yyp0304Devin 下面就一步步为大家讲解如何实现将它的试题选项赋值到对应的控件中的，因为题型较多，拿单选题型为大家演示：不同题型它的界面也是不同的，这里也有个技术点，这里就先不讲解了。 如动图所示，要完成这样的功能，肯定是要访问后端接口的 知道URL后，我们就知道携带的试题ID过去 一、传递ID 在点击编辑按钮事件中将ID传值过去
js中数组常用遍历，VUE 中数组常用遍历
热门推荐
肖帅的博客
10-30 6万+
VUE 中 常用for循环
Vue指令 v-for遍历、下拉列表、单选框、复选框
hangnan315的博客
06-22 8197
4 、v-for遍历 4.1 遍历数组中的对象 格式：v-for="item in list" 里面也可以返回下标 格式：v-for="（item.index） in list" item:可以自定义变量这个值，但是里面的 {{item.id}}中的item需要跟自定义的这个值一致 <li v-for='item in list'> {{item.id}}---{{item.name}}---{{item.age}} </li> let vue = n
vue array数组遍历
09-05
Vue中可以使用`v-for`指令进行数组遍历。 在模板中，我们可以使用`v-for`指令来遍历一个数组，并生成相应的DOM元素，语法如下： ```html {{ item }} ``` 其中，`array`是需要遍历的数组，`item`是当前迭代的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值