Vue中处理数组的方法和示例

Vue中处理数组的方法有很多，下面我们就来看看具体的使用方法。

1.Vue.set()

Vue.set()方法可以向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，并且触发视图更新。

// 添加新的属性
Vue.set(vm.items, indexOfItem, newValue)

2.vm.$set()

vm.$set()方法是全局Vue.set()的一个别名，它可以为响应式对象设置新的属性，并确保这个新属性同样是响应式的，并且触发视图更新。

// 添加新的属性
vm.$set(vm.items, indexOfItem, newValue)

3.splice()

splice()方法可以添加、删除或替换数组中的元素，它接收三个参数：要改变的元素的索引，要删除的元素的数量，以及要添加的元素。

// 添加一个新元素
vm.items.splice(indexOfItem, 0, newValue)

// 删除一个元素
vm.items.splice(indexOfItem, 1)

// 替换一个元素
vm.items.splice(indexOfItem, 1, newValue)

4.filter()

filter()方法可以过滤数组，它接收一个函数作为参数，该函数会接收一个参数，该参数是数组中的元素，函数必须返回一个布尔值，返回true表示保留该元素，返回false表示删除该元素。

// 过滤数组
const filteredItems = vm.items.filter(function(item) {
  return item.name === 'foo'
})

5.concat()

concat()方法可以将两个或多个数组合并为一个新的数组，它接收一个或多个数组作为参数，并返回一个新的数组。

// 合并两个数组
const newItems = vm.items.concat(additionalItems)

6.sort()

sort()方法可以对数组中的元素进行排序，它接收一个函数作为参数，该函数会接收两个参数，表示要比较的两个元素，函数必须返回一个数字，如果第一个参数比第二个参数小，则返回一个负数，如果两个参数相等，则返回0，如果第一个参数比第二个参数大，则返回一个正数。

// 按照名字排序
vm.items.sort(function(a, b) {
  if (a.name < b.name) {
    return -1
  }
  if (a.name > b.name) {
    return 1
  }
  return 0
})

7.forEach()

forEach()方法可以对数组中的每个元素执行一个函数，它接收一个函数作为参数，该函数会接收三个参数，分别是当前正在处理的元素、元素的索引和原数组。

// 遍历数组
vm.items.forEach(function(item, index, array) {
  console.log(item, index, array)
})

8.map()

map()方法可以对数组中的每个元素执行一个函数，并返回一个新的数组，它接收一个函数作为参数，该函数会接收三个参数，分别是当前正在处理的元素、元素的索引和原数组。

// 映射数组
const newItems = vm.items.map(function(item, index, array) {
  return item.name
})

9.reduce()

reduce()方法可以对数组中的每个元素执行一个函数，并将其结果汇总为一个值，它接收一个函数作为参数，该函数会接收四个参数，分别是上一次函数执行的返回值（或者是

千锋教育是高品质web前端培训机构，千锋教育拥有大量实力web前端培训讲师，提供优质的web培训课程，web前端培训，欢迎报名千锋教育。