vue数组操作

1、数组的响应式方法:

push(value):从数组最后面添加元素
unshift(value):从数组最前面添加元素
pop():从数组最后一个元素开始删除
shift():从数组第一个元素开始删除

splice(start,deleteCount):从start开始删除deleteCount个元素
splice(start,deleteCount,…value):从start开始替换deleteCount个元素,后面跟上要替换的元素。
splice(start,0,…value):从start开始插入value,后面跟上要添加的元素。

splice说明:在进行数组的中间插入操作时,vue是依次替换每一个数,然后再在最后添加一个新空间存储原数组最后的元素。这样做是很没有效率的,因此在进行数组遍历时,若想从中间插入一条数据,需要使用到key属性。
如:< li v-for=“item in arrays” :key=“item” >{{ item }}
所以,一句话概括,key的作用是为了高效的更新虚拟DOM.

2、数组的非响应式方法:

arr[0]=“aaa”,列表不会随着数组的改变而响应式渲染到页面上。

3、数组的高阶函数,类似lambda表达式函数时编程:

filter():过滤数组,参数传递一个回调函数,回调函数返回true时,函数内部自动讲这次回调的数据保存到新数组中;当回调函数返回false时,函数内部过滤掉该数据。

map():遍历操作数组,参数传递一个回调函数,可在回调函数中操作遍历的每一个数组值,如加减乘除。

reduce():对数组中所有的内容进行汇总。

案例:对数组进行操作:1,取出小于100的数;2,每个数乘2;3,汇总。
newArray = array.filter(arr => arr < 100).map(arr => arr*2).reduce((arr,num) => arr+num);

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值