Javascript -value 赋值更新父元素

Javascript -value assignment updates the parent element?

本文关键字：元素 更新 赋值 -value Javascript      更新时间：2023-09-26

在下面的代码中，如何将arr3值分配给arr2，它也更新arr1？

   var arr1 = "john".split('');
    var arr2 = arr1.reverse();
    var arr3 = "jones".split('');
    arr2.push(arr3);
    console.log("array 1: length=" + arr1.length + " last=" + arr1.slice(-1));
    console.log("array 2: length=" + arr2.length + " last=" + arr2.slice(-1));

编辑：当我修改代码如下时，我得到相同的输出

var arr1 = "john".split('');
var arr2 = arr1;
var arr3 = "jones".split('');
arr2.push(arr3);//arr1 updated
console.log("array 1: length=" + arr1.length + " last=" + arr1.slice(-1));
console.log("array 2: length=" + arr2.length + " last=" + arr2.slice(-1));

当我在 arr2.push(arr3( 行之后检查 arr1 的值时，它显示 arr3 的值也已添加。

有什么方法可以限制这种情况的发生吗？

此代码：

arr1.reverse()

... 反转arr1并返回 arr1 ，然后将其作为引用分配给 arr2：

var arr2 = arr1.reverse();

你想要的是 arr1 的副本，您可以通过调用其 slice() 方法来获得：

var arr1 = "john".split('');
var arr2 = arr1.slice().reverse();
var arr3 = "jones".split('');
arr2.push(arr3);
console.log("array 1: length=" + arr1.length + " last=" + arr1.slice(-1));
console.log("array 2: length=" + arr2.length + " last=" + arr2.slice(-1));

首先，你必须知道 JavaScript 中的 Object 值是通过引用传递的，而原语是通过值传递的。

考虑到这一点，现在您知道arr1和arr2引用内存中的相同空间，因此当您反向arr1时，您不是在创建新的反向数组，您只是反向arr1并将其分配给arr2，因此两个变量都指向同一个反向数组。

现在，如果要从中创建另一个数组arr1请使用slice()：

var arr2 = arr1.slice().reverse();

Array.prototype.reverse(( 不会创建新数组。相反，它替换了现有的元素：

反向方法就地反转 Array 对象的元素。它不会在执行期间创建新的 Array 对象。 如果数组不连续，则反向方法在数组中创建填充数组中空白的元素。这些创建的元素中的每一个都具有未定义的值。

来源： https://msdn.microsoft.com/en-us/library/3333858x(v=vs.94(.aspx

下面是一个简单的示例：

var arr = "Hello".split('');   // ["H", "e", "l", "l", "o"] 
arr.reverse();                 // ["o", "l", "l", "e", "H"]
console.log(arr);              // ["o", "l", "l", "e", "H"]

reverse()在调用它的数组上工作。

var arr2 = arr1.reverse();

这里的arr2是指arr1被逆转后的arr1。

如果数组引用了对象，你也可以通过字符串化arr1来克隆数组，然后解析它

var arr1 = "john".split('');
    var arr2 = JSON.parse(JSON.stringify( arr1)).reverse();
    var arr3 = "jones".split('');
    arr2.push(arr3);
    alert("array 1: length=" + arr1.length + " last=" + arr1.slice(-1));
    alert("array 2: length=" + arr2.length + " last=" + arr2.slice(-1));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

相关文章：