jQuery/JS 中的动态多维数组

Posted 2023-05-09

【中文标题】jQuery/JS 中的动态多维数组

【英文标题】：dynamic multidimensional array in jQuery/JS

【发布时间】：2020-09-07 03:11:59

【问题描述】：

我想在 jQuery/JS 中创建一个动态多维数组。但我无法让它工作：

var abc; // tried abc = [];

for (var i = 0; i < 3; i++) 
  $('#' + i).children().each(function() 
    abc[i][] = $(this).val(); // tried with abc[i].push(), abc[i][n] = ...
  );

预期结果：

Array (2)
0 Array (1)
0 ["abc", "abc", "abc", "abc", "abc", "abc"] (6)
1 Array (1)
0 ["abc", "abc", "abc", "abc", "abc", "abc"] (6)

有人可以给我提示吗？

ERROR: undefined is not an object 或 Unexpected token ']'

【问题讨论】：

abc 未定义。 undefined[i] 应该可以识别为一个问题。 abc[i][] 也不是您创建新子数组的方式。应该是abc[i] = somearray

您需要将abc 初始化为一个数组，正如您所尝试的那样，然后将该数组的每个元素也初始化为一个数组：abc[i] = []

@Taplar So abc[i] = [$(this).val()];?

可能是的。这在语法上是正确的。虽然你应该使用this.value 而不是$(this).val()

更像var abc=[]; for(i..) abc[i]=[]; children.each abc[i].push(this.value)

【参考方案1】：

在 jQuery/JS 中创建一个动态多维数组

创建基本数组，然后将第一个维度中的每一个初始化为一个新数组，以便将值推入第二个维度。

var arr = [];
for (var i = 0; i < 3; i++) 
  arr[i] = [];
  $('#div' + i).children().each(function() 
    arr[i].push(this.value);
  );

var arr = [];
for (var i = 0; i < 3; i++) 
  arr[i] = [];
  $('#div' + i).children().each(function() 
    arr[i].push(this.value);
  );

