vue 数组处理= 循环--查找过滤--添加删除--去重[.every()/.some()/.find()/.filter()/.forEach()/.map()]

简介: vue 数组处理= 循环--查找过滤--添加删除--去重[.every()/.some()/.find()/.filter()/.forEach()/.map()]

循环数组


.forEach()


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

注意: forEach() 对于空数组是不会执行回调函数的。

tips: forEach()中不支持使用break(报错)和return(不能结束循环),有需要时可使用常规的for循环。

.map()


map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

map() 方法按照原始数组元素顺序依次处理元素。

是否改变原数组:否

是否对空数组进行检测:否


以下不会改变原数组的用于查找函数


.filter()


filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

过滤掉不符合条件的;

是否改变原数组:否

是否对空数组进行检测:否

.find()


find() 方法返回通过测试(函数内判断)的数组的第一个元素的值。

find() 方法为数组中的每个元素都调用一次函数执行:

当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的第一个元素,之后的值不会再调用执行函数。

如果没有符合条件的元素返回 undefined

注意: find() 对于空数组,函数是不会执行的。

注意: find() 不改变数组的原始值

.findIndex()


findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。

findIndex() 方法为数组中的每个元素都调用一次函数执行:

当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。

如果没有符合条件的元素返回 -1

对于空数组,函数是不会执行的。

不改变数组的原始值。

.some()


some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。

some() 方法会依次执行数组的每个元素:

如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。

如果没有满足条件的元素,则返回false。

注意: some() 不会对空数组进行检测。

注意: some() 不会改变原始数组。

.every()


every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。

every() 方法使用指定函数检测数组中的所有元素:

如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。

如果所有元素都满足条件,则返回 true。

注意: every() 不会对空数组进行检测。

注意: every() 不会改变原始数组


 


数组塞值删除

vue对象塞值

1

2

3

4

5

6

7

8

9

varparms = { name: 'hh'}

this.$set(parms, j, this.picIdData[j])

//  做多选框  循环每个框加入checkIt 以便后期筛选选中的项

for(varinthis.serviceProList) {

  this.$set(this.serviceProList[i], 'checkIt'false)

}

// 页数序号

this.$set(dataThis.records[i], 'indexNum', (Number(i) + 1) + (this.page.size * (this.page.cur - 1)))

vue对象移除

this.$delete(option[k] ,'children')

VUE.delete(option[k] ,'children')

this.list.splice(i,1)

数组追加合并

this.list1= [1,2]

var list2= [3,4]

this.list1= this.list1.concat(list2) // 追加并合并

this.list1.push(list2)  //追加

数组去重

var dataTime = ['1月', '2月', '1月', '1月' ]


dataTime = Array.from(new Set(dataTime))

结果: dataTime = ['1月', '2月']


dataTime = [...new Set(dataTime)]

结果: dataTime = ['1月', '2月']


dataTime = new Set(dataTime)

结果: dataTime = {'1月', '2月'}


数组排序

typeName.sort((a, b) => { return a.pxxh- b.pxxh}) // 按照从小到大的顺序 pxxh是排序的数字序号

Vue数组处理

目录
相关文章
|
8月前
|
JavaScript 前端开发 算法
vue学习第7章(循环)
欢迎来到瑞雨溪的博客,一名热爱JavaScript和Vue的大一学生。本文介绍了Vue中的v-for指令,包括遍历数组和对象、使用key以及数组的响应式方法等内容,并附有综合练习实例。关注我,将持续更新更多优质文章!🎉🎉🎉
80 1
vue学习第7章(循环)
|
10月前
|
索引
ES5常见的数组方法:forEach ,map ,filter ,some ,every ,reduce (除了forEach,其他都有回调,都有return)
ES5常见的数组方法:forEach ,map ,filter ,some ,every ,reduce (除了forEach,其他都有回调,都有return)
|
9月前
|
JavaScript 索引
Vue 3 数组变更详解:哪些操作会修改原数组?| 笔记
在处理数组时,了解哪些操作会修改原数组,哪些操作不会修改原数组,对高效编写 Vue 应用程序至关重要。本文将详细介绍 Vue 3 中的常见数组操作,并按照是否会修改原数组进行分类说明。
452 2
WK
|
10月前
|
Python
map和filter的区别是什么
`map()`和`filter()`均为Python中的高阶函数,前者针对可迭代对象中的每个元素执行指定操作,如数值翻倍或字符串转大写;后者则筛选出符合条件的元素,例如仅保留偶数或非空字符串。两者均返回迭代器,并可通过`list()`等函数转换为所需的数据结构。具体使用时,应依据实际需求和场景选择合适的函数。
WK
108 1
|
9月前
|
JavaScript 索引
Vue中对象或数组数据更新但视图不刷新问题的解决策略
Vue中对象或数组数据更新但视图不刷新问题的解决策略
605 0
|
9月前
|
JSON 数据可视化 JavaScript
低代码可视化教你Vue遍历循环绑定
低代码可视化教你Vue遍历循环绑定
80 0
|
10月前
|
JavaScript 前端开发
JavaScript 中 五种迭代数组的方法 every some map filter forEach
本文介绍了JavaScript中五种常用数组迭代方法:every、some、filter、map和forEach,并通过示例代码展示了它们的基本用法和区别。
|
25天前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
177 0
|
26天前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
2月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
233 77