如何用jQuery .map()返回二维数组？为何返回一维数组？

问题原因 #

你遇到的情况是因为jQuery的.map()方法有个特殊行为：当回调函数返回一个数组时，它会自动将这个数组扁平化——把数组中的每个元素单独提取出来，添加到最终的结果数组里，而不是把整个数组作为单个元素保留。所以你返回[id, {sequence: index}]时，这个数组会被拆成两个独立元素，最终得到一维数组。

解决方法 #

有两种直接得到二维数组的方式，不需要事后处理结果：

方法1：让回调返回嵌套数组 #

在回调里返回一个包含目标数组的单元素数组，这样jQuery扁平化后，只会展开外层的单元素数组，保留内层的目标数组作为结果的一个元素：

$('.recipeList').find('.recipe')
  .map(function(index, element) {
    return [
      [$(element).data('id'), { sequence: index }]
    ];
  }).get();

方法2：改用原生JavaScript的Array.prototype.map() #

原生的map()方法不会做扁平化处理，直接返回你回调返回的结构。需要先通过.get()把jQuery对象转换成原生数组，再调用原生map：

$('.recipeList').find('.recipe').get()
  .map(function(element, index) {
    // 注意原生map的参数顺序是(element, index)，和jQuery相反
    return [$(element).data('id'), { sequence: index }];
  });

验证结果 #

两种方法最终都会得到你预期的二维数组：

[
  ['abc',{sequence:0}],
  ['def',{sequence:1}],
  ['ghi',{sequence:2}],
  ['jkl',{sequence:3}]
]

内容的提问来源于stack exchange，提问作者Aaron Dunigan AtLee