在 JavaScript 中创建数组

Question

我正在尝试使用以下方法创建一个数组，但到目前为止我只能设法一个一个地获取数据。我真正想要完成的是存储一个包含所有数据的数组，这样我就可以使用 PHP.

将它存储在数据库中

到目前为止，我的问题是我似乎无法设法用 JS 创建一个简单的数组，当我尝试使用 "push" 时它会 return 空数组。

有人能帮帮我吗？

Sortable.create(simpleList, {
  onUpdate: function( /**Event*/ evt) {
    saveUnitsPositions();
  },
});

function saveUnitsPositions() {
  const GETPOSITION = document.querySelectorAll("#simpleList li");
  var positions = [];
  for (var i = 0; i < GETPOSITION.length; i++) {
    positions = GETPOSITION[i].getAttribute('data-value');
    console.log(positions);
  }
}

<script src="http://SortableJS.github.io/Sortable/Sortable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />


<ul id="simpleList" class="list-group">
  <li class="list-group-item course-unit" data-value="26321">
    Etude #1
  </li>
  <li class="list-group-item course-unit" data-value="26322">
    Etude #2
  </li>
  <li class="list-group-item course-unit disabled" data-value="Backing Tracks">
    Backing Tracks
  </li>
  <li class="list-group-item course-unit" data-value="26326">
    Backing track Fusion (118 bpm)
  </li>
  <li class="list-group-item course-unit" data-value="26327">
    Backing track Samba (90 bpm)
  </li>
  <li class="list-group-item course-unit disabled" data-value="Apostilas">
    Apostilas
  </li>
  <li class="list-group-item course-unit" data-value="26615" style="transform: translateZ(0px);">
    Etudes
  </li>
  <li class="list-group-item course-unit" data-value="26332">
    Tríades Mutantes – Apostila Completa
  </li>

</ul>

Answer 1

如果您尝试不使用 Sortable，它可以使用 push 方法。也许问题出在 Sortable。而且使用 push 方法是正确的，应该有效。

编辑：我再次尝试，它与 Sortable 一起工作，当您更新某个位置时，它会填充数组。

Sortable.create(simpleList, {
  onUpdate: function( /**Event*/ evt) {
    saveUnitsPositions();
  },
});

function saveUnitsPositions() {
  const GETPOSITION = document.querySelectorAll("#simpleList li");
  var positions = [];
  for (var i = 0; i < GETPOSITION.length; i++) {
    positions.push(GETPOSITION[i].getAttribute('data-value')); // use push here
    console.log(positions);
  }
}

<DOCTYPE html>
<html>
<head>
<script src="http://SortableJS.github.io/Sortable/Sortable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<ul id="simpleList" class="list-group">
  <li class="list-group-item course-unit" data-value="26321">
    Etude #1
  </li>
  <li class="list-group-item course-unit" data-value="26322">
    Etude #2
  </li>
  <li class="list-group-item course-unit disabled" data-value="Backing Tracks">
    Backing Tracks
  </li>
  <li class="list-group-item course-unit" data-value="26326">
    Backing track Fusion (118 bpm)
  </li>
  <li class="list-group-item course-unit" data-value="26327">
    Backing track Samba (90 bpm)
  </li>
  <li class="list-group-item course-unit disabled" data-value="Apostilas">
    Apostilas
  </li>
  <li class="list-group-item course-unit" data-value="26615" style="transform: translateZ(0px);">
    Etudes
  </li>
  <li class="list-group-item course-unit" data-value="26332">
    Tríades Mutantes – Apostila Completa
  </li>

</ul>
</body>
</html>

Answer 2

push 更改数组 "in place" 和 returns 更新数组的长度。所以 [1,2,3].push(4,5) 将 return 五 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push 因此，如果您执行 var result = [1,2,3].push(4,5)，结果将是 5 而不是数组。

这是推送的使用方法：

function saveUnitsPositions() {
  const GETPOSITION = document.querySelectorAll("#simpleList li");
  const positions = [];
  for (var i = 0; i < GETPOSITION.length; i++) {
    positions.push(GETPOSITION[i].getAttribute('data-value'));
  }
  console.log(positions);
}

或者，您可以使用 concat 方法 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat - 它不会修改原始数组，而是 return 一个具有串联结果的新数组：

function saveUnitsPositions() {
  const GETPOSITION = document.querySelectorAll("#simpleList li");
  var positions = [];
  for (var i = 0; i < GETPOSITION.length; i++) {
    positions = positions.concat( GETPOSITION[i].getAttribute('data-value') );
  }
  console.log(positions);
}

在 JavaScript 中创建数组

Create Array in JavaScript

javascript

sortablejs