JavaScript的資料型態與變數的解析（附範例）

這篇文章帶給大家的內容是關於JavaScript的資料型別與變數的解析（附範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

這篇文章，來聊聊 JS 中的資料型別與變數。這是在學習 JS 時最基礎的一類問題，但卻很重要。希望我的分享有幫助到你。

文章開頭，我先提幾個面試中遇到的問題：

例如：

#如何理解參數的按值傳遞？

什麼是暫時性死區？

什麼是變數提升？

全域變數和 window 的屬性有什麼差別？為什麼？

... ...

這篇文章的風格，在分析知識點的同時，插入一些我經歷過的面試題目。

基本資料型態

在 JS 中，基本資料型別有 6 種，分別是數值、字串、布林值、null、undefined、Symbol。

對於基本資料類型，我們需要明白的是：基本類型在記憶體中的儲存方式是堆疊。每一個數值都是單獨存放，互不影響。

基本類型都是按值存取的。在比較時，按值進行比較：

1 === 1 // true

引用資料類型

引用類型的值保存在堆疊中，而引用是保存在堆疊中。

引用類型按引用存取。在比較時，也比較的參考：

{} === {} // => false

參數的傳遞方式

在 JS 中，參數可以是任何類型的值，甚至可以是函數。

這裡要分析的是參數是以哪一種型別傳遞的？引用型別還是基本型別？

先看一個基礎的例子：

var out_num = 1;

function addOne(in_num) {
    in_num += 1;
    return in_num;
}

addOne(out_num); // => 2
out_num // => 1

這個例子中，我們給addOne() 函數傳遞一個實參out_num，這個時out_num 會傳遞給in_num，即內部存在著in_num = out_num 的過程。最後我們看到的結果是 out_num 並沒有被函數改變，說明 in_num 和 out_num 是兩個在記憶體中獨立存放的值，也就是按值傳遞。

再來看一個變形：

var out_obj = { value: 1 };

function addOne(in_obj) {
    in_obj.value += 1;
    return in_obj;
}

addOne(out_obj); // => { value: 2 }
out_obj // => { value: 2 }

問題來了？函數參數不是按值傳遞嗎？為什麼這裡函數內部的處理反映到外部了？ 這是一個超級超級超級的理解迷思。

首先，我們還是得擺正觀點，也就是函數參數是按值傳遞的。 那這裡怎麼理解呢？對於引用型別而言，前面說引用型別分為引用和實際的記憶體空間。這裡 out_obj 依舊傳遞給 in_obj，即 in_obj = out_obj ，out_obj 和 in_obj 是兩個引用，它們在記憶體中的儲存方式是獨立的，但是它們卻指向同一塊記憶體。

而 in_obj.value = 1 則是直接操作的實際物件。實際物件的改變，會同步到所有引用這個實際物件的引用。

你再來看這個例子，或許會更清楚一些。

var out_obj = { value: 1 };

function addOne(in_obj) {
    in_obj = { value: 2 };
    return in_obj;
}

addOne(out_obj); // => { value: 2 }
out_obj // => { value: 1 }

你只要抓住一點：物件的賦值就會造成引用指向的實際物件改變。

如何判斷資料型別

判斷資料型別，通常有三種具體的方法：

1、typeof 運算子

typeof 操作符傳回一個表示資料類型的字串。它有以下明顯的缺陷：

typeof null // => 'object'

typeof [] // => 'object'

這是因為在 JS 語言設計之初遺留的 bug。可以閱讀這篇文章 http://2ality.com/2013/10/typ... 了解更多關於 typeof 處理 null 的問題。

所以 typeof 最好用來判斷一些基本類型，像是數值、字串、布林值、undefined、Symbol。

2、instanceof 運算子

typeof  的背後是透過判斷type tags 來判斷資料類型，而instanceof 則是透過判斷建構函數的prototype 是否出現在物件原型鏈上的任何位置。

