创建元素时如何将括号添加到最小和最大数字

Question

const liArray = [5.6, 8.7, 1.3, 10, 56];

const parentElement = document.getElementById("myDiv");

liArray.forEach((currentValue, index) => {
  var elm = document.createElement('p');
  elm.innerHTML = `${index + 1}. ${currentValue}`;
  parentElement.appendChild(elm);
});

<div id="myDiv"></div>

我有这段代码为数组中的每个项目创建一个新的段落元素，因此结果将是：

1. 5.6
2. 8.7
3. 1.3
4. 10
5. 56

但我想在创建元素时自动将圆括号() 添加到最小和最大数字，这样创建的元素就会像这样

1. 5.6
2. 8.7
3. (1.3)
4. 10
5. (56)

我该怎么做？

Answer 1

您可以使用Math.min() 和Math.max() 来获取数组中的最小值和最大值。然后，当您循环遍历数组以输出到 UI 时，如果迭代中的项目与这些值之一匹配，则可以添加括号。试试这个：

const liArray = [5.6, 8.7, 1.3, 10, 56];
const min = Math.min.apply(Math, liArray);
const max = Math.max.apply(Math, liArray);
const parentElement = document.getElementById("myDiv");

liArray.forEach((currentValue, index) => {
  var elm = document.createElement('p');
  let text = `${index + 1}. ${(currentValue == min || currentValue == max) ? `(${currentValue})` : currentValue}`;
  elm.innerText = text;
  parentElement.appendChild(elm);
});

<div id="myDiv"></div>

顺便说一句，您可以使用 ol 和 li 元素，以便 HTML 为您生成编号列表，而无需自己跟踪 index。

Answer 2

您可以使用Math.min 和Math.max 找出数组限制。 apply 仅表示您可以将数组传递给instead of a delimited list of numbers 的那些方法。

const liArray = [5.6, 8.7, 1.3, 10, 56];

const min = Math.min.apply(Math, liArray);
const max = Math.max.apply(Math, liArray);

console.log(min, max)

const parentElement = document.getElementById("myDiv");

liArray.forEach((currentValue, index) => {
  var elm = document.createElement('p');
  if (currentValue === min || currentValue === max) {
    elm.innerHTML = `${index + 1}. (${currentValue})`;
  } else {
    elm.innerHTML = `${index + 1}. ${currentValue}`;
  }
  parentElement.appendChild(elm);
});

<div id="myDiv"></div>