[譯]基礎中的基礎，JavaScript中的值和引用

• 原文地址：medium.com/dailyjs/bac…

前幾天突然發現github上有一個大熱門項目 —— 「33 concepts every JavaScript developer should know」，目前已經將近25000個Stars。這個項目旨在幫助前端開發者掌握33個JavaScript基礎概念。按做者話說，這些概念並非開發所必需的，但它們是引導你通向前端大牛之路的基石。

遺憾的是，該項目中文版的文章收錄不盡完整。因此本着學習與交流的目的，本人會把33個概念所涉及的文章利用業餘時間竭盡所能的翻譯出來，其中難免疏漏，望請指正。今天是第三篇，如下爲正文：

---

基本類型和引用類型，是咱們做爲前端開發所必需掌握的知識，不只由於人們容易混淆其概念從而常常引發BUG，它仍是面試中常常出現的一類問題。

我爭取在這篇短文中，儘量簡單的闡述這個基礎概念。

---

先彆着急往下翻，你知道如下兩個例子的結果嗎？

示例1：

console.log([10] === [10]);
複製代碼

示例2：

var oldArray = [];
var object = {};

object.newArray = oldArray;
oldArray.push(10);

console.log(object.newArray === oldArray);
複製代碼

第一個結果是false，第二個結果是true。你答對了嗎？咱們來看看爲何會是這樣。

---

在JavaScript中，咱們以值的複製和值的引用來區分兩種類型。他們是

基本類型（值的複製）

• null
• undefined
• Number
• String
• Boolean
• symbol

對象類型（值的引用）

• Object
• Array
• Function

---

基本類型

var a = 5;
var b = a;
a = 10
console.log(a); // 10
console.log(b); // 5

// string, boolean, null, undefined同理
複製代碼

咱們把基本類型的值賦給變量，至關於把這個值複製一份，賦給另外一個變量。

對象類型

注意哦，讓人困惑的部分來了

var a = {};
var b = a;

a.a = 1;

console.log(a); // {a: 1}
console.log(b); // {a: 1}
複製代碼

數組同理。

var a = [];
var b = a;

a.push(1);

console.log(a); // [1]
console.log(b); // [1]
console.log(a === b); // true
複製代碼

當咱們把對象類型賦給變量，至關於複製一個引用地址。該地址是聲明變量時在內存中建立出來的。聲明變量b時，僅僅是把這個地址的引用賦給它。因此咱們更新該地址時，兩個變量的值相同。

var a = [];     # Address #001 -> []                
                  # Variable a -> #001
                  
var b = a;     # Variable b -> #001

a.push(1);      # Address #001 -> [1]
複製代碼

Variable	Address	Value
a	#011	[1]
b	#011	[1]

---

此時，咱們再來看看「[10] === [10]」的例子

對比兩個數組，全等操做符會檢查它們是否指向同一個地址。因此，若是兩個[10]不是同一個數組，結果爲false。若是你想要對比兩個數組或對象的值是否相同，卻是有一個簡單但又限制頗多的方法。

JSON.stringify(a) === JSON.stringify(b)
複製代碼

這樣作的缺點是，對象或數組的屬性順序不一樣時會返回false。若是你想要更加健全的辦法，能夠選擇lodash庫中的isEqual()方法。

---

下一篇講述隱式轉型，敬請期待。