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

简介: 关于对象数组中的数据更新,目前例举了三种方式,一种是传统的装饰器方式,另外两种是针对数据源进行操作,数据源直接赋值的方式,适合简单、高频的单元素修改,性能最优且类型安全,而splice方法适合复杂操作或需保持引用稳定的场景,但需注意性能损耗,在实际的开发中可以根据需求,选择自己适合的方式。

前言


本文基于Api13


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


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


@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)
    }
  }


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


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装饰器


@Observed
class TestBean {
  name?: string
  constructor(name: string) {
    this.name = name
  }
}


第二步,视图抽取子组件


@Component
struct TextView {
  @ObjectLink item: TestBean
  build() {
    Text(this.item.name)
      .height(30)
  }
}


第三步,改为子组件


@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、整个对象赋值


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


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、单属性赋值


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


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


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


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


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


start:表示要修改的起始索引位置(从0计数)。


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


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


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


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


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

相关总结


关于对象数组中的数据更新,目前例举了三种方式,一种是传统的装饰器方式,另外两种是针对数据源进行操作,数据源直接赋值的方式,适合简单、高频的单元素修改,性能最优且类型安全,而splice方法适合复杂操作或需保持引用稳定的场景,但需注意性能损耗,在实际的开发中可以根据需求,选择自己适合的方式。

相关文章
【04】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-自定义一个设置输入小部件组件-完成所有设置setting相关的页面-优雅草卓伊凡
【04】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-自定义一个设置输入小部件组件-完成所有设置setting相关的页面-优雅草卓伊凡
161 92
【03】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-在lib目录新建自定义库UtilsLibrary,ComponentLibrary,CommonConstLibrary完成设置SettingsView.ets初始公共类书写-优雅草卓伊凡
【03】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-在lib目录新建自定义库UtilsLibrary,ComponentLibrary,CommonConstLibrary完成设置SettingsView.ets初始公共类书写-优雅草卓伊凡
72 23
【03】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-在lib目录新建自定义库UtilsLibrary,ComponentLibrary,CommonConstLibrary完成设置SettingsView.ets初始公共类书写-优雅草卓伊凡
【02】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-登录页面LoginView.ets完成-并且详细解释关于arkui关于 CommonConst, commonColor, InputDataModel-优雅草卓伊凡
【02】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-登录页面LoginView.ets完成-并且详细解释关于arkui关于 CommonConst, commonColor, InputDataModel-优雅草卓伊凡
61 14
【02】优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-登录页面LoginView.ets完成-并且详细解释关于arkui关于 CommonConst, commonColor, InputDataModel-优雅草卓伊凡
【01】优雅草星云物联网AI智控系统从0开发鸿蒙端适配完成流程-初始化鸿蒙编译器deveco studio项目结构-UI设计图切片下载-优雅草卓伊凡
【01】优雅草星云物联网AI智控系统从0开发鸿蒙端适配完成流程-初始化鸿蒙编译器deveco studio项目结构-UI设计图切片下载-优雅草卓伊凡
51 11
【01】优雅草星云物联网AI智控系统从0开发鸿蒙端适配完成流程-初始化鸿蒙编译器deveco studio项目结构-UI设计图切片下载-优雅草卓伊凡
鸿蒙开发难题多到崩溃?然而 10 亿终端暗藏财富密码-卓伊凡
鸿蒙开发难题多到崩溃?然而 10 亿终端暗藏财富密码-卓伊凡
51 5
鸿蒙开发难题多到崩溃?然而 10 亿终端暗藏财富密码-卓伊凡
【05】20250416优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-增加告警中心相关卡片页面WarningCardWidget相关-增加Canvas 绘制折线图-Canvas 绘制柱状图-首页-优雅草卓伊凡
【05】20250416优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-增加告警中心相关卡片页面WarningCardWidget相关-增加Canvas 绘制折线图-Canvas 绘制柱状图-首页-优雅草卓伊凡
34 0
【05】20250416优雅草星云物联网AI智控系统从0开发鸿蒙端适配-deveco studio-增加告警中心相关卡片页面WarningCardWidget相关-增加Canvas 绘制折线图-Canvas 绘制柱状图-首页-优雅草卓伊凡
鸿蒙NEXT开发App相关工具类(ArkTs)
这段代码展示了一个名为鸿蒙NEXT开发 `AppUtil` 的工具类,主要用于管理鸿蒙应用的上下文、窗口、状态栏、导航栏等配置。它提供了多种功能,例如设置灰阶模式、颜色模式、字体类型、屏幕亮度、窗口属性等,并支持获取应用包信息(如版本号、包名等)。该工具类需在 UIAbility 的 `onWindowStageCreate` 方法中初始化,以便缓存全局变量。代码由鸿蒙布道师编写,适用于鸿蒙系统应用开发,帮助开发者更便捷地管理和配置应用界面及系统属性。
拥抱国产化:转转APP的鸿蒙NEXT端开发尝鲜之旅
本文将要分享的是转转APP在开发全新鸿蒙NEXT端所遇到的一些问题,对比了鸿蒙开发和 Android、iOS 的不同,总结了这次开发过程中的一些经验等等。希望能带给你启发。
22 0
鸿蒙开发:使用Ellipse绘制椭圆
除了使用Ellipse组件可以一个椭圆之外,我们还可以使用Canvas来绘制一个椭圆,但是相对来说,还是没有Ellipse组件高效,所以,如果说Ellipse组件能够满足需求,还是以Ellipse组件为主。
鸿蒙开发:使用Ellipse绘制椭圆
嵌入式linux/鸿蒙开发板(IMX6ULL)开发 (二)Ubuntu操作入门与Linux常用命令(中)
嵌入式linux/鸿蒙开发板(IMX6ULL)开发 (二)Ubuntu操作入门与Linux常用命令
246 1
嵌入式linux/鸿蒙开发板(IMX6ULL)开发 (二)Ubuntu操作入门与Linux常用命令(中)

热门文章

最新文章