将括号添加到字符串数组中的最小和最大数字

Question

此代码将为数组中的每个索引创建一个p 元素，并将括号放在数组中的最低和最高数字上

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) => {
  const elm = document.createElement('p');
  let text = `${index + 1}. ${(currentValue == min || currentValue == max) ? `(${currentValue})` : currentValue}`;
  elm.innerText = text;
  parentElement.appendChild(elm);
});

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

但是我的数组是这样的

const liArray = ["5.6 hello", "8.7 hi", "1.3 hey", "10 hi", "56 hello"]

我还想在最小和最大数字上添加括号并像这样输出

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

这是我尝试过的：

我尝试了这段代码，将数字和字母分成 2 个不同的数组，这样我就可以将最大值和最小值应用于数字

const liArray = ["5.6 hello", "8.7 hi", "1.3 hey", "10 hi", "56 hello"];
const parentElement = document.getElementById("myDiv");

const getNumbers = liArray.map((i) => Number(i.replace(/[^0-9.]/g, "")));
const getWords = liArray.map((i) => i.replace(/[0-9.]/g, ""));

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

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

但它会输出这个

2. 8.7. hello, hi, hey, hi, hello

3. (1.3). hello, hi, hey, hi, hello

4. 10. hello, hi, hey, hi, hello

5. (56). hello, hi, hey, hi, hello

Answer 1

这是你想要的吗？您只是忘记获取 getwords 数组的元素。

const liArray = ["5.6 hello", "8.7 hi", "1.3 hey", "10 hi", "56 hello"];
const parentElement = document.getElementById("myDiv");

const getNumbers = liArray.map((i) => Number(i.replace(/[^0-9.]/g, "")));
const getWords = liArray.map((i) => i.replace(/[0-9.]/g, ""));

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

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

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

Answer 2

您正在调用您的方法getWords 来显示单词，但它返回的是所有单词的数组。使用${getWords[index]} 之类的索引调用此方法以获取您需要的内容。

Answer 3

你可以试试这个

const liArray = ["5.6 A", "8.7 B", "1.3 C", "10 D", "56 E"];
const min = liArray.reduce((acc, cur) => {
  const cur1 = parseFloat(cur);
  const acc1 = parseFloat(acc);
  return !acc ? cur : acc1 > cur1 ? cur : acc;
  }, null);
  const max = liArray.reduce((acc, cur) => {
  const cur1 = parseFloat(cur);
  const acc1 = parseFloat(acc);
  return !acc ? cur : acc1 < cur1 ? cur : acc;
  }, null);
const parentElement = document.getElementById("myDiv");

liArray.forEach((currentValue, index) => {
  const elm = document.createElement('p');
  let text = `${index + 1}. ${(currentValue == min || currentValue == max) ? `(${currentValue.replace(/[^0-9.]/g, "")})${currentValue.replace(/[0-9.]/g, "")}` : currentValue}`;
  elm.innerText = text;
  parentElement.appendChild(elm);
});

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

我只是将您的 min-max find 方法更改为 reduce array 方法，以获得所需的输出

Answer 4

您可以获取一个数字数组并检查该数组的最小值和最大值。

const
    array = ["5.6 hello", "8.7 hi", "1.3 hey", "10 hi", "56 hello"],
    values = array.map(s => +s.split(' ', 1)),
    min = Math.min(...values),
    max = Math.max(...values),
    parentElement = document.getElementById("myDiv");

array.forEach((currentValue, index) => {
    const elm = document.createElement('p');
    elm.innerText = `${index + 1}. ${values[index] == min || values[index] == max
        ? currentValue.split(' ').map((s, i) => i ? s : `(${s})`).join(' ')
        : currentValue}`;
  
    parentElement.appendChild(elm);
});

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

带有真实列表的版本。

const
    array = ["5.6 hello", "8.7 hi", "1.3 hey", "10 hi", "56 hello"],
    values = array.map(s => +s.split(' ', 1)),
    min = Math.min(...values),
    max = Math.max(...values),
    ol = document.createElement('ol');

document.body.appendChild(ol);

array.forEach((currentValue, index) => {
    const li = document.createElement('li');
    li.innerText = values[index] == min || values[index] == max
        ? currentValue.split(' ').map((s, i) => i ? s : `(${s})`).join(' ')
        : currentValue;
  
    ol.appendChild(li);
});