使用带有-分隔符的join。

const calculateElementHeight = (offset) => {
  return `calc(100vh - ${offset.join(' - ')})`;
}

const offset = ['10px', '20px', '30px'];

console.log(calculateElementHeight(offset));

在所有偏移前加上前缀" - "，然后进行连接。当列表为空时也有效。

const calculateElementHeight = (offsets) => {
    return `calc(100vh${offsets.map((offset) => " - " + offset).join("")})`;
};

console.log(calculateElementHeight(["10px", "20px", "30px"]));

只是把每一项添加到calc - surley中，你想要对所有的px值求和，并将总和作为要从100 vh中减去的金额，这有什么好处？

const calculateElementHeight = (offsetArr) => {
  const totalOffset = offsetArr.reduce((partialOffset, a) => partialOffset + parseInt(a.split('px')[0], 10), 0);
  return `calc(100vh - ${totalOffset}px)`;
}

const offsets = ['10px', '20px', '30px'];

console.log(calculateElementHeight (offsets)); // gives calc(100vh - 60px)

或者，只需将一个数字数组传递给函数，以避免使用split和parseInt（）。

const calculateElementHeight = (offsetArr) => {
      const totalOffset = offsetArr.reduce((partialOffset, a) => partialOffset + a), 0);
      return `calc(100vh - ${totalOffset}px)`;
    }

const offsets = [10, 20, 30];

console.log(calculateElementHeight (offsets)); // gives calc(100vh - 60px)

迟到的回答

与其他答案不同，这个解决方案还处理空值和未定义的输入，它不使用Array.map给每个元素附加连字符，而是简单地创建一个新数组，将“100vh”用作第一个元素。

`calc(${[minuend, ...offsets||[]].join(" - ")})`

Array.concat也可用于产生相同的输出：

`calc(${[minuend].concat(offsets||[]).join(" - ")})`;

（被减数：要减去另一个的量或数。）

片段

const calculateElementHeight = (offsets, minuend = "100vh") => 
    `calc(${[minuend, ...offsets||[]].join(" - ")})`;
    
 
console.log(calculateElementHeight(['10px', '20px', '30px']));
console.log(calculateElementHeight(['10px', '20%', '3em'], '90vh'));
console.log(calculateElementHeight([]));
console.log(calculateElementHeight(null));
console.log(calculateElementHeight());