uView 객체 작업

알아채다

JS 객체의 범위는 매우 넓고, ES6에는 새로운 기능이 많기 때문에 모든 유형과 상황을 포괄하는 것은 어렵고 불필요합니다. 여기서 언급하는 "객체"는 객체 프로토타입 체인을 수정할 때 주의하시기 바랍니다. , 또는 "기능", "약속" 등

#객체 딥 클론

장면:

일반적으로 console.log객체를 인쇄해야 할 경우가 있는데, 인쇄가 실행되면 객체가 비어 있고, 후속 로직에서 객체가 수정되어 할당되지만 콘솔에 직접 표시되는 인쇄 결과는 수정된 값입니다. console.log(JSON.parse(JSON.stringify(object)))의 형태로 처리 할 수는 있지만 그렇게 긴 문자열을 작성해야 한다는 것은 필연적으로 사람들에게 갈등을 느끼게 할 것입니다.
객체(변수 A)를 다른 변수(변수 B)에 할당하고 변수 B를 수정하면 객체 참조의 특성상 A도 동시에 수정되므로 A를 B에 복제하여 수정해야 하는 경우가 있습니다. 이 B와 마찬가지로 A도 수정되지 않습니다.

# deepClone(객체 = {})

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'}

복사

#객체 깊이 병합

ES6에서는 Object.assign객체를 쉽게 병합할 수 있지만 이는 얕은 병합일 뿐이므로 객체의 속성이 배열이거나 객체인 경우 속성 내부의 값이 손실됩니다.

참고: 여기에서 병합하는 Object.assign것은 Object.assign(a, b)수정될 값이 a최종 결과이지만(종종 예상한 것과 다름) 값이 deepMerge(a, b)수정되지 않기 때문에 다릅니다 a.

# deepMerge(대상 = {}, 소스 = {})

target <객체> 대상 객체
source <객체> 소스 객체

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'
	}
}

복사

심층 병합 예:

let a = {
	info: {
		name: 'mary'
	}
}

let b = {
	info: {
		age: '22'
	}
}

let c = uni.$u.deepMerge(a, b);

// c为我们期望的结果
c = {
	info: {
		age: '22',
		name: 'mary'
	}
}

복사

#체인 읽기객체속성

속성을 읽을 때 하나부터 작업해야 합니다 对象. 그렇지 않으면 오류가 발생하므로 uView는 연결된 속성 읽기 방법을 제공합니다.
물론 可选链操作符양식을 사용하여 얻을 수도 있지만 Vue2에서는 이 방법을 적용할 수 없습니다 template.

# getProperty(객체, 키)

// 假设有如下一个对象
const object = {
	userInfo: {
		address: {
			province: '深圳'
		}
	}
}

// 可以通过如下写法获取province属性
uni.$u.getProperty(object, 'userInfo.address.province')

// 可选链操作符形式
console.log(object?.userInfo?.address?.province)

복사

#체인 세트 객체 속성

속성을 설정할 때 하나부터 작동해야 합니다 对象. 그렇지 않으면 오류가 발생하므로 uView는 연결된 속성 설정 방법을 제공합니다.

// 设置一个空对象
const object = {}

// 链式设置属性
uni.$u.setProperty(object, 'userInfo.address.province')

// object将会变成如下对象：
{
	userInfo: {
		address: {
			province: '深圳'
		}
	}
}