舉例：

{} instanceof Object // => true

[] instanceof Array // => true
[] instanceof Object // => true

也判斷自訂類型：

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;
}
var auto = new Car('Honda', 'Accord', 1998);

console.log(auto instanceof Car);
// => true

console.log(auto instanceof Object);
// => true

所以，對於字面量形式的基本資料類型，不能透過instanceof 來判斷：

1 instanceof Number // => false

Number(1) instanceof Number // => false

new Number(1) instanceof Number // => true

3、Object.prototype.toString()

這是目前最推薦的一種方法，可以更精細且準確的判斷任何資料類型，甚至是JSON、正規、日期、錯誤等等。在 Lodash 中，其判斷資料型別的核心也是 Object.prototype.toString() 方法。

Object.prototype.toString.call(JSON) // => "[object JSON]"

關於這背後的原理，你可以閱讀這篇文章http://www.cnblogs.com/ziyunf...

4、其他

上面三種是通用的判斷資料類型的方法。面試中也會出現如何判斷一個陣列、如何判斷 NaN、如何判斷類別陣列物件、如何判斷一個空物件等問題。這一類問題比較開放，解決想法通常是抓住判斷資料的核心特徵。

舉個例子：判斷類別數組物件。

你先要知道 JS 中类数组对象是什么样子的，并寻求一个实际的参照物，比如 arguments 就是类数组对象。那么类数组对象具有的特点是：真值 & 对象 & 具有 length 属性 & length 为整数 & length 的范围大于等于 0，小于等于最大安全正整数（Number.MAX_SAFE_INTEGER）。

在你分析特点的时候，答案就呼之欲出了。【注意全面性】

数据类型如何转换

JS 数据类型的动态性将贯穿整个 JS 的学习，这是 JS 非常重要的特性，很多现象就是因为动态性的存在而成为 JS 独有。

正是由于动态性，JS 的数据类型可能在你毫无察觉的情况下，就发生了改变，直到运行时报错。

这里主要分析下面 8 种转换规则。

1、if 语句

if 语句中的类型转换是最常见的。

if (isTrue) {
    // ...
} else {}

在 if 语句中，会自动调用 Boolean() 转型函数对变量 isTrue 进行转换。

当 isTrue 的值是 null, undefined, 0, NaN, '' 时，都会转为 false。其余值除 false 本身外都会转为 true。

2、Number() 转型函数

我们重点关注 null undefined 以及字符串在 Number() 下的转换：

Number(null) // => 0
Number(undefined) // => NaN
Number('') // => 0
Number('123') // => 123
Number('123abc') // => NaN

注意和 parseInt() 对比。

3、parseInt()

parseInt(null) // => NaN
parseInt(undefined) // => NaN
parseInt('') // => NaN
parseInt('123') // => 123
parseInt('123abc') // => 123

4、==

这里需要注意的是：

null == undefined // => true

null == 0 // => false
undefined == false // => false

null 与 undefined 的相等性是由 ECMA-262 规定的，并且 null 与 undefined 在比较相等性时不能转换为其他任何值。

5、关系操作符

对于两个字符串的比较，是比较的字符编码值：

'B'  true

一个数值，另一个其他类型，都将转为数字进行比较。

两个布尔值转为数值进行比较。

对象，先调用 valueOf()，若不存在该方法，则调用 toString()。

6、加法

加法中特别注意的是，数字和字符串相加，将数字转为字符串。

'1' + 2 => // '12'
1 + 2 => // 3

对于对象和布尔值，调用它们的 toString() 方法得到对应的字符串值，然后进行字符串相加。对于 undefined 和 null 调用 String() 取得字符串 'undeifned' 和 'null'。

{ value: 1 } + true // => "[object Object]true"

7、减法

对于字符串、布尔值、null 或者 undefined，自动调用 Number()，转换结果若为 NaN，那么最终结果为 NaN。

