如何为30个日期/天项目的基于月份的数组中的每个日期分配随机温度值

Question

想象一个月有30天，随机分配一个这几天的温度，包括每一天的温度7至16°C之间的一天。这是我的代码：

let arrMonth = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,
22, 23, 24, 25, 26, 27, 28, 29, 30
]
let temperature = Math.floor(Math.random() * (16 - 7 + 1)) + 7;

for (let i = 0; i < arrMont.length; ++i) {
arrMonth[i] = temperature
console.log(arrMonth[i])
}

它只给了我最后一天的温度。我做错了什么？

控制台上：

30: 11

Answer 1

代码的一个简单扩展是将变量转换为箭头函数，如

const temperature = () => (Math.floor(Math.random() * (16 - 7 + 1)) + 7);

然后，每次你询问"temperature(("时，你都会得到一个新的值。

let arrMonth = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30
]
const temperature = () => (Math.floor(Math.random() * (16 - 7 + 1)) + 7);

for (let i = 0; i < arrMonth.length; ++i) {
arrMonth[i] = temperature()
console.log(arrMonth[i])
}

Answer 2

OP所要求的实际上是一个mapping任务。

但是，由于OP也希望提供温和的日期/日期，因此应考虑遵循关注点分离的方法(松散地说……"每个任务都是一个单一的功能">(。

因此，OP可以处理不同的任务，例如使其适应OP的需求。。。

function getRandomValueFromTemperatureRange() {
// returns random values in between 7 and 16 inclusively.
return (Math.floor(Math.random() * 10) + 7);
}
function createTemperedDateItem(date) {
return {
date,
temperature: getRandomValueFromTemperatureRange(),
};
}
function renderTemperedDateItems(dateList) {
const listRootNode = document.createElement('dl');
dateList.forEach(dateItem => {
const { date, temperature } = dateItem;
const dateNode = document.createElement('dt');
const temperatureNode = document.createElement('dd');
dateNode.title = 'Date within Month';
temperatureNode.title = 'Temperature in °C';
dateNode.textContent = date;
temperatureNode.textContent = temperature;
listRootNode.appendChild(dateNode);
listRootNode.appendChild(temperatureNode);
});
document.body.appendChild(listRootNode);
}
const arrMonth = Array.from(
{ length: 30},
(elm, idx) => (idx + 1)
);
console.log({
arrMonth,
temperedDateList: arrMonth.map(createTemperedDateItem),
});
renderTemperedDateItems(
arrMonth.map(createTemperedDateItem)
);

dl { margin: 0!important; }
dl::after { clear: both; display: block; content: ''; }
dt { float: left; }
dd::after { display: inline; content: ' °C'; }
body { margin: 0 0 100px 0!important; }
.as-console-wrapper { max-height: 100px!important; }