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

时间:2018-10-17 15:47:26

标签: javascript html arrays

解释起来有点奇怪,但是我有一个字符串数组,我得到了它的长度,例如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

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

4 个答案:

答案 0 :(得分:2)

尽管我不确定,但这是您想要的吗?但如果我正确理解了您的问题,就让我们用简单的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> 

})

答案 1 :(得分:2)

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

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

答案 2 :(得分:1)

如果我正确理解了您的意思,这就是您正在寻找的东西(使用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>

答案 3 :(得分:1)

这通常称为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)应该包含三个元素,而不是两个:567。)我们将此值传递给Array构造函数,会创建一个长度为n的稀疏数组。

问题在于,当Javascript尝试迭代此新数组时,它不会打扰访问丢失的元素,因此我们将其视为可迭代并将其返回为一个数组,从而将其转换为相似但不相同的数组。数组:[...Array(5)]。区别很简单。第一个数组的长度为5,但没有诸如01234之类的属性。新的属性具有此类属性,每个属性的值均为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))

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