需要在 innerHTML 元素中将完整数组显示为字符串

Posted 2023-02-22

【中文标题】需要在 innerHTML 元素中将完整数组显示为字符串

【英文标题】：Need to display full array as a string in an innerHTML element

【发布时间】：2020-11-22 19:40:51

【问题描述】：

好的，这必须有一个简单的解决方案，但我正在为这个解决方案...

我有一个 js 代码，它按类从我的 html 中提取 ID 号。它将所有内容存储在一个数组中。我检查了该数组是否未定义且不为空。到目前为止一切顺利。

现在我需要将这个 ID 数组显示到 HTML 元素中。完整的数组应该以逗号分隔的字符串形式出现。

相关的代码：

    function makelink()    
    var idArray = $(".result");
    document.getElementById("link").innerHTML = idArray;
    
    //The result in HTML = [object Object]

当我执行以下操作时，它会完全按照我的意愿工作（当然，我不能将数组硬编码到这样的代码中）

    function makelink()  
    var idArray = ["123", "124", "125", "126"];
    document.getElementById("link").innerHTML = idArray;
    
    //The result in HTML = [123,124,125,126]

我在 *** 上阅读了至少 4 个其他类似问题，例如 What does [object Object] mean? 和 Convert javascript array to string，并据此尝试：

    document.getElementById("link").innerHTML = idArray.join();

还有：

    var idArray = $(".result");
    idArray.toString();

但我不知道如何使它适用于我的代码。我不需要警报或 console.log。我需要我的结果以 HTML 格式输出。请帮忙。

【问题讨论】：

您能在var idArray = $(".result"); 正下方做console.log(idArray) 并告诉我们回复吗？

您需要只显示数组中的数字（例如：123 124 125 126）还是整个数组（例如：["123", "124", "125", "126" ])

$(".result") 是元素的集合。你想映射这些元素的 id 吗？

你可以试试这个document.getElementById("link").innerHTML = Object.values(idArray)

@WillBlack 这不适用于 jQuery 对象，值本身就是对象

【参考方案1】：

这样做::

function makelink()   
    var idArray = ["123", "124", "125", "126"];
    document.getElementById("link").innerHTML = JSON.stringify(idArray);

【参考方案2】：

您显示的不是数组，而是 DOM 元素的 jQuery 对象。您可能需要map 函数。但是这个函数本身是不够的，你仍然需要获取结果对象的值，或者 html，但那部分是最简单的。

function makelink()    
    var idArray = $(".result").map(function(item)  
        return item.val(); 
    ).get();
    document.getElementById("link").innerHTML = idArray;

【讨论】：

jQuery map() 不返回数组，您需要链接其他方法以将结果作为数组 (get() or toArray())

【参考方案3】：

你可以试试这个：

function makelink()  
  var idArray = [];
  $(".result").each(
    function()
      idArray.push($(this).text())
    
  );
  document.getElementById("link").innerHTML = idArray.join(', ');

【讨论】：

理论上这不如使用像map这样的函数式编程函数有效，因为这将占用一个0大小的数组，并且push会使数组增长，并且在内存中这将使数组被重新分配每次超过其分配的内存空间时。它可能会被 JS 引擎优化，所以可能无关紧要。而且在大多数情况下使用不可变数据也是一个好习惯。无论如何，好的简单解决方案，没有冒犯。