vue 封装对象深拷贝方法
- 在 src/ utils文件夹下面新建
index.js
javascript
// index.js
// 深拷贝对象
export function deepClone(obj) {
const _toString = Object.prototype.toString
// null, undefined, non-object, function
if (!obj || typeof obj !== 'object') {
return obj
}
// DOM Node
if (obj.nodeType && 'cloneNode' in obj) {
return obj.cloneNode(true)
}
// Date
if (_toString.call(obj) === '[object Date]') {
return new Date(obj.getTime())
}
// RegExp
if (_toString.call(obj) === '[object RegExp]') {
const flags = []
if (obj.global) { flags.push('g') }
if (obj.multiline) { flags.push('m') }
if (obj.ignoreCase) { flags.push('i') }
return new RegExp(obj.source, flags.join(''))
}
const result = Array.isArray(obj) ? [] : obj.constructor ? new obj.constructor() : {}
for (const key in obj) {
result[key] = deepClone(obj[key])
}
return result
}
- 使用
javascript
// 简单使用
<script>
import { deepClone } from '@/utils/index'
export default {
name: "HomeView",
data() {
return {
obj: {
a: 1,
b: 2,
c: 3,
},
};
},
mounted(){
let newObj = deepClone(this.obj) // 方法使用
// 方法验证
console.log(newObj) // {a: 1, b: 2, c: 3}
newObj.c = 4
console.log(newObj) // {a: 1, b: 2, c: 4}
console.log(this.obj) // {a: 1, b: 2, c: 3}
}
};
</script>
- 搞定 复制可直接用!