[[392719]]

在JavaScript中，可以通過值和引用傳遞。兩者之間的主要區別是，按值傳遞發生在賦值基本類型的時候，而賦值對象時按引用傳遞。接下來，跟著智哥，來詳細看看。

1.理解基本類型和對象

JavaScript提供了2種數據類型：基本類型和對象。

基本類型有 number, boolean, string, symbol,null,undefined。

// 基本類型 
const number = 10; 
 
const bool = false; 
 
const str = 'Hello!'; 
 
const missingObject = null; 
 
const nothing = undefined; 

第二類是對象，普通對象、數組、函數等等都是對象。

// Objects 
const plainObject = { 
  prop: 'Value' 
}; 
 
const array = [1, 5, 6]; 
 
const functionObject = (n1, n2) => { 
  return n1 + n2; 
}; 

換句話說，任何不是基本類型的值都是對象。

2.值

按值傳遞的簡單規則是 JS 中的所有基本類型都按值傳遞，就這么簡單。

按值傳遞意味著每次將值賦給變量時，都會創建該值的副本，每一次哦。

舉個例子來看看，假設我們有兩個變量 a 和 b：

let a = 1; 
let b = a; 
 
b = b + 2; 
 
console.log(a); // 1 
console.log(b); // 3 

第一條語句，聲明一個變量 a，并賦值為 1。

第二條語句，聲明一個變量 b，并把 a 的值賦值給它。

最后，b = b + 2增加2并變為3。b變量發生變化，并且該變化不會影響a的值。

3.引用

通過引用傳遞的方式與值傳遞相比會有所不同。

當創建一個對象時，就獲取一個對該對象的引用。如果兩個變量持有相同的引用，那么改變對象會反映在兩個變量中。

請看下面代碼：

let y = x; 
 
y.push(2); 
 
console.log(x); // [1, 2] 
console.log(y); // [1, 2] 

第一個語句let x =[1]創建一個數組，定義一個變量x，并使用對創建的數組的引用來初始化變量。

然后let y = x定義一個變量y，并使用存儲在x變量中的引用來初始化y，這是一個引用傳遞。

y通過y.push(2)通來改變數組。因為x和y變量引用相同的數組，所以這種變化會反映在兩個變量中。

注意：為簡單起見，我說變量包含對對象的引用。但是嚴格說來，JavaScript中的變量包含的值是對對象的引用。

4.值的比較和引用的比較

在比較對象時，理解值和引用之間的區別非常重要。

當使用嚴格比較運算符===時，如果兩個變量的值相同，則它們相等。以下所有比較均相等

const one = 1; 
const oneCopy = 1; 
 
console.log(one === oneCopy); // true 
console.log(one === 1);       // true 
console.log(one === one);     // true 

one和oneCopy具有相同的值1。當兩個操作數都為1時，操作符===的計算結果都為true。

但是比較運算符===在比較引用時的工作方式有所不同。2個引用只有在引用完全相同的對象時才相等。

ar1和ar2保存對不同數組實例的引用：

const ar1 = [1]; 
const ar2 = [1]; 
 
console.log(ar1 === ar2); // false 
console.log(ar1 === [1]);  // false 
 
const ar11 = ar1; 
console.log(ar1 === ar11); // true 
console.log(ar1 === ar1);  // true 

ar1和ar2引用結構相同的數組，但是ar1 === ar2的計算結果為false，因為ar1和ar2引用了不同的數組對象。

僅當比較指向相同對象的引用時，比較運算符才返回true：ar1 === ar11或ar1 === ar1。

5.總結

在JavaScript中，原始類型作為值傳遞：意味著每次分配值時，都會創建該值的副本。

另一方面，對象(包括普通對象，數組，函數，類實例)是引用。如果修改對象，則引用該對象的所有變量都將看到更改。

比較運算符區分比較值和參考。僅當引用完全相同的對象時，2個保存引用的變量才相等，但是，無論值源自何處，只要變量具有相同的2個值(分別來自變量，文字等)，則2個保存值的變量就相等。

~ 完，我是刷碗智，我們下期見!

作者：Ahmad shaded 譯者：前端小智 來源：sitepoint原文：https://dmitripavlutin.com/value-vs-reference-javascript/