vue2的数组方法整理归纳

数组基本操作可以归纳为 增、删、改、查,需要留意的是哪些⽅法会对原数组产⽣影响,哪些⽅法不会
 


下⾯前三种是对原数组产⽣影响的增添⽅法,第四种则不会对原数组产⽣影响
push()
unshi!()
splice()
concat()


下⾯三种都会影响原数组,最后⼀项不影响原数组:
pop()
shi!()
splice()
slice()


即修改原来数组的内容,常⽤ splice
splice()
传⼊三个参数,分别是开始位置,要删除元素的数量,要插⼊的任意多个元素,返回删除元素的数组,
对原数组产⽣影响


即查找元素,返回元素坐标或者元素值
indexOf()
includes()
find()

排序⽅法


数组有两个⽅法可以⽤来对元素重新排序:
reverse()
sort()

转换⽅法


常⻅的转换⽅法有:
join()
join() ⽅法接收⼀个参数,即字符串分隔符,返回包含所有项的字符串

迭代⽅法


常⽤来迭代数组的⽅法(都不改变原数组)有如下:
some()
every()
forEach()
filter()
map()

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js 2.x 中,为了实现响应式的数组,你可以使用下面的方法重写数组方法: 1. push:使用 `Array.prototype.push` 方法,然后手动调用 `Vue.set` 更新数组,例如: ```javascript this.array.push(newItem); Vue.set(this.array, this.array.length - 1, newItem); ``` 2. pop:使用 `Array.prototype.pop` 方法,然后手动调用 `Vue.delete` 删除最后一个元素,例如: ```javascript const deletedItem = this.array.pop(); Vue.delete(this.array, this.array.length); ``` 3. shift:使用 `Array.prototype.shift` 方法,然后手动调用 `Vue.delete` 删除第一个元素,例如: ```javascript const deletedItem = this.array.shift(); Vue.delete(this.array, 0); ``` 4. unshift:使用 `Array.prototype.unshift` 方法,在调用之前手动调用 `Vue.set` 更新数组的长度,例如: ```javascript this.array.unshift(newItem); Vue.set(this.array, 0, newItem); ``` 5. splice:使用 `Array.prototype.splice` 方法,然后手动调用 `Vue.delete` 删除或添加元素,例如: ```javascript // 删除元素 const deletedItems = this.array.splice(startIndex, deleteCount); for (let i = 0; i < deleteCount; i++) { Vue.delete(this.array, startIndex + i); } // 添加元素 this.array.splice(startIndex, 0, ...newItems); for (let i = 0; i < newItems.length; i++) { Vue.set(this.array, startIndex + i, newItems[i]); } ``` 通过手动调用 `Vue.set` 和 `Vue.delete`,你可以确保数组的变化能够触发 Vue.js 的响应式更新。 注意:以上方法适用于 Vue.js 2.x,在 Vue.js 3.x 中,你可以直接使用原生数组方法,因为 Vue.js 3.x 支持了 Proxy 来实现更好的响应式机制。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值