代码之家 › 专栏 › 技术社区 › ItFreak

Javascript将jQuery数组压缩为一个

javascript

ItFreak · 技术社区 · 6 年前

我想把这两个数组压缩成一个数组,所以我得到一个多维(在本例中是2D)数组 [[id1, atr1], [id2, atr2], ...]
但是,下面的代码为我提供了一个1D数组,其中包含所有ID和所有属性。

map(element, index) 产生同样的结果。

var currentHTML = $('.product');
var currentId = $("body").find('.product').toArray().map(function(e){return $(e).attr("data-id-product");});    
var currentAtr = $("body").find('.product').toArray().map(function(e){return $(e).attr("data-id-product-attribute");}); 
currentHTMLMap = [];

for(i = 0;i < currentId.length; i++) {
    currentHTMLMap.push(currentId[i], currentAtr[i]);
}

以下是两个1D阵列的外观:

currentId: ["1", "6"]
currentAtr: ["1", "0"]

我的控制台屏幕截图,显示jQuery“创建的”数组:

3 回复 | 直到 6 年前

Maor Refaeli 6 年前

你曾经 Array.push element1[, ...[, elementN]] 把它们都推到阵列的末端。你需要推动 新阵列 两个元素都在里面。来解决这个问题 currentHTMLMap.push([currentId[i], currentAtr[i]]); (请注意包裹这两个元素的额外括号)。
但是,您也可以使用 Array.map 哪个更优雅。

var currentId = ["1", "6"];
var currentAtr = ["1", "0"];
var currentHTMLMap = currentId.map(function(e, i) {
  return [e, currentAtr[i]]
});

console.log(currentHTMLMap); // [[1,1], [6,0]]

顺便说一下,看看你的整个例子,你可以这么做:
使用双括号很重要,因为jQuery会展开第一个括号。

var currentHTMLMap = $('.product').map(function(i, e) {
  var $element = $(e);
  return [
    [$element.attr("data-id-product"), $element.attr("data-id-product-attribute")]
  ];
}).toArray();

console.log(currentHTMLMap); // [[1,1], [6,0]]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="product" data-id-product="1" data-id-product-attribute="1">
</div>
<div class="product" data-id-product="6" data-id-product-attribute="0">
</div>

iLuvLogix 6 年前

考虑以下几点:

let arr = [];
let arr1 = ["a","b"];
let arr2 = ["c","d"];

for(i = 0;i < arr1.length; i++) {
    arr.push([arr1[i], arr2[i]]);
}

console.log(arr);

将产生:

Benny Powers 6 年前

您不需要jQuery,但是可以引入一个名为Ramda的库

<span class="product" data-id-product="1" data-id-product-attribute="foo"></span>
<span class="product" data-id-product="2" data-id-product-attribute="bar"></span>

<script>
  // globally define DOM variables
  const products = Array.from(document.querySelectorAll('.product'));
  const currentIds = products.map(e => e.dataset.idProduct);    
  const currentAtrs = products.map(e => e.dataset.idProductAttribute); 
</script>

<!-- import a single function for modern browsers -->
<script type="module">
  import zip from 'https://unpkg.com/ramda@0.25.0/es/zip.js?module';
  const currentHTMLMap = zip(currentIds, currentAtrs)
  console.log(currentHTMLMap)
</script>

<!-- load the minified bundle for old browsers -->
<script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js" integrity="sha256-YN22NHB7zs5+LjcHWgk3zL0s+CRnzCQzDOFnndmUamY=" crossorigin="anonymous"></script>
<script nomodule>
  const currentHTMLMap = R.zip(currentIds, currentAtrs);
  console.log(currentHTMLMap)
</script>