怎么判断JavaScript代码的引用

分析下面的两张图

一、JavaScript代码

二、鸿蒙的ets文件代码

了解上面的代码。

map后端的item接的是对象的不能用扩展运算符,在ts文件中只能用返回对象字面量,即是:

{ ... } 本身是一个 对象字面量,

在上面的代码中,由二的那部分鸿蒙的ets文件代码也可以写成

上面的代码是实现深层拷贝,不再引用各自的内存地址引用。

1、主要的实现效果代码:

let arr1 = [12, {id: 1}, {id: 2}];
let arr2 = arr1.map(item =>
{
   if (typeof item === 'object' && item !== null)
   {
       return {
           id: item.id
       }
   }
})
arr1[1].id = 100
console.log("arr2", arr2)
console.log("arr1", arr1)
console.log(arr1 === arr2); // false,对象引用不相同
 

实现效果:

2、鸿蒙页面代码:

import { router } from '@kit.ArkUI'
interface user1{
 id:number
 name:string
}
interface address1{
 city:string
 street:string
}
interface Order {
 id: number;
 user: user1;
 address: address1;
}
@Entry
@Component
struct Test4 {
 @State message: string = 'Hello World';
 @State me:Order={
   id:1,
   user:{
     id:2,
     name:'aaa'
   },
   address:{
     city:'广东',
     street:'十三巷'
   }
 }
 @State me1:Order[]=[{
   id:3,
   user:{
     id:2,
     name:'aaa'
   },
   address:{
     city:'广东',
     street:'十三巷'
   }
 },
   {
     id: 21,
     user: {
       id: 2,
       name: 'aaa'
     },
     address: {
       city: '广东',
       street: '十三巷'
     }
   }
 ]
 build() {
   Column() {
     Text(String(this.me1[0].address.city))
       .fontSize(34)
     Button('修改城市me1')
       .onClick(() => {
         // 1. 先改值
         this.me1[0].address.city = '四川';
         // 2. 再换数组引用,触发 UI 重新收集
         this.me1.forEach(item => {
           item.id = 999;  // 数字
         });
         interface Order {
           id: number;
           user: user1;
           address: address1;
         }
         this.me1 = this.me1.map(item => {
           return {
             id: item.id,
             user:item.user,
             address:
             {
               city: item.address.city, street:
             item.address.street
             }
           }as Order;
         });
       })
   }
 }
}

运行效果如下:

欢迎关注码文狙击所。

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