Javascript 数组反向函数意外行为

Javascript array reverse function unexpected behavior

本文关键字:意外 函数 数组 Javascript      更新时间:2023-09-26

我想了解为什么情况 1 和情况 2 不返回相同的结果。

情况 1 :

var array1 = ["1", "2", "3"];
var array2 = array1.reverse();
console.log(array1); // ["3", "2", "1"]
console.log(array2); // ["3", "2", "1"] Why this doesn't work ?

情况 2 :

var array1 = ["1", "2", "3"];
var array2 = array1;
console.log(array1);           // ["1", "2", "3"]
console.log(array2.reverse()); // ["3", "2", "1"] Why this works ?

In Situation 1

反向方法将调用数组对象的元素就地转置,改变数组,并返回对数组的引用。

Situation 2中,您具有相同的参考。您正在打印array1阵列,然后再反转它。

var array1 = ["1", "2", "3"];
var array2 = array1;
console.log(array1);           // [ '1', '2', '3' ]
console.log(array2.reverse()); // [ '3', '2', '1' ]
console.log(array1);           // [ '3', '2', '1' ]

当你调用.reverse时,你正在反转值,然后返回数组。

var array1 = ["1", "2", "3"]; //Create a new array
var array2 = array1.reverse();//Reverse array1 and assign it to array2

array1所做的任何更改也会反映在array2在这种情况下,混淆是由于您在修改值之前打印值的事实引起的。

reverse()修改并返回原始数组。参见 MDN Array.prototype.reverse()

var array1 = ["1", "2", "3"];
var array2 = array1;             // point to the same object
console.log(array1);             // original array1 (["1", "2", "3"])
console.log(array2.reverse());   // reverses array2 and array1 since they
                                 //   point to the same object and returns
                                 //   array2 (["3", "2", "1"])
console.log(array1);             // check that array1 was reversed (["3", "2", "1"])
console.log(array1.reverse() === array1);   // returns true

反向方法将调用数组对象的元素转置到位,改变数组,并返回对数组的引用。因此,它不会返回反向数组。

检查曼努埃尔。https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse

重要的是要注意Array.reverse()件事:

  • 通过反转来改变它给出的数组
  • 它返回对刚刚反转的数组的引用

让我们来看看你的例子和发生了什么/

情况一

var array1 = ["1", "2", "3"];  // Creates new array
var array2 = array1.reverse(); // Reverse array1 and stores reference to array1 in array2
// Since array1 and array2 point to the same object, they will have
// the same values since they are pointing to the same object
console.log(array1); // ["3", "2", "1"]
console.log(array2); // ["3", "2", "1"]

情况二

var array1 = ["1", "2", "3"];  // Creates new array
var array2 = array1;           // array2 now holds a reference to array1
// Same as the previous example, array1 and array2 both have the
// same values since they are pointing to the same object    
console.log(array1);           // ["1", "2", "3"]
// Now we reverse array2, which reverses array1 AND array2
console.log(array2.reverse()); // ["3", "2", "1"]
// array1 is now also reversed
console.log(array1);           // ["3", "2", "1"]

在第二种情况下,在调用 array2.reverse() 之后,array1array2 相反,因为它们指向同一个对象引用。

问题是reverse()更改数组本身。这意味着,如果你写var array2 = array1.reverse()那么 array1 就会被颠倒。Array1 现在包含反向的条目,而在另一端,array2 使用此反向数组进行初始化。因此,您具有相同的输出。

在第二个带有var array2 = array1的示例中,您有两个变量引用同一数组。首先,打印出 array1,结果为正常顺序。作为第二步,您反转 array2 并将其打印出来。顺序现在已更改。但是,如果现在再次打印出 array1,结果将是顺序相反的数组,因为 array1 和 array2 引用同一个数组。

试试这个(演示)

var array1 = ["1", "2", "3"];
var array2 = array1.slice(0).reverse();
console.log(array1, array2);

使用 slice(0) 创建一个新数组。

数组是 javascript 中的对象,因此将数组分配给另一个数组只是分配其引用,因此它们都将指向同一对象。而在这种情况下,最好使用数组的切片函数将数组的数据复制到另一个类似

var array1 = ["1", "2", "3"];
var array2 = array1.slice().reverse();
console.log(array1); // ["1", "2", "3"]
console.log(array2); // ["3", "2", "1"]