Question

我有一组具有某些数据属性的元素。我可以将单个数据属性加载到数组dataAraay的数组中，但是在data-size上就像字符串格式的数组数组一样，我不知道如何将它们加载到dataArray中完全像

dataArray = [
        ["1","true","X1","48","14","139", "android"], 
        ["1","true","X1","49","15","135","51","15","140","ios"],
        ["1","true","X1","49","800","135","51","200","140","52","14","141" "windows"]
]

我该如何解决？

let dataArray = [];

$(".data").each(function(){
dataArray.push([ $(this).data('number'),
            $(this).data('avaiable'),
            $(this).data('brand'),
            // I have issue here on loading the zies into each array
            $(this).data('app')
          ]);

});
console.log(dataArray);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="data" data-number="1" data-avaiable="true" data-brand="X1" data-size="[48, 14,139]" data-app="android" ></div>
<div class="data" data-number="3" data-avaiable="false" data-brand="M200" data-size="[49,15,135],[51,15,140]" data-app="ios" ></div>
<div class="data" data-number="5" data-avaiable="true" data-brand="T500" data-size="[49,800,135],[51,200,140],[52,16,141]" data-app="windows" ></div>

Answer 1

您可以将data-size属性值括在方括号中，之后可以JSON.parse对其进行获取，以从中获取数组数组。然后，将数组展平，并将大小项目转换为字符串：

const dataArray = [...$(".data")].map(({ dataset }) => {
  const { number, avaiable, brand, size, app } = dataset;
  const flattenedStringSize = JSON.parse('[' + size + ']')
    .flat()
    .map(String);
  return [number, avaiable, brand, ...flattenedStringSize, app];
});
console.log(dataArray);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="data" data-number="1" data-avaiable="true" data-brand="X1" data-size="[48, 14,139]" data-app="android"></div>
<div class="data" data-number="3" data-avaiable="false" data-brand="M200" data-size="[49,15,135],[51,15,140]" data-app="ios"></div>
<div class="data" data-number="5" data-avaiable="true" data-brand="T500" data-size="[49,800,135],[51,200,140],[52,16,141]" data-app="windows"></div>

如果可能，还应修复avaiable的拼写，否则可能会给以后的代码读者造成混乱。

使用Array.prototype.map和dataset使得jQuery的包含几乎毫无意义-您可以使用$()切换querySelectorAll调用，并且可以删除完全依赖外部库：

const dataArray = [...document.querySelectorAll(".data")].map(({ dataset }) => {
  const { number, avaiable, brand, size, app } = dataset;
  const flattenedStringSize = JSON.parse('[' + size + ']')
    .flat()
    .map(String);
  return [number, avaiable, brand, ...flattenedStringSize, app];
});
console.log(dataArray);

<div class="data" data-number="1" data-avaiable="true" data-brand="X1" data-size="[48, 14,139]" data-app="android"></div>
<div class="data" data-number="3" data-avaiable="false" data-brand="M200" data-size="[49,15,135],[51,15,140]" data-app="ios"></div>
<div class="data" data-number="5" data-avaiable="true" data-brand="T500" data-size="[49,800,135],[51,200,140],[52,16,141]" data-app="windows"></div>

Answer 2

“某些性能”的答案是正确的，并且比以下答案要好得多，但是我认为以下答案对于基本的程序员来说更容易理解。

这段代码可以完成您的工作（我按了最后的操作data-app，因为这是您想要的方式），除了它在大.push()之后排了很长的一行。该行的作用是

它获取size数据
将其从数组转换为字符串
替换所有括号，使其成为一个字符串，其中所有“大小”均用逗号分隔
在逗号上分割字符串以使其成为具有 ALL 个大小值的数组
遍历该数组并将当前值推入dataArray

当然，最后，它会推动data-app使其成为您想要的顺序。

let dataArray = [];

$(".data").each(function(i) {
  dataArray.push([$(this).data('number'),
    $(this).data('avaiable'),
    $(this).data('brand')
  ]);
  $(this).data('size').toString().replace(/[\[\]]/g, '').split(",").forEach(e => dataArray[i].push(e));
  dataArray[i].push($(this).data('app'));
});
console.log(dataArray);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="data" data-number="1" data-avaiable="true" data-brand="X1" data-size="[48, 14,139]" data-app="android"></div>
<div class="data" data-number="3" data-avaiable="false" data-brand="M200" data-size="[49,15,135],[51,15,140]" data-app="ios"></div>
<div class="data" data-number="5" data-avaiable="true" data-brand="T500" data-size="[49,800,135],[51,200,140],[52,16,141]" data-app="windows"></div>

附带说明：：这不会影响您代码中的任何内容，但是正如他的回答中提到的“某些性能”，请将avaiable的拼写更改为available（正确的拼写）。它使阅读您的代码的人的困惑减少了。

Answer 3

这是使用concat方法的另一种解决方案。

let dataArray = [];

    $(".data").each(function(){
              var size = $(this).data('size').toString();
              size = size.replace(/[\[\]]/g, '').split(',');
                var item = [ $(this).data('number').toString(),
                $(this).data('avaiable').toString(),
                $(this).data('brand'),
              ].concat(size);
    item = item.concat($(this).data('app'));
    //console.log(item);
    dataArray.push(item);

    });

let dataArray = [];

$(".data").each(function(){
          var size = $(this).data('size').toString();
          size = size.replace(/[\[\]]/g, '').split(',');
            var item = [ $(this).data('number').toString(),
            $(this).data('avaiable').toString(),
            $(this).data('brand'),
          ].concat(size);
item = item.concat($(this).data('app'));
//console.log(item);
dataArray.push(item);

});
console.log(dataArray);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="data" data-number="1" data-avaiable="true" data-brand="X1" data-size="[48, 14,139]" data-app="android"></div>
<div class="data" data-number="3" data-avaiable="false" data-brand="M200" data-size="[49,15,135],[51,15,140]" data-app="ios"></div>
<div class="data" data-number="5" data-avaiable="true" data-brand="T500" data-size="[49,800,135],[51,200,140],[52,16,141]" data-app="windows"></div>

将复杂属性数据加载到数组数组时遇到问题

3 个答案: