javascript - 根据给定值选择相关的颜色代码

Question

因此，如果zoneTempDiff1的值小于假设的1.5，则应考虑temp：1颜色；如果zoneTempDiff1的值大于1.5，则应考虑temp：2颜色。
同样，对于所有不同的值，如果它是-1或-2或0或1或2或3或4或5，则相应的温度值颜色
如果zoneTempDiff1的值大于+6或-6，则应采用相应的temp：-6或temp：+6颜色

floor.entities.forEach(elementId => {

  let objTemp: any = {};

  objTemp.currentTemp = 68;
  (values might be different)
  objTemp.desiredTempHeating = 70.5;
  (values might be different)

  let zoneTempDiff1 = objTemp.currentTemp - objTemp.desiredTempHeating;
  let tempColor1 = this.temperatureColors.filter(color => zoneTempDiff1 < (color.temp + 1) && zoneTempDiff1 > (color.temp - 1));
  objTemp.tempColorToInsert = tempColor1.color;

  floor.droppeditem.push(objTemp);
});

temperatureColors: any = [{
    color: '#50B3D3',
    temp: -6
  },
  {
    color: '#25CBE4',
    temp: -4
  },
  {
    color: '#25CBE4',
    temp: -3
  },
  {
    color: '#7EE2DD',
    temp: -2
  },
  {
    color: '#7EE2DD',
    temp: -1
  },
  {
    color: '#89DE6F',
    temp: 0
  },
  {
    color: '#89DE6F',
    temp: 1
  },
  {
    color: '#D2E143',
    temp: 2
  },
  {
    color: '#D2E143',
    temp: 3
  },
  {
    color: '#FDCB31',
    temp: 4
  },
  {
    color: '#FDCB31',
    temp: 5
  },
  {
    color: '#F59A4A',
    temp: 6
  }
];

Answer 1

您到底要问什么？

我们这样调用函数：

getColor(68, 78, colors);

我们传入当前温度，所需温度和颜色对象数组。

const getColor = (current, desired, colors) => {

然后，我们找出温度之间的差异，并将其round精确到整数。

const diff = Math.round(current - desired);

我们获取colors数组中最后一个元素的索引

const last = colors.length - 1;

现在，我们检查差异是否小于或等于数组的第一个颜色对象中给定的temp属性。如果是这样，我们可以返回颜色，我们就完成了。

if (diff <= colors[0].temp) return colors[0].color;

这里基本上是一样的，但是我们检查是否大于或等于数组中最后一个颜色对象中的温度。

if (diff >= colors[last].temp) return colors[last].color;

由于它不是这两者之一，因此我们需要遍历数组和find等于diff的对象。

return colors.find(color => diff === color.temp).color;

这有帮助吗？

const colors = [{
    color: '#50B3D3',
    temp: -6
  },
  {
    color: '#25CBE4',
    temp: -5
  },
  {
    color: '#25CBE4',
    temp: -4
  },
  {
    color: '#25CBE4',
    temp: -3
  },
  {
    color: '#7EE2DD',
    temp: -2
  },
  {
    color: '#7EE2DD',
    temp: -1
  },
  {
    color: '#89DE6F',
    temp: 0
  },
  {
    color: '#89DE6F',
    temp: 1
  },
  {
    color: '#D2E143',
    temp: 2
  },
  {
    color: '#D2E143',
    temp: 3
  },
  {
    color: '#FDCB31',
    temp: 4
  },
  {
    color: '#FDCB31',
    temp: 5
  },
  {
    color: '#F59A4A',
    temp: 6
  }
];

const getColor = (current, desired, colors) => {
  const diff = Math.round(current - desired);
  const last = colors.length - 1;
  if (diff <= colors[0].temp) return colors[0].color;
  if (diff >= colors[last].temp) return colors[last].color;
  return colors.find(color => diff === color.temp).color;
}

console.log(getColor(68, 78, colors));
console.log(getColor(78, 68, colors));
console.log(getColor(78, 72, colors));
console.log(getColor(78, 73, colors));
console.log(getColor(73, 78, colors));
console.log(getColor(73, 73.8, colors));
console.log(getColor(73, 73.4, colors));

好的，新功能。

这次我们只获取差异，然后使用Array.reduce从数组中选择所需的颜色对象。它的代码更少（地道，它是单行代码），但解密起来却有点困难。它也更具弹性，您不需要输入阵列中的每个温差。

temperatureColors = [{
    color: '#50B3D3',
    temp: -6
  },
  {
    color: '#25CBE4',
    temp: -4
  },
  {
    color: '#25CBE4',
    temp: -3
  },
  {
    color: '#7EE2DD',
    temp: -2
  },
  {
    color: '#7EE2DD',
    temp: -1
  },
  {
    color: '#89DE6F',
    temp: 0
  },
  {
    color: '#89DE6F',
    temp: 1
  },
  {
    color: '#D2E143',
    temp: 2
  },
  {
    color: '#D2E143',
    temp: 3
  },
  {
    color: '#FDCB31',
    temp: 4
  },
  {
    color: '#FDCB31',
    temp: 5
  },
  {
    color: '#F59A4A',
    temp: 6
  }
];

const getColor2 = (current, desired, colors) => colors.reduce((acc, cur) => (current - desired) >= cur.temp ? cur : acc).color;

console.log(getColor2(68, 78, temperatureColors));
console.log(getColor2(78, 68, temperatureColors));
console.log(getColor2(78, 73, temperatureColors));
console.log(getColor2(73, 78, temperatureColors));
console.log(getColor2(73, 73.8, temperatureColors));
console.log(getColor2(73, 73.4, temperatureColors));

降低

Reduce在数组上工作。它将每个数组元素提供给回调，并最终返回单个值。

例如，假设我们有一个数组[1, 2, 3]。一个简单的例子是将数组简化为所有元素的总和。 reduce回调是所有魔术的全部。

回调获得4个参数：一个累加器，当前元素，当前元素的索引以及数组本身。

让我们来看一下累加器。这是难题的魔力。累加器的值在数组的每个“循环”中均可用。因此，如果回调返回某些内容，它将被放置在累加器中。当reduce循环遍历每个元素时，它将返回累加器。这是最终返回的单个值。

因此，从本质上讲，提供给reduce函数的回调就在那里操纵累加器。

累加器从什么开始？那要看。

[1, 2, 3].reduce(callback);

累加器将从第一个数组元素（1）开始，并在第二个元素处开始循环。

[1, 2, 3].reduce(callback, 0);

在这里，我们将累加器初始化为零，并且reduce将开始与第一个元素循环。

因此，如果我们要添加数组，我们可以说：

[1, 2, 3].reduce( (accumulator, current) => accumulator + current )

这会将当前值添加到累加器并返回它，并继续对数组的每个元素执行此操作。

在这种情况下：

const getColor2 = (current, desired, colors) => colors.reduce((acc, cur) => (current - desired) >= cur.temp ? cur : acc).color;

我们遍历您的对象数组。如果温度差大于或等于当前对象中的温度，则我们将该对象设置为累加器。完成后，返回累加器，然后弹出一个对象。

您可以使用Array.find，但这需要进行更复杂的比较，该比较必须确定您的差异是否在两个值之间。我只是不断浏览并更新最终值。

嘿，-1比-6大吗？是啊酷，-6是我们的男孩。下一个循环，嘿，-1是否大于-4？是的，好的，-4是我们想要的。下一个循环大于-1。最终，您命中了0，累加器停止更新。它循环遍历数组的其余元素，并确定它不大于任何这些值，因此累加器永远不会更新。我们分配给累加器的最后一件事被吐出来，那就是我们想要的对象。