前端之家

  1. 首页
  2. 问答

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

• 问答

我无法显示代码的道歉，只是不确定该如何处理。

我想用分数实现类似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,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);

zqscydqyzj 回答：计算分数作为相对于其他分数的值

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

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));
, 

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,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);

javascriptmath
本文链接：https://www.f2er.com/3149289.html

大家都在问