计算分数作为相对于其他分数的值答案

【问题标题】：Calculate fraction as value relative to other fractions计算分数作为相对于其他分数的值
【发布时间】：2019-11-06 19:59:33
【问题描述】：

抱歉，我无法显示代码，我只是不知道该怎么做。

我想用分数实现类似display: flex/grid 的效果：

给定容器宽度：200px

还有物品：[0.5, 1, 50px]

我应该能够计算相对于彼此的小数：

item1: 50 (half the size of item 2)
item2: 100 (double the size of item 1)
item3: 50 (static size not a fraction)

const totalSize = 900;

const items = [1, 0.2, 75, 0.6, 1, 100];

const totalStaticSize = items.filter(n => n > 1).reduce((acc, n) => acc + n, 0);

const derivedItems = items.map(item => {
  if (item > 1) {
    // A static value.
    return item;
  }
  
  // How to calculate this fractional item relative to others?
  return item;
});

console.log(derivedItems);

【问题讨论】：

这些项目不是有效的 javascript。值是否编码为字符串？
只是一个例子，我知道哪些是非分数的，但为此我们假设任何超过 1 的都是。添加了一个可运行的 sn-p。
item1 = (item1 / (item1 + item2)) * space available?

标签： javascript math

【解决方案1】：

减去静态项后，计算小数项之和，然后可以计算每个值相对于剩余容器宽度的百分比（减去静态项之和）：

const totalSize = 900;
const items = [1, 0.2, 75, 0.6, 1, 100];
const totalStaticSize = items.filter(n => n > 1).reduce((acc, n) => acc + n, 0);
const sum = derivedItems.reduce((a, b) => a + b, 0);
const percentages = derivedItems.map(d => d / sum);
const relativeToContainer = percentages.map(p => p * (totalSize - totalStaticSize));

【讨论】：

【解决方案2】：

let compute = (values, total) => {
  let parts = values.map(value => ({value: parseFloat(value), absolute: value.endsWith('px')}));
  let totalAbsolutes = parts.filter(p => p.absolute).reduce((sum, p) => sum + p.value, 0);
  let totalFractions = parts.filter(p => !p.absolute).reduce((sum, p) => sum + p.value, 0);
  return parts.map(p => (p.absolute ? p.value : p.value / totalFractions * (total - totalAbsolutes)) + 'px');
};

let computedValues = compute(['0.5', '1', '50px'], 200);
console.log(computedValues);

【讨论】：

输入与OP发布的不同。