javascript nested object merge All In One
javascript nested object merge All In One
deep copy / deep clone
In JavaScript, standard built-in object-copy operations (spread syntax
, Array.prototype.concat()
, Array.prototype.slice()
, Array.from()
, Object.assign()
, and Object.create()
) do not create deep copies
(instead, they create shallow copies
).
One way to make a deep copy of a JavaScript object, if it can be serialized, is to use JSON.stringify()
to convert the object to a JSON string, and then JSON.parse()
to convert the string back into a (completely new) JavaScript object:
https://developer.mozilla.org/en-US/docs/Glossary/Deep_copy
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
shallow copy
https://developer.mozilla.org/en-US/docs/Glossary/Shallow_copy
Object reference type
function namespace(oNamespace, sPackage) {
// deep copy ✅
let res = oNamespace;
const arr = sPackage.split(".");
// ["a", "b", "c", "d"]
const len = arr.length;
for(let key of arr){
if(key in oNamespace){
if(typeof oNamespace[key] !== "object"){
oNamespace[key] = {};
} else {
// except
}
} else {
oNamespace[key] = {};
}
// ? 引用类型 🚀
oNamespace = oNamespace[key];
console.log(`\noNamespace ${key}`, JSON.stringify(oNamespace))
console.log(`res`, JSON.stringify(res))
// console.log(`oNamespace ${key}`, oNamespace)
// console.log(`\nres`, res)
}
console.log(`\noNamespace`, oNamespace)
console.log(`result =`, JSON.stringify(res))
return res;
}
// namespace({a: {test: 1, b: 2}}, 'a.b.c.d')
/*
// oNamespace a {"test":1,"b":2}
// res {"a":{"test":1,"b":2}}
// oNamespace b {}
// res {"a":{"test":1,"b":{}}}
// oNamespace c {}
// res {"a":{"test":1,"b":{"c":{}}}}
// oNamespace d {}
// res {"a":{"test":1,"b":{"c":{"d":{}}}}}
// oNamespace {}
// result = {"a":{"test":1,"b":{"c":{"d":{}}}}}
*/
shallow copy bug ❌
Object.assign /
function namespace(oNamespace, sPackage) {
const arr = sPackage.split(`.`).reverse();
// const arr = 'a.b.c.d'.split(`.`).reverse();
let obj = {};
for(let k of arr) {
obj = {[k]: obj}
}
// shallow copy bug ❌
return Object.assign(oNamespace, obj);
// return obj;
}
function namespace(oNamespace, sPackage) {
const arr = sPackage.split(`.`).reverse();
// const arr = 'a.b.c.d'.split(`.`).reverse();
let obj = {};
for(let k of arr) {
obj = {[k]: obj}
}
// shallow copy bug ❌
return {...oNamespace, ...obj};
// return obj;
}
deep copy OK
// deep merge objects
function isObject(item) {
return (item && typeof item === 'object' && !Array.isArray(item));
}
function mergeDeep(target, ...sources) {
if (!sources.length) return target;
const source = sources.shift();
if (isObject(target) && isObject(source)) {
for (const key in source) {
if (isObject(source[key])) {
if (!target[key]) Object.assign(target, { [key]: {} });
mergeDeep(target[key], source[key]);
} else {
Object.assign(target, { [key]: source[key] });
}
}
}
return mergeDeep(target, ...sources);
}
demos
function namespace(oNamespace, sPackage) {
const arr = sPackage.split(`.`).reverse();
// const arr = 'a.b.c.d'.split(`.`).reverse();
let obj = {};
for(let k of arr) {
obj = {[k]: obj}
}
return Object.assign({}, oNamespace, obj);
// return obj;
}
obj = namespace({a: {test: 1, b: 2}}, 'a.b.c.d')
function namespace(oNamespace, sPackage) {
const arr = sPackage.split(`.`).reverse();
// const arr = 'a.b.c.d'.split(`.`).reverse();
let obj = {};
for(let k of arr) {
obj = {[k]: obj}
}
// return Object.assign({}, oNamespace, obj);
return obj;
}
undefined
obj = namespace({a: {test: 1, b: 2}}, 'a.b.c.d')
Object.prototype.toString
Object.prototype.toString.call({})
'[object Object]'
Object.prototype.toString.call(() => {})
'[object Function]'
Object.prototype.toString.call(BigInt(1))
'[object BigInt]'
BigInt(1);
// 1n
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt
refs
根据包名,在指定空间中创建对象
Returning Object Literals from Arrow Functions in JavaScript
https://github.com/lydiahallie/javascript-questions#98-whats-the-output
https://github.com/lydiahallie/javascript-questions/issues/220#issuecomment-523736303
const getList = ([x, ...y]) => [x, y];
const getUser = user => { name: user.name; age: user.age; }
const list = [1, 2, 3, 4];
const user = { name: "Lydia", age: 21 };
console.log(getList(list));
console.log(getUser(user));
// [1, Array(3)]
// undefined
https://mariusschulz.com/blog/returning-object-literals-from-arrow-functions-in-javascript
(🐞 反爬虫测试!打击盗版⚠️)如果你看到这个信息, 说明这是一篇剽窃的文章,请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章!
©xgqfrms 2012-2021
www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/13553401.html
未经授权禁止转载,违者必究!