将复杂数据属性推入一个数组的问题

Question

我正在研究下面的演示。如何将age属性中的所有数据加载到一个数组中，看起来像这样？

 out = [48,14,139,49,15,135,51,15,140,49,15,135,51,15,140,52,16,141] 

let agesindx =[];
$(".box").each(function(){
    //agesindx.push($(this).data('ages').split(','));
    agesindx.push($(this).data('ages'));
  });
 console.log(agesindx);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="box" data-ages="[48, 14, 139]"></div>
<div class="box" data-ages="[49,15,135],[51,15,140]"></div>
<div class="box" data-ages="[49,15,135],[51,15,140],[52,16,141]"></div>

Answer 1

data-ages应该是data-ages="[[48, 14, 139]]"

之类的数组

使用flat()获取串联的子数组元素

let agesindx = [];
$(".box").each(function() {
  agesindx.push($(this).data('ages'));
});
console.log(agesindx.flat());
console.log(agesindx.flat(2));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="box" data-ages="[[48, 14, 139]]"></div>
<div class="box" data-ages="[[49,15,135],[51,15,140]]"></div>
<div class="box" data-ages="[[49,15,135],[51,15,140],[52,16,141]]"></div>

OR

使用JSON.parse()

let agesindx = [];
$(".box").each(function() {
  agesindx.push(JSON.parse('[' + $(this).data('ages').toString() + ']'));
});
console.log(agesindx);
console.log(agesindx.flat(2));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="box" data-ages="[48, 14, 139]"></div>
<div class="box" data-ages="[49,15,135],[51,15,140]"></div>
<div class="box" data-ages="[49,15,135],[51,15,140],[52,16,141]"></div>

Answer 2

您可以使用JSON.parse从字符串中解析数组。 然后，您将在数组内得到一个数组，依此类推。因此，最后您可以执行join和split，这将为您提供单个数组。

let agesindx =[];
$(".box").each(function(){
    //agesindx.push($(this).data('ages').split(','));
    let x = JSON.parse('['+$(this).data('ages')+']');
    // console.log(JSON.parse('['+$(this).data('ages')+']'));
    agesindx.push(x);
  });
  
 console.log(agesindx.join().split(',') );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="box" data-ages="[48, 14, 139]"></div>
<div class="box" data-ages="[49,15,135],[51,15,140]"></div>
<div class="box" data-ages="[49,15,135],[51,15,140],[52,16,141]"></div>

Answer 3

如果您的data-ages属性中有适当的数组，例如[[49,15,135],[51,15,140]]，则可以使用map()上的box函数获得数组数组元素列表。然后，您可以使用$.map对其进行展平-参见下面的演示

let result = $.map($(".box").map(function() {
  return $(this).data('ages');
}).get(), function(e) {
  return e;
});
console.log(result);

.as-console-wrapper{top:0;max-height:100%!important;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="box" data-ages="[48, 14, 139]"></div>
<div class="box" data-ages="[[49,15,135],[51,15,140]]"></div>
<div class="box" data-ages="[[49,15,135],[51,15,140],[52,16,141]]"></div>

在ES6中缩短了：

let result = $.map($(".box").map((idx, el) => $(el).data('ages')).get(), e => e);
console.log(result);

.as-console-wrapper{top:0;max-height:100%!important;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="box" data-ages="[48, 14, 139]"></div>
<div class="box" data-ages="[[49,15,135],[51,15,140]]"></div>
<div class="box" data-ages="[[49,15,135],[51,15,140],[52,16,141]]"></div>

Answer 4

push未将单个整数添加到数组，因为后两个数据年龄是字符串。您可以使用正则表达式仅提取数字并用match组成一个数组，推到agesindx，然后在最后将拼合的嵌套数组展平。

let agesindx =[];
$(".box").each(function(){
    let ages = String($(this).data('ages')).match(/\d+/g);
    agesindx.push(ages);
});
console.log(agesindx.flat());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="box" data-ages="[48, 14, 139]"></div>
<div class="box" data-ages="[49,15,135],[51,15,140]"></div>
<div class="box" data-ages="[49,15,135],[51,15,140],[52,16,141]"></div>

Answer 5

好吧，您可以使用JSON.parse来获取数据作为数组，然后使用concat进行合并，例如：Merge/flatten an array of arrays

$(document).ready(function(){
  var dataList = $(".box").map(function() {
    return JSON.parse('['+ $(this).data("ages")+']');
  }).get();
  
  var merged = [].concat.apply([], dataList);
  console.log(merged);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="box" data-ages="[48, 14, 139]"></div>
<div class="box" data-ages="[49,15,135],[51,15,140]"></div>
<div class="box" data-ages="[49,15,135],[51,15,140],[52,16,141]"></div>

Answer 6

此代码以所示的输出格式完全按照要求解决了OP的问题，而无需修改html数据属性：

let agesindx =[];
$(".box").each(function(){
    var tmpArr = $(this).data('ages')
    if( typeof tmpArr == 'string' )
    	tmpArr = JSON.parse(tmpArr.replace(/\]\,\[/g, ','));
    agesindx = agesindx.concat(tmpArr); 
  });
 console.log(agesindx)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box" data-ages="[48, 14, 139]"></div>
<div class="box" data-ages="[49,15,135],[51,15,140]"></div>
<div class="box" data-ages="[49,15,135],[51,15,140],[52,16,141]"></div>

但是，如果可以确保每个元素的数据类型一致性都相同，那么代码可能更易于展平（re：kukkuz的答案）。