Question

我写了一个函数，它接受一个css margin属性的对象，并在数组中输出css简写所需的值。例如，如果顶部与底部相同，而右侧与左侧相同，则只需要两个值。

const marginDedupe = ({ top = 0, left = 0, right = 0, bottom = 0 }) => {
  if (top === right && top === bottom && top === left) {
    return [top];
  } else if (top === bottom && right === left) {
    return [top, right];
  } else if (right === left) {
    return [top, right, bottom];
  } else {
    return [top, right, bottom, left];
  }
};

例如：

marginDedupe(10,30,50,20); // [10,30,50,20]
marginDedupe(10,30,10,30); // [10,30]
marginDedupe(10,30,50,30); // [10,30,50]
marginDedupe(10,10,10,10); // [10]

我现在所做的工作但看起来很糟糕。有没有更简洁的方式来写这个或者这只是这样做的方式吗？

Answer 1

这种方法更简洁/ DRY - 呃 - 它不重复条件测试 - 但我不会说它更容易阅读：

const marginDedupe = ({ top = 0, left = 0, right = 0, bottom = 0 }) => {
  if (right === left) {
    if (top === bot) {
      if (top === right) return [top];
      return [top, right];
    }
    return [top, right, bottom];
  }
  return [top, right, bottom, left];
};

Answer 2

你使用Set来生成一个没有重复的数组，即

const set1 = new Set([10, 20, 30, 40]); console.log(set1); // Set(4){10, 20, 30, 40}

const set1 = new Set([10, 20, 10, 20]); console.log(set1); // Set(2){10, 20}

有没有更简洁的方法来编写JavaScript中的CSS边缘字符串

2 个答案: