2つのオブジェクトをマージし、プロパティをオーバーライドしますが、オーバーライドされていないプロパティを保持します。JavaScriptをオーバーライドして2つのオブジェクトをマージする
例：私は
const theme = {
colors: {
base: '#fff',
accent: '#ff0000'
}
}
と
const themeOverride = {
colors: {
accent: '#ff8900'
}
}
次のオブジェクトを持っており、JSは内蔵していない
const newTheme = {
colors: {
base: '#fff',
accent: '#ff8900'
}
}
取得するために一緒にこれらのマージしたいですこれを行う方法では、Lodash、またはUnderscoreの_.merge()またはRamdaので行うのは非常に簡単ですがあり、そのすべてがオブジェクトを再帰的にマージします。
const theme = {
colors: {
base: '#fff',
accent: '#ff0000'
}
}
const themeOverride = {
colors: {
accent: '#ff8900'
}
}
const newTheme = _.merge(theme, themeOverride);
console.log(newTheme);<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>あなただけのテーマとthemeOverrideのプロパティの色をマージしたい場合は、以下のコードでそれを行うことができます。
var theme = {
colors: {
base: '#fff',
accent: '#ff0000'
}
};
var themeOverride = {
colors: {
accent: '#ff8900'
}
};
Object.assign(theme.colors, themeOverride.colors);
console.log(theme);これは質問の特定の例に答えていますが、例題が 'theme'と' colors'と呼ばれていることを考えると、もっと広い意味では本当に助けにならないでしょう。さらにサブプロパティがあると仮定するのは安全でしょうフォント、「罫線」など）もマージする必要があります。 –
あなたはObject.assignを使用してこれらのオブジェクトをマージできます
更新既存のオブジェクト
const theme = {
colors: {
base: '#fff',
accent: '#ff0000'
}
}
const themeOverride = {
colors: {
accent: '#ff8900'
}
}
Object.assign(theme.colors, themeOverride.colors)
console.log(theme)、または新しいオブジェクトあなたは、初期値として古いthemeでreduceを使用することができます
const theme = {
colors: {
base: '#fff',
accent: '#ff0000'
}
}
const themeOverride = {
colors: {
accent: '#ff8900'
}
}
newTheme = { colors: Object.assign({}, theme.colors, themeOverride.colors) }
console.log(newTheme)多分あなたは 'Object.assign（{}、theme.colors、themeOverride.colors）' – dfsq
'Object.assign（{}、theme.colors、themeOverride.colors）' - > '{" base "：" #fff "、"アクセント "："＃ff8900 "}'しかし、それは新しい対象となるでしょう、そうです。 –
を作成します。このような何かを試してみてください：
const theme = {
colors: {
base: '#fff',
accent: '#ff0000'
},
}
const themeOverride = {
colors: {
accent: '#ff8900'
},
border: {
borderWidth: '2px'
}
}
const newTheme = Object.keys(themeOverride).reduce((prev, key) => {
prev[key] = Object.assign({}, theme[key] || {}, themeOverride[key])
return prev
}, Object.assign({}, theme))
console.log(newTheme)注意が、このソリューションは最大2レベルのネストを期待しています。
両方のオブジェクトを反復し、そのインスタンスで交差とオーバーライドを探します。そうでなければ、そのままコピーしてください。
const theme = {
colors: {
base: '#fff',
accent: '#ff0000'
}
}
const themeOverride = {
colors: {
accent: '#ff8900'
}
}
window.onload = mergeObjects(theme,themeOverride)
function mergeObjects(base,override) {
var mergedObj = {'colors' : {}};
for(key in base["colors"]) {
if(override['colors'][key] == undefined) {
mergedObj['colors'][key] = base['colors'][key]
}
else {
mergedObj['colors'][key] = override['colors'][key]
}
}
console.log('mergedObject is',mergedObj)
}あなたがオブジェクトを再帰的にアプローチして、更新のためのすべてのプロパティをiterateingでマージできます。
function merge(target, source) {
Object.keys(source).forEach(function (key) {
if (source[key] && typeof source[key] === 'object') {
merge(target[key] = target[key] || {}, source[key]);
return;
}
target[key] = source[key];
});
}
var theme = { colors: { base: '#fff', accent: '#ff0000' } },
themeOverride = { colors: { accent: '#ff8900' } };
merge(theme, themeOverride);
console.log(theme);あなたは再帰的に自分の物に目を通すと、あなたの新しい更新された値をこのように割り当てることができます。
ここで、私はそれのための関数を作った：
const theme = {
colors: {
base: '#fff',
accent: '#ff0000'
}
}
const themeOverride = {
colors: {
accent: '#ff8900'
}
}
function overrideObject(o1,o2){
var res = {};
//Go through all your attributes
for (var a in o1){
//Begin recursive method if another object is detected
if(typeof o1[a] == 'object'){
res[a] = overrideObject(o1[a],o2[a])
}
//Clone old data & update it if necessary
else{
res[a] = o1[a];
if(typeof o2[a] != 'undefined') res[a] = o2[a];
}
}
return res;
}
console.log(overrideObject(theme,themeOverride));
これは非常に多くのdownvotesを得た理由をちょっと好奇心。 – JLRishe