鸿蒙开发：如何更新对象数组

前言

本文基于Api13

之前自己封装了一个列表刷新库，已经运行了很长的时间了，可是在最近接到一个问题，说是在给列表某条数据更新的时候，发现数据没有变化，接到问题的时候就马上进入了排查，最后发现是使用上没有按照规范执行，此问题的产生就是开发中常见的对象数组更新问题，索性就简单的记录一下。

我们知道，针对一个基本类型的数组，我们可以直接进行更改，就可以影响到数据的变化，如下面的案例，一个简单的数组加载，使用的是@State装饰器，在点击按钮之后，可以发现数组中索引为0的数据就发生了变化。

TypeScript 复制代码

  @Entry
  @Component
  struct Index {
    @State items: string[] = ["条目一","条目二","条目三"]

    build() {
      Column() {
        ForEach(this.items, (item: string) => {
          Text(item)
            .height(30)
        })
        Button("修改数据")
          .onClick(() => {
            this.items[0] = "这是条目一修改后的数据"
          })
      }.width("100%")
        .alignItems(HorizontalAlign.Center)
    }
  }

还是上面的案例，我们把基本类型数组改为一个对象数组，如下代码所示，就可以发现，点击按钮之后，数据没有发生变化。

TypeScript 复制代码

class TestBean {
  name?: string

  constructor(name: string) {
    this.name = name
  }
}

@Entry
@Component
struct Index {
  @State items: TestBean[] = [
    new TestBean("条目一"),
    new TestBean("条目二"),
    new TestBean("条目三")]

  build() {
    Column() {
      ForEach(this.items, (item: TestBean) => {
        Text(item.name)
          .height(30)
      })
      Button("修改数据")
        .onClick(() => {
          this.items[0].name = "这是条目一修改后的数据"
        })
    }.width("100%")
    .alignItems(HorizontalAlign.Center)
  }
}

对象形式是开发中最为常见的方式，而对数据的更新也是司空见惯，比如条目中的选中状态，虽然以上的代码没有使用到List等列表组件，但是大同小异，都存在一个典型的问题，那就是，为什么基本数组可以更新，而对象数组不能更新呢？

这是因为@State装饰器，只能观察到第一层的变化，而第二层的属性变化是无法观察到的，如果要进行对象更新，需要使用到@Observed/@ObjectLink装饰器。

如果我不使用@Observed/@ObjectLink装饰器，难道就无法更新吗？ 这里做一下反问，后面我们注重概述一下，我们还是先按照传统的方式，使用装饰器，看如何更新对象数组。

@Observed/@ObjectLink使用

第一步，给对象加上@Observed装饰器

TypeScript 复制代码

@Observed
class TestBean {
  name?: string

  constructor(name: string) {
    this.name = name
  }
}

第二步，视图抽取子组件

TypeScript 复制代码

@Component
struct TextView {
  @ObjectLink item: TestBean

  build() {
    Text(this.item.name)
      .height(30)
  }
}

第三步，改为子组件

TypeScript 复制代码

@Entry
@Component
struct Index {
  @State items: TestBean[] = [
    new TestBean("条目一"),
    new TestBean("条目二"),
    new TestBean("条目三")]

  build() {
    Column() {
      ForEach(this.items, (item: TestBean) => {
        TextView({ item: item })
      })
      Button("修改数据")
        .onClick(() => {
          this.items[0].name = "这是条目一修改后的数据"
        })
    }.width("100%")
    .alignItems(HorizontalAlign.Center)
  }
}

经过以上的步骤，我们再次点击下按钮，可以发现，对象数组中的数据已经发生了变化：

@Observed/@ObjectLink配套使用，主要是用于嵌套场景的观察，是为了弥补装饰器仅能观察一层的能力限制，但是我们可以发现为了实现对象数据的更新，我们需要拆出子组件，需要做对象观察，我就一个简单的组件，不想这么麻烦，能否进行对象数据更新呢？显然是可以的。

数组更新

1、整个对象赋值

对于一个简单元素的对象，我们可以拿到数组，针对对应的索引直接更新即可，代码如下：让新的对象赋值给指定的索引。

TypeScript 复制代码

class TestBean {
  name?: string

  constructor(name: string) {
    this.name = name
  }
}

@Entry
@Component
struct Index {
  @State items: TestBean[] = [
    new TestBean("条目一"),
    new TestBean("条目二"),
    new TestBean("条目三")]

  build() {
    Column() {
      ForEach(this.items, (item: TestBean) => {
        Text(item.name)
          .height(30)
      })
      Button("修改数据")
        .onClick(() => {
          this.items[0] = new TestBean("这是条目一修改后的数据")
        })
    }.width("100%")
    .alignItems(HorizontalAlign.Center)
  }
}

我们运行之后，可以发现数据也发生了变化，此方法更新的优点也显而易见，时间复杂度低（O(1)），代码简洁直观，更加符合我们的常规思想，缺点也很明显，如果对象元素比较多，管理稍显麻烦，毕竟是针对整个对象更新，而不是对象的单个元素。

2、单属性赋值

在第一种方式中，虽然实现了对象数组的数据更新，但是针对的是整个对象，而不是单个对象的某个属性，这对于针对单属性更新的场景非常的不便，有的同学们可能想到了，我们可以先获取某个索引的对象，修改完某个属性之后，再次赋值不就行了吗？哎，听起来好像没问题，我们验证一下：

TypeScript 复制代码

let bean = this.items[0]
bean.name = "这是条目一修改后的数据"
this.items[0] = bean

以上的代码，我们运行之后，可以发现，并没有生效，因为对象还是原来的对象，其引用地址并未发生变化，为了使其更新，我们可以执行先删除后添加的方式，也就是先把这个位置的数据删除，在同样的位置再插入一条数据，这就实现了数据的动态变化，其实在数组中，已经为我们提供了一个方法，那就是splice方法。

splice方法是数组对象的一个内置函数，主要用于修改数组的内容，它可以实现，插入元素：可以在指定位置插入一个或多个元素到数组中；也可以进行删除元素：可以删除指定位置的一个或多个元素；也可以替换元素：可以删除指定位置的元素，并插入一个或多个新元素。

TypeScript 复制代码

 splice(start: number, deleteCount: number, ...items: T[]): T[];

start：表示要修改的起始索引位置（从0计数）。

deleteCount：表示要删除的元素数量，如果为0，则不删除任何元素。

...items: T[]：要插入到数组的元素。

我们使用splice方法对以上的代码做下优化，还是上面的案例，我们对元素为0的数据进行更新：

TypeScript 复制代码

let bean = this.items[0]
bean.name = "这是条目一修改后的数据"
this.items.splice(0, 1, bean)

运行之后，可以发现，对象数组中的数据已经发生了变化。

鸿蒙开发：如何更新对象数组

前言

@Observed/@ObjectLink使用

第一步，给对象加上@Observed装饰器

第二步，视图抽取子组件

第三步，改为子组件

数组更新

1、整个对象赋值

2、单属性赋值

相关总结