console.log(arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrapper' id="div0">
      <input type='text' value="abc1-1">
      <input type='text' value="abc1-2">
      <input type='text' value="abc1-3">
      <input type='text' value="abc1-4">
      <input type='text' value="abc1-5">
    </div>
    <div class='wrapper' id="div1">
      <input type='text' value="abc2-1">
      <input type='text' value="abc2-2">
      <input type='text' value="abc2-3">
      <input type='text' value="abc2-4">
      <input type='text' value="abc2-5">
    </div>
    <div class='wrapper' id="div2">
      <input type='text' value="abc3-1">
      <input type='text' value="abc3-2">
      <input type='text' value="abc3-3">
      <input type='text' value="abc3-4">
      <input type='text' value="abc3-5">
    </div>

地图有什么解决办法

使用 jquery：

您可以使用 jquery .map 而不是循环遍历 .children.each

var arr = [];
for (var i = 0; i < 3; ++i) 
  arr.push($('#div' + i + ">*").map((i,e)=>e.value).toArray());

// start with an empty array
var arr = [];

for (var i = 0; i < 3; ++i) 
  arr.push($('#div' + i + ">*").map((i,e)=>e.value).toArray());

console.log(arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div0">
  <input type='text' value="abc1-1">
  <input type='text' value="abc1-2">
  <input type='text' value="abc1-3">
  <input type='text' value="abc1-4">
  <input type='text' value="abc1-5">
</div>
<div id="div1">
  <input type='text' value="abc2-1">
  <input type='text' value="abc2-2">
  <input type='text' value="abc2-3">
  <input type='text' value="abc2-4">
  <input type='text' value="abc2-5">
</div>
<div id="div2">
  <input type='text' value="abc3-1">
  <input type='text' value="abc3-2">
  <input type='text' value="abc3-3">
  <input type='text' value="abc3-4">
  <input type='text' value="abc3-5">
</div>

去除脆弱的硬编码 for 循环 0..3，您可以为每个“包装器”添加一个类（或使用 $("#0,#1,#2") 和每个在外部）

var arr = [];

$(".wrapper").each((i, e) =>
  arr.push($(e).find(">*").map((ii, ee) => ee.value).toArray())
);

var arr = [];

$(".wrapper").each((i, e) =>
  arr.push($(e).find(">*").map((ii, ee) => ee.value).toArray())
);
console.log(arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrapper' id="div0">
  <input type='text' value="abc1-1">
  <input type='text' value="abc1-2">
  <input type='text' value="abc1-3">
  <input type='text' value="abc1-4">
  <input type='text' value="abc1-5">
</div>
<div class='wrapper' id="div1">
  <input type='text' value="abc2-1">
  <input type='text' value="abc2-2">
  <input type='text' value="abc2-3">
  <input type='text' value="abc2-4">
  <input type='text' value="abc2-5">
</div>
<div class='wrapper' id="div2">
  <input type='text' value="abc3-1">
  <input type='text' value="abc3-2">
  <input type='text' value="abc3-3">
  <input type='text' value="abc3-4">
  <input type='text' value="abc3-5">
</div>

扩展它，它看起来像你可以使用嵌套地图：

var arr = $(".wrapper").map((i, e) => $(e).find(">*").map((ii, ee) => ee.value).toArray()).toArray();

但是，正如您从 sn-p 中看到的那样，这会使最终数组变平。

var arr = $(".wrapper").map((i, e) => $(e).find(">*").map((ii, ee) => ee.value).toArray()).toArray();
console.log(arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrapper' id="div0">
  <input type='text' value="abc1-1">
  <input type='text' value="abc1-2">
  <input type='text' value="abc1-3">
  <input type='text' value="abc1-4">
  <input type='text' value="abc1-5">
</div>
<div class='wrapper' id="div1">
  <input type='text' value="abc2-1">
  <input type='text' value="abc2-2">
  <input type='text' value="abc2-3">
  <input type='text' value="abc2-4">
  <input type='text' value="abc2-5">
</div>
<div class='wrapper' id="div2">
  <input type='text' value="abc3-1">
  <input type='text' value="abc3-2">
  <input type='text' value="abc3-3">
  <input type='text' value="abc3-4">
  <input type='text' value="abc3-5">
</div>

使用原生 javascript

现在还有一个可以使用的 Array.prototype.map 函数（“这些天” - 它已经存在了一段时间......但不是永远）。坚持使用 vanilla js 来获取 DOM 元素（见下文以使用 jquery 并转换为数组）以及一些 ES6 fancyness 从 htmlCollection 转换为数组提供了一个衬里：

var arr = [...document.getElementsByClassName("wrapper")].map((e)=>[...e.children].map((ee)=>ee.value))
console.log(arr);

[...document.getElementsByClassName("wrapper")] 这个位将 HTMLCollection 转换为数组，以便我们可以使用 js .map

var arr = [...document.getElementsByClassName("wrapper")].map((e)=>[...e.children].map((ee)=>ee.value))
console.log(arr);

<div class='wrapper' id="div0">
  <input type='text' value="abc1-1">
  <input type='text' value="abc1-2">
  <input type='text' value="abc1-3">
  <input type='text' value="abc1-4">
  <input type='text' value="abc1-5">
</div>
<div class='wrapper' id="div1">
  <input type='text' value="abc2-1">
  <input type='text' value="abc2-2">
  <input type='text' value="abc2-3">
  <input type='text' value="abc2-4">
  <input type='text' value="abc2-5">
</div>
<div class='wrapper' id="div2">
  <input type='text' value="abc3-1">
  <input type='text' value="abc3-2">
  <input type='text' value="abc3-3">
  <input type='text' value="abc3-4">
  <input type='text' value="abc3-5">
</div>

现在这使用了嵌套的 .map（js .map 不是 jquery .map）并且确实返回了预期的多维数组。

使用 jquery 选择器和 javascript 映射

最后，结合 jquery 选择器的简洁性（或者您可能已经将它们作为 jquery 对象，所以不想重新选择它们，任何理由都可以）与 js .map 以（稍微）更短的代码获得嵌套地图比原版：

var arr = $(".wrapper").toArray().map(e=>$(">*",e).toArray().map(ee=>ee.value));
console.log(arr);

这里：$(selector).toArray() 返回一个 DOM 元素数组，所以我们可以使用 js .map。

var arr = $(".wrapper").toArray().map(e=>$(">*",e).toArray().map(ee=>ee.value));
console.log(arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrapper' id="div0">
  <input type='text' value="abc1-1">
  <input type='text' value="abc1-2">
  <input type='text' value="abc1-3">
  <input type='text' value="abc1-4">
  <input type='text' value="abc1-5">
</div>
<div class='wrapper' id="div1">
  <input type='text' value="abc2-1">
  <input type='text' value="abc2-2">
  <input type='text' value="abc2-3">
  <input type='text' value="abc2-4">
  <input type='text' value="abc2-5">
</div>
<div class='wrapper' id="div2">
  <input type='text' value="abc3-1">
  <input type='text' value="abc3-2">
  <input type='text' value="abc3-3">
  <input type='text' value="abc3-4">
  <input type='text' value="abc3-5">
</div>