码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift

  • uView 对象操作

    注意

    由于JS对象包括的范围非常广，加上ES6又有众多的新特性，很难、也没必要做到囊括所有的类型和情况，这里说的"对象"，指的是普通的对象，不包括修改对象原型链， 或者为"Function"，"Promise"等的情况，请留意。

    #对象深度克隆

    场景：

    • 我们平时可能会遇到需要通过console.log打印一个对象，至执行打印的时刻，此对象为空，后面的逻辑中对此对象进行了修改赋值，但是我们在控制台直接看到的打印结果 却是修改后的值，这让人匪夷所思，虽然我们可以通过console.log(JSON.parse(JSON.stringify(object)))的形式处理，但是需要写这长长的一串，难免让人心生抵触。

    • 当我们将一个对象(变量A)赋值给另一个变量(变量B)时，修改变量B，因为对象引用的特性，导致A也同时被修改，所以有时候我们需要将A克隆给B，这样修改B的时候，就不会 导致A也被修改。

    #deepClone(object = {})

    • object  需要被克隆的对象 
      1. let a = {
      2. 	name: 'mary'
      3. };
      4.  
      5. // 直接赋值，为对象引用，即修改b等于修改a，因为a和b为同一个值
      6. let b = a;
      7.  
      8. b.name = 'juli';
      9. console.log(b); // 结果为 {name: 'juli'}
      10. console.log(a); // 结果为 {name: 'juli'}
      11.  
      12.  
      13. // 深度克隆
      14. let b = uni.$u.deepClone(a);
      15.  
      16. b.name = 'juli';
      17. console.log(b); // 结果为 {name: 'juli'}
      18. console.log(a); // 结果为 {name: 'mary'}

      copy

      #对象深度合并

      在ES6中，我们可以很方便的使用Object.assign进行对象合并，但这只是浅层的合并，如果对象的属性为数组或者对象的时候，会导致属性内部的值丢失。

      注意： 此处合并不同于Object.assign，因为Object.assign(a, b)会修改a的值为最终的结果(这往往不是我们所期望的)，但是deepMerge(a, b)并不会修改a的值。

      #deepMerge(target = {}, source = {})

      • target  目标对象
      • source  源对象

        Object.assign浅合并示例：

        1. let a = {
        2. 	info: {
        3. 		name: 'mary'
        4. 	}
        5. }
        6.  
        7. let b = {
        8. 	info: {
        9. 		age: '22'
        10. 	}
        11. }
        12.  
        13. // 使用Object.assign进行合并，注意此时a被修改了
        14. let c = Object.assign(a, b);
        15.  
        16. // 我们期望的结果为：
        17. c = {
        18. 	info: {
        19. 		name: 'mary',
        20. 		age: '22'
        21. 	}
        22. }
        23.  
        24. // 事实上，我们得到的结果却为：
        25. c = {
        26. 	info: {
        27. 		age: '22'
        28. 	}
        29. }

        copy

        深度合并示例：

        1. let a = {
        2. 	info: {
        3. 		name: 'mary'
        4. 	}
        5. }
        6.  
        7. let b = {
        8. 	info: {
        9. 		age: '22'
        10. 	}
        11. }
        12.  
        13. let c = uni.$u.deepMerge(a, b);
        14.  
        15. // c为我们期望的结果
        16. c = {
        17. 	info: {
        18. 		age: '22',
        19. 		name: 'mary'
        20. 	}
        21. }

        copy

        #链式读取对象属性

        读取属性时，我们需要从一个对象中进行操作，否则就会引起报错，因此uView提供了一个链式属性的读取方式。
        当然，我们也可以使用可选链操作符的形式去获取，但是此方式在Vue2的template中不适用。

        #getProperty(object, key)

        1. // 假设有如下一个对象
        2. const object = {
        3. 	userInfo: {
        4. 		address: {
        5. 			province: '深圳'
        6. 		}
        7. 	}
        8. }
        9.  
        10. // 可以通过如下写法获取province属性
        11. uni.$u.getProperty(object, 'userInfo.address.province')
        12.  
        13. // 可选链操作符形式
        14. console.log(object?.userInfo?.address?.province)

        copy

        #链式设置对象属性

        设置属性时，我们需要从一个对象中进行操作，否则就会引起报错，因此uView提供了一个链式属性的设置方式。

        1. // 设置一个空对象
        2. const object = {}
        3.  
        4. // 链式设置属性
        5. uni.$u.setProperty(object, 'userInfo.address.province')
        6.  
        7. // object将会变成如下对象：
        8. {
        9. 	userInfo: {
        10. 		address: {
        11. 			province: '深圳'
        12. 		}
        13. 	}
        14. }
      • 相关阅读:
        【c++】stack和queue模拟实现
        node-sass改dart-sass and 一些七七八八
        java扶贫平台计算机毕业设计MyBatis+系统+LW文档+源码+调试部署
        Kubernetes — Calico
        String常量池理解
        [Spring Framework]AOP经典案例、AOP总结
        SQL Server Basic Class
        13model selection和bias/variance1
        华为交换机基础配置（telnet/ssh登录）
        LeetCode题解—260.只出现一次的数字Ⅲ
      • 原文地址：https://blog.csdn.net/m0_72196169/article/details/135464345
        • 最新文章
        • 攻防演习之三天拿下官网站群
          数据安全治理学习——前期安全规划和安全管理体系建设
          企业安全 | 企业内一次钓鱼演练准备过程
          内网渗透测试 | Kerberos协议及其部分攻击手法
          0day的产生 | 不懂代码的"代码审计"
          安装scrcpy-client模块av模块异常，环境问题解决方案
          leetcode hot100【LeetCode 279. 完全平方数】java实现
          OpenWrt下安装Mosquitto
          AnatoMask论文汇总
          【AI日记】24.11.01 LangChain、openai api和github copilot
        • 热门文章
        • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！
          奉劝各位学弟学妹们，该打造你的技术影响力了！
          五年了，我在 CSDN 的两个一百万。
          Java俄罗斯方块，老程序员花了一个周末，连接中学年代！
          面试官都震惊，你这网络基础可以啊！
          你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法
          心情不好的时候，用 Python 画棵樱花树送给自己吧
          通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！
          13 万字 C 语言从入门到精通保姆级教程2021 年版
          10行代码集2000张美女图，Python爬虫120例，再上征途
        Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
        正则表达式工具 cron表达式工具 密码生成工具

        京公网安备 11010502049817号