uView 对象操作

简介: 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 <Object> 需要被克隆的对象
let a = {
  name: 'mary'
};
// 直接赋值,为对象引用,即修改b等于修改a,因为a和b为同一个值
let b = a;
b.name = 'juli';
console.log(b); // 结果为 {name: 'juli'}
console.log(a); // 结果为 {name: 'juli'}
// 深度克隆
let b = uni.$u.deepClone(a);
b.name = 'juli';
console.log(b); // 结果为 {name: 'juli'}
console.log(a); // 结果为 {name: 'mary'}

copy

#对象深度合并

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

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

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

  • target <Object> 目标对象
  • source <Object> 源对象

Object.assign浅合并示例:

let a = {
  info: {
    name: 'mary'
  }
}
let b = {
  info: {
    age: '22'
  }
}
// 使用Object.assign进行合并,注意此时a被修改了
let c = Object.assign(a, b);
// 我们期望的结果为:
c = {
  info: {
    name: 'mary',
    age: '22'
  }
}
// 事实上,我们得到的结果却为:
c = {
  info: {
    age: '22'
  }
}

copy

深度合并示例:

let a = {
  info: {
    name: 'mary'
  }
}
let b = {
  info: {
    age: '22'
  }
}
let c = uni.$u.deepMerge(a, b);
// c为我们期望的结果
c = {
  info: {
    age: '22',
    name: 'mary'
  }
}

copy

#链式读取对象属性

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

当然,我们也可以使用可选链操作符的形式去获取,但是此方式在Vue2template中不适用。

#getProperty(object, key)

// 假设有如下一个对象
const object = {
  userInfo: {
    address: {
      province: '深圳'
    }
  }
}
// 可以通过如下写法获取province属性
uni.$u.getProperty(object, 'userInfo.address.province')
// 可选链操作符形式
console.log(object?.userInfo?.address?.province)

copy

#链式设置对象属性

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

// 设置一个空对象
const object = {}
// 链式设置属性
uni.$u.setProperty(object, 'userInfo.address.province')
// object将会变成如下对象:
{
  userInfo: {
    address: {
      province: '深圳'
    }
  }
}
相关文章
|
6月前
|
JavaScript
Vue中给对象添加新属性时,界面不刷新怎么办?
Vue中给对象添加新属性时,界面不刷新怎么办?
106 0
|
JavaScript 数据安全/隐私保护
Vue封装全局注册弹窗组件,实现全局调用。
前言 很多网站都会有权限控制,比如一些博客网站的评论系统,必须要用户登录后才能发起评论,如果未登录想要评论,网站则会弹出登录弹窗。这个登录弹窗可以任何需要权限的地方弹出,所以这个弹窗组件我们就必须封装为共有的,共全局调用。
1543 0
|
3月前
|
JavaScript
【Vue面试题九】、Vue中给对象添加新属性界面不刷新?
这篇文章讨论了Vue中给对象动态添加新属性时界面不刷新的问题,并提供了三种解决方案:使用`Vue.set()`方法来确保新属性是响应式的并触发视图更新,使用`Object.assign()`创建新对象以合并新属性,以及作为最后手段的`$forceUpdate()`进行强制刷新。文章还简要分析了Vue 2和Vue 3在数据响应式实现上的差异。
|
3月前
|
JavaScript 数据安全/隐私保护
如何在Vue组件中调用封装好的外部js文件方法
这篇文章介绍了如何在Vue组件中调用封装好的外部js文件方法,包括在Vue项目中全局引入外部js文件,并在组件中通过this.$myMethod()的方式调用外部js文件中定义的方法。
如何在Vue组件中调用封装好的外部js文件方法
|
3月前
|
JavaScript 数据处理
如何使用 Vue.js 将数据对象的值放入另一个数据对象中?
如何使用 Vue.js 将数据对象的值放入另一个数据对象中?
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中
循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中
|
6月前
封装组件,通过指令进行调用,类似于elementUI中的loading组件
封装组件,通过指令进行调用,类似于elementUI中的loading组件
48 0
|
JavaScript 前端开发 开发者
vue封装单文件弹窗组件
  VUE想要实现一个普通弹窗,想必对于大部分前端开发者来说实现起来都是非常简单一件事情,但是如果说要封装某一个具体需求效果,可能就难倒不少同学 ,由此可见 从实现到封装这个过程是非常考验个人能力的!
135 0
|
JavaScript
Vue 全局导入 JS 方式以及对 ClassName 进行增删扩展
Vue 全局导入 JS 方式以及对 ClassName 进行增删扩展
79 0
|
6月前
|
JavaScript
Vue项目常见的文档导入调接口
Vue项目常见的文档导入调接口