对于对象，先调用 valueOf()，如果得到 NaN，结果为 NaN。如果没有 valueOf()，则调用 toString()。

8、乘法、除法

对于非数值，都会调用 Number() 转型函数。

变量提升与暂时性死区

JS 中有三种声明变量的方式：var, let, const。

var 声明变量最大的一个特点是存在变量提升。

console.log(a); // undefined
var a = 1;
console.log(a); // 1

第一个打印结果表示，在声明变量 a 之前，a 就已经可以访问了，只不过并未赋值。这就是变量提升现象。（具体原因，我放在后面分析作用域的时候来写）

let 和 const 就不存在这个问题，但是又引入了暂时性死区这样的概念。

/**
* 这上面都属于变量 a 的暂时性死区
* console.log(a) // => Reference Error
*/
let a = 1;
console.log(a); // => 1

即声明 a 之前，不能够访问 a，而直接报错。

而暂时性死区的出现又引出另外一个问题，即 typeof 不再安全。你可以参考这篇文章 http://es-discourse.com/t/why...

补充：一个经典面试题

for (var i = 0; i <p>我先不再这里展开分析，我打算放到异步与事件循环机制中去分析。不过这里将 var 替换成 let 可以作为一种解决方案。如果你有兴趣，也可以先去分析。</p><p>对于 const，这里再补充一点，用于加深对基本类型和引用类型的理解。</p><pre class="brush:php;toolbar:false">const a = 1;
const b = { value: 1 };

a = 2; // => Error
b.value = 2; // => 2
b = { value: 2 }; // => Error

本质上，const 并不是保证变量的值不得改动，而是变量指向的内存地址不得改动。

声明全局变量

直接通过 var 声明全局变量，这个全局变量会作为 window 对象的一个属性。

var a = 1;
window.a // => 1

在这里提出两个问题，一是 let 声明的全局变量会成为 window 的属性吗？二是 var 声明的全局变量和直接在 window 创建属性有没有区别？

先来回答第一问题。let 声明的全局变量不会成为 window 的属性。用什么来支撑这样的结论呢？在 ES6 中，对于 let 和 const 声明的变量从一开始就形成封闭作用域。想想之前的暂时性死区。

第二个问题，var 声明的全局变量和直接在 window 创建属性存在着本质的区别。先看下面的代码：

var a = 1;
window.a // => 1

window.b = 2;

delete window.a
delete window.b

window.a // => 1
window.b // => undefined

我们可以看到，直接创建在 window 上的属性可以被 delete 删除，而 var 创建的全局属性则不会。这是现象，通过现象看本质，二者本质上的区别在于：

使用 var 宣告的全域變數的 [[configurable]] 資料屬性的值為 false，不能透過 delete 刪除。而直接在物件上建立的屬性預設 [[configurable]] 的值為 true，即可以被 delete 刪除。 （關於[[configurable]] 屬性，在後面的文章中分析物件的時候還會提到）

小結

在這篇「資料類型與變量」文章中，分析了7 個大類。再來回顧一下：

基本型別、參考型別、參數傳遞方式、如何判斷資料型別、資料型別轉換、變數提升與暫時性死區、宣告全域變數。

這些不僅是校招面試中的高頻考點，也是學習 JS 必不可少的知識點。

Tip1：《JavaScript 高階程式設計》這本書被稱為「前端的聖經」是有原因的。對於正在準備校園招募的你，非常有必要！ 書讀百遍，其義自見。 你會發現你在面試中遇到的絕大部分 JS 相關的知識點都能在這本書中找到「答案」！

Tip2：在準備複習的過程中，注意知識的模組性與相關性。你得有自己劃分知識模組的能力，例如今天的「資料類型與變數」模組。相關性是指，任何的知識都是由連結的，例如這裡牽涉到作用域、記憶體等模組。

#

以上是JavaScript的資料型態與變數的解析（附範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！