解释起来有点奇怪,但是我有一个字符串数组,我得到了它的长度,例如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
如果有人有任何想法,请告诉我。
答案 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)
应该包含三个元素,而不是两个: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))
这为您提供了通用范围和始终从一开始的范围。