uniapp数组连接

数组连接方法

在UniApp中，数组连接可以通过JavaScript原生方法实现。以下是几种常见的数组连接方式：

concat方法

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let newArr = arr1.concat(arr2); // [1, 2, 3, 4, 5, 6]

扩展运算符

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let newArr = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

push方法结合扩展运算符

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
arr1.push(...arr2); // arr1变为[1, 2, 3, 4, 5, 6]

注意事项

使用concat方法会返回新数组，不会改变原数组。push方法会修改原数组。扩展运算符是ES6语法，在UniApp中完全支持。

对于大数据量数组连接，concat方法性能通常优于循环添加。在Vue数据绑定的场景下，如果需要触发视图更新，应该使用Vue.set或数组的变异方法。

实际应用示例

在UniApp页面中连接两个数组并更新视图：

export default {
  data() {
    return {
      list1: ['a', 'b'],
      list2: ['c', 'd']
    }
  },
  methods: {
    mergeLists() {
      this.list1 = this.list1.concat(this.list2);
      // 或者使用扩展运算符
      // this.list1 = [...this.list1, ...this.list2];
    }
  }
}