Question

解释起来有点奇怪，但是我有一个字符串数组，我得到了它的长度，例如5。我可以很容易地打印出数字'5'，对吧。

const myArray = ['A', 'B', 'C', 'D', 'E'];

myArray.length = 5;

但是当我想在页面上显示数字“ 1 2 3 4 5”时该怎么办，比如说每个在其单独的p标签中？我数组的内容不是数字。只有五个。如果需要的话，我需要在页面上算出。

myArray.??? = 1, 2, 3, 4, 5 or 1 2 3 4 5

如果有人有任何想法，请告诉我。

Answer 1

尽管我不确定，但这是您想要的吗？但如果我正确理解了您的问题，就让我们用简单的forEach()来做

const myArray = ['A', 'B', 'C', 'D', 'E'];

myArray.forEach((element, index)=> {
  var para = document.createElement("P"); // Create a <p> element
  var t = document.createTextNode(`${index+1}`); // Create a text node
  para.appendChild(t); // Append the text to <p>
  document.body.appendChild(para); // Append <p> to <body> 

})

Answer 2

您可以将JSX与ES6结合使用来做类似的事情：

render() {
  return <div>
    {
      myArray.map((element, index)) =>
        <p>Element #{index} is {element}</p>
    }
  </div>
}

Answer 3

如果我正确理解了您的意思，这就是您正在寻找的东西（使用ES6）：

var dt = ["a", "b","c", "d"];

for (let idx in dt)
{
  let new_node = document.createElement("p");
  new_node.innerHTML=idx;
  document.getElementById("container").appendChild(new_node);
}

<div id="container"></div>

Answer 4

这通常称为range函数。用Javascript有很多方法可以做到这一点。这是我有时使用的：

const range = (lo, hi) => [...Array(hi - lo + 1)].map((_, i) => lo + i)

const vals = ['A', 'B', 'C', 'D', 'E']

console.log(range(1, vals.length))

这不会检查您的输入是否为整数或hi >= lo。根据您的需要，这些添加起来很容易。

说明

我们首先通过从lo中减去hi值并加1来创建所需元素的数量。（之所以加1，是因为我们包括了 both range(5, 7)应该包含三个元素，而不是两个：5，6和7。）我们将此值传递给Array构造函数，会创建一个长度为n的稀疏数组。

问题在于，当Javascript尝试迭代此新数组时，它不会打扰访问丢失的元素，因此我们将其视为可迭代并将其返回为一个数组，从而将其转换为相似但不相同的数组。数组：[...Array(5)]。区别很简单。第一个数组的长度为5，但没有诸如0，1，2，3或4之类的属性。新的属性具有此类属性，每个属性的值均为undefined。（{3 in Array(5) //=> false，但3 in [...Array(5)] //=> true。）

现在，我们使用map的第二个参数映射这些值，该参数跟踪数组中元素的索引。因为我们忽略了第一个参数，所以我们给它一个一次性名称_。将该索引添加到较低的值可以得到我们的range元素。

所以range(3, 8) //=> [3 + 0, 3 + 1, 3 + 2, 3 + 3, 3 + 4, 3 + 5]是[3, 4, 5, 6, 7, 8]。

变化

如果您始终要使用1作为范围的开始，则可以编写一个没有该版本的版本，但是代码只会稍微简单一些，而功能则不太灵活。但是，如果您想要的话，那就是

const range = (hi) => [...Array(hi)].map((_i) => i + 1)

但是通过使用原始函数可以创建更大的灵活性：

const range = (lo) => (hi) => [...Array(hi - lo + 1)].map((_, i) => lo + i)
const rangeFrom1 = range(1)

您可以这样使用：

console.log(rangeFrom1(vals.length))

这为您提供了通用范围和始终从一开始的范围。

Javascript-以数字计算字符串数组的长度

4 个答案:

说明

变化