为何空隐藏输入框值split后数组length返回1？

你使用了如下隐藏输入框：

<input id="selectedRecords" name="selectedRecords" type="hidden" />

执行以下JavaScript代码：

var keyValues = $('#selectedRecords').val().split(",").map(item => item.trim());
console.log('$(#selectedRecords).val(): [' + $('#selectedRecords').val() + ']');
console.log('keyValues: [' + keyValues + ']');
console.log('keyValues.length: [' + keyValues.length + ']');

在Brave浏览器控制台得到如下输出：

$(#selectedRecords).val(): []
keyValues: []
keyValues.length: [1]

原因解析 #

这是JavaScript中split()方法的特性导致的：

• 未赋值的隐藏输入框，$('#selectedRecords').val()返回空字符串（""）
• 对空字符串调用split(",")，并不会得到空数组，而是返回只包含一个空字符串的数组：[""]
• 后续的map(item => item.trim())处理这个空字符串，结果还是空字符串，因此最终keyValues数组为[""]
• 这个数组的元素个数是1，所以keyValues.length返回1

解决办法 #

如果想让空输入框对应的keyValues是空数组，可以在处理后过滤掉空值：

var keyValues = $('#selectedRecords').val()
  .split(",")
  .map(item => item.trim())
  .filter(item => item); // 过滤所有空值（包括空字符串、undefined等）

这样当输入框值为空时，keyValues就会变成空数组，长度为0。

内容的提问来源于stack exchange，提问作者BLoB