Javascript:获取具有随机属性值的对象

Question

一般描述

我正在寻找一种方法来获取具有几个已定义属性和随机值的对象，这些属性和随机值会在我访问它们时发生变化。此外，我想动态覆盖属性并找到获取新对象的方法。

我想完成的事情 list

• 对象具有随机属性值
• “新实例” 或可以使用新值创建新对象
• 动态替换对象是可能的，以上两个条件仍然有效

基于代码的详细解释

var baseObj = {
    border: Math.round(Math.random() * 10 +3),
    background: 'hsl('+Math.random() * 360 + 'deg 100% 50%)'
}

通过这样做，我的 baseObj 是对一个保持不变的对象的引用。

换句话说，无论您使用 baseObj 的频率如何或访问其属性的频率如何，值都不会改变，因为执行了 Math.random() 并将值分配给对象属性。

为了克服这个问题，我将输出包装到一个我可以调用它的函数中，并获得一个具有新值的新对象:

var baseObj = () => ({
    border: Math.round(Math.random() * 10 +3),
    background: 'hsl('+Math.random() * 360 + 'deg 100% 50%)'
})

到目前为止一切顺利，但现在假设我有这个函数需要一个对象，但如果它不存在，我将使用 baseObj 作为默认值。

draw = tempObj => {
    if (!tempObj) {tempObj = baseObj;}
    div.style.borderWidth = tempObj.border + "px";
    div.style.backgroundColor = tempObj.background;
    // missing here merge the two objects
    // missing and main question how to update baseObj with new information
}
draw({
     border: Math.round(Math.random() * 55 + 20)        
})

我现在纠结的问题是如何用 tempObj 的模板覆盖“baseObj 函数模式”？

The expected result when calling draw() again without any parameters is that you get a big border of at least 20 and a random background color. Basically updating baseObj with new rules on what it's return object should be.

演示链接/片段

我在这里有一个 codepen 链接，我在其中做了更多工作，将 tempObj 与 baseObj 合并，但我仍在寻找同一问题的解决方案。 https://codepen.io/Type-Style/pen/VqMMJd?editors=0010

var div = document.querySelector("#div"),
	 getNewStyle = document.querySelector("#getNewStyle"),
	 changeStyle1 = document.querySelector("#changeStyle1"),
	 baseObj = () => ({
		 border: Math.round(Math.random() * 10 +3),
		 background: 'hsl('+Math.random() * 360 + 'deg 100% 50%)'
	 }),
	 enhancementObj = null,
	 getObj = () => (enhancementObj || baseObj()),
	 calculate = (overwriteObj) => {
		 if (!overwriteObj) {
			 var tempObj = getObj();
		 } else {
			 var tempObj = { // merge the two objects
				 ...getObj(),
				 ...overwriteObj
			 }
			 enhancementObj = tempObj; // now I have static values again :-(
		 }
		 draw(tempObj);
	 },
	 draw = tempObj => {
		 div.style.borderWidth = tempObj.border + "px";
		 div.style.backgroundColor = tempObj.background;
	 }

getNewStyle.onclick = () => {draw(getObj())};
changeStyle1.onclick = () => {calculate({
		 border: Math.round(Math.random() * 55 + 20)		
})};
	 

#div {
	width: 300px;
	height: 300px;
	box-sizing: border-box;

	border-style: dashed;
	border-radius: 50%;	
}

/* excuse me using IDs and useless Names in CSS, I know better but this is a JS Question */

<div id="div"></div>
<button id="getNewStyle">getNewStyle</button>
<br>
<button id="changeStyle1">changeStyle1</button>
<p>Press the first button to get random border-size and background color.
The second button should overite the border-size and clicking the first button again should give you a bigger border and random background color, but it doesn't.</p> 

问题/杂项

有没有比将其放入函数中更好的方法来获取新值？如果您认为它更容易理解，请随时编辑问题。

新年快乐!

Answer 1

Is there a better way to get fresh values than putting it into a function?

不，产生新值的函数(称为“工厂”)是最简单的方法。

The point where I am struggling right now is how to use the template for whatever tempObj is?

你只需要调用这个函数:

const randomObj = () => ({
    border: Math.round(Math.random() * 10 +3),
    background: 'hsl('+Math.random() * 360 + 'deg 100% 50%)'
});
function draw(tempObj) {
    if (!tempObj) tempObj = randomObj();
//                                   ^^
    div.style.borderWidth = tempObj.border + "px";
    div.style.backgroundColor = tempObj.background;
}

顺便说一句，由于您使用的是 ES6，因此您可能希望使用默认参数语法:

function draw(tempObj = randomObj()) {
    div.style.borderWidth = tempObj.border + "px";
    div.style.backgroundColor = tempObj.background;
}

---

I want to update with new rules on what it's return object should be.

只存储更新，而不是用于增强的整个 tempObj(包括随机添加)。

let enhancement = {};
function calculate(overwrite) {
    enhancement = {...enhancement, ...overwrite}; // do not merge the randomObj() here!
    const tempObj = {
        ...randomObj(),
        ...enhancement
    };
    draw(tempObj);
}