将空值映射到数组

Question

为什么下面的代码中null没有被添加到keys数组中？

HTML

<input type="radio" data-codekey="1"/>
<input type="radio" data-codekey="null"/>

JS

$(function(){

  var keys = $step.find('input[type="radio"]').map(function (i, el) {

        return $(el).data('codekey');

  }).get();

console.log(keys); // [1]
//desired result: [1, null]

});

http://jsfiddle.net/Mewem/

- Johan

Answer 1

来自 .map()文档:

如果函数返回null或undefined，不会插入任何元素。

.data() 函数进行类型转换，并（显然）假定字符串 "null" 应该转换为值 null。它还将字符串 "1" 转换为数字 1。

使用 .attr() 代替 .data()，您将获得实际的字符串 "null"：

return $(el).attr('data-codekey');

如果你想要一个真正的null值，你不能使用.map()，你必须使用.each()循环或其他方法进行重写：

如果您想获得实际的null值，则无法使用.map()函数，您必须使用.each()循环或其他方式进行重写：

var keys = [];
$step.find('input[type="radio"]').each(function () {
    keys.push( $(this).data('codekey') );
});

- nnnnnn

---

好的，我会使用 each() 手动将它们推送到结果数组中。谢谢。 - Johan

对于搜索 ES6 Array.map 的人来说，它的功能与这个答案不同。返回 falsey 将添加到数组中。 - LessQuesar

@LessQuesar - 是的，这是关于jQuery的$.map() - 它确实保留了其他falsey值，但不包括null或undefined。自从写下这个答案（那是几年前的事情）以来，我发现使用jQuery函数返回[null]（即返回一个带有null元素的数组）将把null放入新数组中。或者使用.call()或.apply()来使用具有jQuery对象的本地.map()。 - nnnnnn

Answer 2

一年多后，似乎map()的情况已经改变，或者原始答案在文档中漏掉了某些内容。

该函数可以返回：

• 将被映射到结果数组的翻译值
• null或undefined，以删除该项
• 值数组，将被展开成完整的数组

解决方案在最后一个项目中：只需返回包含单个元素的数组，即使它是null。数组将被展开到结果中，而null不会被删除：

$([ null, null, null, 1, null]).map(function (i, el) {
    return [ el ];
}).get();

获取此结果：

[ null, null, null, 1, null ]

- Lee

---

当您参考文档时，应该引用正确的map方法：http://api.jquery.com/map/ - Johan

很好的解决方案。我使用这种方法来避免“null”字符串：function(el) { if (!el) {el = ""} return el } - Fco

Answer 3

如果函数返回null或undefined，则不会插入任何元素。

文档

您可以像这样转换为字符串：

$(el).data('codekey') + "";

阅读此内容：JavaScript中的字符串转换

- gdoron

Answer 4

空值不会被插入其中

在这里查看

- PSR

Answer 5

你可以将 .get() 调用放在 .map() 之前。这样你就可以使用更可预测的 Array.map() 函数，它允许 null 值：

var keys = $step.find('input[type="radio"]').get().map(function (el) {
    return $(el).data('codekey');
});

- Joel Christophel