Vanilla Js 中的数组深度合并未按预期工作

Question

我做了一个代码笔来演示我的问题： https://codepen.io/milenoi-the-sans/pen/vYmzyOj

我有一个包含多个数组的对象。

我想通过单击按钮更改数组中的某些值。

我的问题：代码按预期工作

   $series = $.extend(true, [], arr[2]);

但不是在 Vanilla JS 中使用

$series = [...[], ...arr[2]];

我想通过将它乘以一个数字来更改 onclick 的值。

我做错了什么？

谢谢！

let arr = {
  2: [{
    label: "Label 1",
    data: [
      [1627776000000, 100]
    ]
  }]
}

let series = null;

let update = function(count) {
  //$series = [...[], ...arr[2]];
  //$series = $.extend(true, [], arr[2]);
  $series = [...arr[2]];

  $series.forEach(($el, index) => {
    let $value = 0;

    $series[index].data.forEach(($ele, subIndex) => {
      $value = $series[index].data[subIndex][1];
      $value = count * $value;
      $series[index].data[subIndex][1] = $value;
    });
    document.querySelector('.text').textContent = $value;

  });

};

document.querySelectorAll('button').forEach(($button) => {
  $button.addEventListener('click', function(e) {
    e.preventDefault();
    update(this.getAttribute('data-count'));
  }, false);
});

.text {
  background: cornflowerblue;
  padding: 30px;
  color: white;
  margin: 10px;
}

button {
  margin: 10px;
}

<button data-count="2">Factor 2</button>
<button data-count="3">Factor 3</button>
<button data-count="4">Factor 4</button>
<button data-count="5">Factor 5</button>

<div class="text"></div>

预期输出

点击按钮应将 100 乘以日期计数值 (2,3,4...)，所以我预计

200 300 400

在第一次点击时有效。但随后它会乘以给定值。

当我更换 $series = $.extend(true, [], arr[2]);

它按预期工作。

Answer 1

您更改引用数组变量。对于复制而不是引用变量，您可以使用

$series = JSON.parse(JSON.stringify(arr[2]))

Vanilla Js 中的数组深度合并未按预期工作

Deep Merge of Arrays in Vanilla Js not working as expected

javascript

multidimensional-array

array-merge