Question

我正在使用JavaScript读取包含数组的HTML元素，但我想它只是数组的字符串版本。因此，我将其转换为javscript整数数组，但是当HTML数组为空时，我遇到了问题。

HTML ：（空数组）

<div id="activelist"> [] </div>

HTML ：（数组包含值）

<div id="activelist"> [4, 5] </div>

我在脚本中使用let activeMachines = document.getElementById("activelist").innerHTML;来获取页面中的值。

如果我console.log(activeMachines);会在数组为空时返回[]。

如果我console.log(activeMachines);，则当数组包含值时它将返回[3, 5]。

现在将其处理为我使用的javascript整数数组：

//trim off the quotes and brackets
activeMachines = activeMachines.slice(2, -2);

//split into different objects
activeMachines = activeMachines.split(', ');

console.log(activeMachines.length);

现在我不知道的部分：

当数组为空时，console.log(activeMachines.length);将返回1

当数组中包含值时，console.log(activeMachines);将返回1

当数组中有两个值console.log(activeMachines);时将返回2

是否有一种方法可以使array.length为0为空？也许.length是错误的运算符？

感谢您的帮助！

Answer 1

您可以使用JSON.parse并返回一个数组。

function getValue(id) {
    return JSON.parse(document.getElementById(id).innerHTML);
}

var data = ['activelist0', 'activelist1'].map(getValue);

console.log(data[0].length);
console.log(data[0]);
console.log(data[1].length);
console.log(data[1]);

<div id="activelist0"> [] </div>
<div id="activelist1"> [4, 5] </div>

Answer 2

使用JSON.parse，我们可以解析innerHTML并获取要评估的实际类型。请确保将其包装在try catch中，否则将因为在div中没有用于内容的验证程序而遇到错误。

这是一个简单的例子：

var activeList = document.querySelectorAll('.active-list');
var debug = document.getElementById('debug');

activeList.forEach(function(elem, index) {
  try {
    var arr = JSON.parse(elem.textContent);
    debug.innerHTML += (index + 1) + ' result length is: ' + arr.length + '<br/>';
  } catch (error) {
    debug.innerHTML += (index + 1) + ' error';
  }
});

<div class="active-list">[4, 5]</div>
<div class="active-list">[1]</div>
<div class="active-list">[]</div>
<div class="active-list">this should invoke an error!</div>
<br/>
<div id="debug"></div>

Answer 3

另一种选择：

// declaring a named function, using Arrow syntax:
const parseArray = (el) => {

  // retrieving the text content of the current element ('el'),
  // removing any leading and trailing spaces using
  // String.prototype.trim() and then replacing the '['
  // and ']' characters using String.prototype.replace,
  // along with a regular expression; replacing those
  // characters with an empty string:
  let values = el.textContent.trim().replace(/\[|]/g, ''),

    // if the length of the modified String is zero then we
    // return an empty Array; otherwise w split the the
    // String using String.prototype.split(), to split
    // the String into an Array:
    result = values.length === 0 ? [] : values.split(',');

  // logging the result:
  console.log(result);

  // returning the result to the calling context:
  return result;
}

// using document.querySelectorAll() to retrieve all <li>
// elements on the page, and then calling NodeList.prototype.forEach()
// in order to call the named function (note the deliberate lack of
// parentheses on the function name):
document.querySelectorAll('li').forEach(parseArray);

const parseArray = (el) => {
  let values = el.textContent.trim().replace(/\[|]/g, ''),
    result = values.length === 0 ? [] : values.split(',');
  console.log(result);
  return result;
}

document.querySelectorAll('li').forEach(parseArray);

<ul>
  <li>[]</li>
  <li>["1","2","3"]</li>
  <li>[a,b,,d,e]</li>
</ul>

JS Fiddle demo。

参考文献：

Answer 4

将数据模型与表示混合是一种不好的做法。更好的方法是将两者分开。例如：

var myData = [1,2,3];

function renderData(data)
{
  return data.join(", ");
}

因此，您可以操纵myData并始终获得正确的结果，而与如何呈现数据无关。

将HTML元素转换为数组并处理null

4 个答案: