在 JavaScript 中引用和复制变量

在本文中，我们将讨论 JavaScript 中的按值传递和按引用传递。
JavaScript 总是按值传递，但在数组或对象中，值是对它的引用，因此您可以“更改”数据。 JavaScript 有 5 种按值传递的原始数据类型，它们是Boolean 、 NULL 、 undefined 、 String和Number 。它有 3 种通过引用传递的非原始数据类型，它们是Array 、 函数和Object 。在非原始数据类型中，我们在复制数据时遇到了一些挑战。正如我们所知，对象是在计算机内存中的某个位置创建的。当我们声明任何属性时，它会在内存中创建一个空间。

示例：地址是一种按值传递的数据类型，就像数字、字符串和地址指向内存中的位置一样。

如果是数字，则按值传递。

let age = 100;
let age2 = age;
document.write(age, age2);
document.write("<br>");
age = 200;
document.write(age, age2); 

输出：

100 100
200 100

在字符串的情况下按值传递

let name = 'sam';
let name2 = name;
document.write(name, name2); 
document.write("<br>");
name = 'xyz';
document.write(name, name2); 

输出：

sam sam
xyz sam

在数组的情况下通过引用传递

const players = ['Sam', 'Sarah', 'Ryan', 'Poppy'];
const team = players;
document.write(players, team);

输出：

["Sam", "Sarah", "Ryan", "Poppy"]
["Sam", "Sarah", "Ryan", "Poppy"]

现在，如果您更改“团队”数组中的数据，它也会影响“玩家”数组

const players = ['Sam', 'Sarah', 'Ryan', 'Poppy'];
const team = players;
team[3] = 'xyz';
document.write(players, team);

输出：

["Sam", "Sarah", "Ryan", "Poppy"]
["Sam", "Sarah", "Ryan", "xyz"]

这是一个数组引用，而不是数组副本。它们都指向同一个数组。
我们有 4 种方法可以做到这一点。通过使用这些方法，主阵列不会改变。

1. 通过使用 slice() 方法：

   const players = ['Sam', 'Sarah', 'Ryan', 'Poppy'];
   const playersCopy = players.slice();
   playersCopy[2]="west";
   console.log(players, palyersCopy);

   输出：

   ["Sam", "Sarah", "Ryan", "Poppy"]
   ["Sam", "Sarah", "west", "Poppy"]
   

2. 通过使用 concat() 方法：创建一个新的数组变量，然后将旧的变量连接到新的数组中。

     const players = ['Sam', 'Sarah', 'Ryan', 'Poppy'];
     const playersCopy2 = [].concat(players);
     playersCopy2[2]='hell';
     document.write(players, playersCopy2);

   输出：

   ["Sam", "Sarah", "Ryan", "Poppy"]
   ["Sam", "Sarah", "hell", "Poppy"]
   

3. 通过使用 ES6 扩展运算符：

    const players = ['Sam', 'Sarah', 'Ryan', 'Poppy'];
    const playersCopy3 = [...players];
    playersCopy3[3] = 'heeee hawww'; 
    document.write(players, playersCopy3);

   输出：

   ["Sam", "Sarah", "Ryan", "Poppy"]
     ["Sam", "Sarah", "Ryan", "heeee hawww"]
   

4. 通过使用 Array.from()：

     const players = ['Sam', 'Sarah', 'Ryan', 'Poppy'];
     const playersCopy4 = Array.from(players);
     playersCopy4[3]="kim";  
     document.write(players, playersCopy4);

   输出：

   ["Sam", "Sarah", "Ryan", "Poppy"]
   ["Sam", "Sarah", "Ryan", "kim"]
   

在对象中通过引用传递：对象也是如此，它也会影响原始对象。

const person = {
      name: 'loren isum',
      age: 80
    };
const captain = person;
person.age = 25;
console.log(captain, person);

输出：

{name: "loren isum", age: 25}
{name: "loren isum", age: 25}

有两种方法可以做到这一点。

1. 通过使用 assign() 方法：

   const personObject = {
         name: 'loren isum',
         age: 80
       };
   const personCopy = Object.assign({}, 
       personObject, { number: 99, age: 12 });
   personCopy.age = 78;
   console.log(personCopy, personObject);

   输出：

   {name: "loren isum", age: 78, number: 99}
   {name: "loren isum", age: 80}
   

2. 通过使用传播运算符：

   const personData = {
         name: 'loren isum',
         age: 80
       };
   const personCopy2 = {...personData };
   personCopy2.age = 78;
   console.log(personCopy2, personData );

   输出：

   {name: "loren isum", age: 78}
   {name: "loren isum", age: 80}
   

您还需要考虑在相等和相等运算符的情况下会发生什么。当我们在引用类型变量上使用这些运算符时，它们会检查引用。如果该属性引用了同一项目，则比较将输出为“true”，否则将返回“false”。

 var arrayReference = ["Hi!"];
 var arrayCopy = arrayReference;
 console.log(arrayCopy === arrayReference); 

输出：

true

var array1 = ['Hi!'];
var array2 = ['Hi!'];
console.log(array1 === array2);

输出：

false

这可以通过对数组进行字符串化来纠正。

var arr1str = JSON.stringify(array1);
var arr2str = JSON.stringify(array2);
console.log(arr1str === arr2str); // true

输出：

true

我们可以更改对象 person 的 name 属性，但我们无法重置引用 person，因为它已被标记为const。

 const person = {
   name: 'Tammy'
 };
  
// Name property changed
 person.name = 'abc'; 
  
// Objects are a reference type
 var val1 = { name: "Tom" };   
   var val2 = { name: "Tom" };
   console.log(val1 == val2)  

输出：

false

但是我们可以通过对数组进行字符串化来纠正这个问题。

 var array1 = ['Hi!'];
 var array2 = ['Hi!'];
 var arr1str = JSON.stringify(array1);
 var arr2str = JSON.stringify(array2);
 console.log(arr1str === arr2str); 

输出：

true

在函数的情况下通过引用传递：如果我们在函数中传递对象，它将改变两个对象。

function changevalue(person) {
    var newPersonObj = (person);
    newPersonObj.age = 25;
    return newPersonObj;
}
var alex = {
    name: 'xyz',
    age: 30
};
var alexChanged = changevalue(alex);
console.log(alex); 
console.log(alexChanged); 

输出：

{ name: 'xyz', age: 25 }
{ name: 'xyz', age: 25 }

我们可以通过解析和字符串化对象来解决这个问题。

function changevalue(person) {
    var newPersonObj = JSON.parse(JSON.stringify(person));
    newPersonObj.age = 25;
    return newPersonObj;
}
var alex = {
    name: 'xyz',
    age: 30
};
var alexChanged = changevalue(alex);
console.log(alex); 
console.log(alexChanged);  

输出：

{ name: 'xyz', age: 30 }
  { name: 'xyz', age: 25 }