Question

我有一段代码，但无法正常运行。我创建了一个数组，并将其复制到一个新的数组中。我希望第二个不会更改它的值，但第一个似乎会更改它的值。我该如何避免？我想在按“重置”后打印初始值，但是当arrayStringDates2的值更改时aux的值也更改了。

var arrayStringDates2 = ["10/01/2017", "20/01/2018", "16/12/2015"];
var aux = arrayStringDates2;
document.getElementById("arrayStringDates2").innerHTML = arrayStringDates2;

document.addEventListener('click', function(event) {
  if (event.target.id == "format2") {
    for (i = 0; i < arrayStringDates2.length; i++) {
      arrayStringDates2[i] = arrayStringDates2[i].replace(/["/"]/gi, "");
    }
    document.getElementById("arrayStringDates2").innerHTML = arrayStringDates2;
  }
  if (event.target.id == "resetFormat") {
    console.log(aux)
    document.getElementById("arrayStringDates2").innerHTML = aux;
  }
}, false);

<button id="format2">
		Format
	</button>
<button id="resetFormat">
		Reset
	</button>
<div id="arrayStringDates2"></div>

Answer 1

aux具有相同的指针引用，要克隆它，可以使用slice方法。

var arrayStringDates2 = ["10/01/2017", "20/01/2018", "16/12/2015"];
var aux = arrayStringDates2.slice()

Answer 2

要复制数组，最简单的方法之一是.slice()。

但这只会创建数组的副本，而不是内部的非原始值，因此字符串或数字将被复制，而对象在数组的两个副本中都是相同的。

使用方式：

var arrayStringDates2 = ["10/01/2017", "20/01/2018", "16/12/2015"];
var aux = arrayStringDates2.slice()

Answer 3

它没有按照您的想法去做...

var arrayStringDates2 = ["10/01/2017", "20/01/2018", "16/12/2015"];
var aux = arrayStringDates2;

不创建数组的副本，它只是创建2个对同一数组的引用-arrayStringDates2和aux都指向["10/01/2017", "20/01/2018", "16/12/2015"]

您需要做的是创建一个内容相同的新数组。因此，更改一个值只会在数组中的一个上更改它。

Array.prototype.slice是您想要的。

var arrayStringDates2 = ["10/01/2017", "20/01/2018", "16/12/2015"];
var aux = arrayStringDates2.slice(); // shallow copy each item in arrayStringDates2 in to a new array

document.getElementById("arrayStringDates2").innerHTML = arrayStringDates2;

document.addEventListener('click', function(event) {
  if (event.target.id == "format2") {
    for (i = 0; i < arrayStringDates2.length; i++) {
      arrayStringDates2[i] = arrayStringDates2[i].replace(/["/"]/gi, "");
    }
    document.getElementById("arrayStringDates2").innerHTML = arrayStringDates2;
  }
  if (event.target.id == "resetFormat") {
    console.log(aux)
    document.getElementById("arrayStringDates2").innerHTML = aux;
  }
}, false);

<button id="format2">
		Format
	</button>
<button id="resetFormat">
		Reset
	</button>
<div id="arrayStringDates2"></div>

Answer 4

我有一段代码，但无法正常运行。我创建了一个数组，并将其复制到一个新的数组中。我希望第二个不会更改它的值，但第一个似乎会更改它。

这是由于JavaScript处理内存的方式。

对于基元（布尔，空，未定义，数字，字符串，符号），JavaScript将变量的值传递（按值传递）如果将包含这些类型之一的变量分配给新变量。该值将被复制。

对于复杂对象（数组是Array），Javascript将引用传递给内存中的值（按引用传递）。实际值可以由多个引用作为目标，并且在技术上可以共享。如果将包含对象类型的变量分配给新变量，则仅复制对该内存中该位置的引用。

JavaScript这样做是为了提高内存效率，但是会导致您描述的行为。如果更改对象，则指向该对象的所有变量将具有相同的效果。

如何避免？

您不想要做的就是克隆对象，这样它就可以在内存中占有一席之地。克隆的方式很多，具体取决于您的用例。

互联网上到处都有描述用例和解决方案的文章，例如，请参见：https://davidwalsh.name/javascript-clone-array

Answer 5

对于眨眼的浏览器而言，切片是复制阵列的最快方法。但是对于非闪烁浏览器，您可以使用while循环或for in loop。

使用切片方法：

var newArray = myArray.slice();

此外，ES6中复制数组的最简单方法之一就是使用数组扩展。

var newArray = [...myArray];

**这些方法正在复制数组，但是如果数组由对象组成，则它们仍将被引用，并将随原始更改而更改。

基本的javascript-变量

5 个答案: