javascript技巧之拆箱裝箱和型別轉換

本篇文章為大家帶來了關於javascript中的相關知識，其中主要介紹了拆箱裝箱和型別轉換的相關問題，裝箱是指把基本資料型別轉換為對應的引用類型的操作，下面就一起來看一下，希望對大家有幫助。

相關推薦：javascript教學

#基本資料型別：string、 number、boolean

引用型別：object、function

不存在的型別： undefined

String、Number、Boolean分別屬於string、number 、boolean三個原始類型的包裝類型，它們的物件屬於參考類型。

裝箱

裝箱是指把基本資料型別轉換為對應的參考型別的動作，這個過程主要是指string、 number、boolean類型的數據，透過String、Number、Boolean進行包裝成為引用類型資料的過程。

// 隐式装箱var s1 = 'Hello World'; 
var s2 = s1.substring(2);

上面第二行程式碼的執行步驟其實是這樣的：

1. 使用new String('Hello World')建立一個暫時的實例物件；
2. 使用臨時物件呼叫substring方法；
3. 將執行結果賦值給s2；銷毀暫時的實例物件。

上面的步驟轉換為程式碼，如下：

// 显式装箱var s1 = 'Hello World'; 
var tempObj = new String('Hello World');
var s2 = tempObj.substring(2);

拆箱

拆箱是把引用型別轉換為基本的資料型別。

關於拆箱過程中的ToPrimitive

類型轉換

運算子對於兩端的變量，都有一個期待類型，在javascript中，凡是不滿足運算子期待類型的變量，都會做做隱式轉換。

邏輯運算子

在進行邏輯運算時，隱式轉換只有一個標準：只有null 、undefined、 ''、 NaN、 0和false 表示false，其他的情況都是true，例如{} , []。

算術運算子

1. 如果算術運算子兩端皆為number類型的數據，直接進行計算;

2. 如果算術運算子兩端存在非number的基本資料類型，則對非number的運算數使用Number()進行裝箱，然後將返回值進行拆箱為number類型，參與計算；

3. 算術運算子兩端存在引用資料類型，則先對引用類型進行拆箱操作，如果結果為非number類型，則根據條件2執行，否則執行條件1。

1 - true 
// 0， 首先 Number(true) 转换为数字 1， 然后执行 1 - 11 - null 
// 1,  首先把 Number(null) 转换为数字 0， 然后执行 1 - 01 * undefined 
//  NaN, Number(undefined) 转换为数字是 NaN , 然后执行 1 * NaN2 * ['5'] 
//  10， ['5'] 依照ToPrimitive规则进行拆箱会变成 '5', 然后通过 Number('5') 进行拆装箱再变成数字 5123 + {valueOf:()=>{return 10}}   
// 133  {valueOf:()=>{return 10}} 依照ToPrimitive规则会先调用valueOf，获得结果为10

當 作為單目運算子出現在變數的前面時，表示的意思是將變數轉換為Number類型

+"10" 	
// 10  同 Number("10")+['5']  
// 5   ['5']依照ToPrimitive规则会变成 '5', 然后通过`Number`的拆箱操作再变成数字 5

字串連接符

字串連接符的符號同算術運算子的 。

1. 如果算術運算子兩端均為string類型的數據，直接進行連接
2. 如果運算子的兩端存在非string的基本類型，則對非string的基本型別資料使用String()進行裝箱，然後將傳回值拆箱為基本型別，參與字串拼接。
3. 當 兩端兩端存在引用資料類型，則先將參考類型拆箱操作，如果結果為非string類型，則根據條件2執行，否則執行條件1。

關係運算子

• NaN和其他任何類型，做任何關係運算永遠回傳false（包括和他自己）。如果想判斷一個變數是不是NaN ， 可以用Number.isNaN()來判斷。

• null == undefined比較結果是true，除此之外，null、undefined 和其他的（不包括它們本身）任何結果的比較值都為false。

  這裡是規則定義的，null 為object 的類型，可是呼叫valueOf或toString都會有語法錯誤，這裡直接記住結果就行。

• 一般情況：

  1. 如果算术运算符两端均为number类型的数据，直接进行计算；
  2. 如果算术运算符两端存在非number的基本数据类型，则对非number的运算数使用Number()进行装箱，然后对返回值进行拆箱为number类型，参与计算；
  3. 算术运算符两端存在引用数据类型，则先对引用类型进行拆箱操作，如果结果为非number类型，则根据条件2执行，否则执行条件1。

{} == !{}  
// false   Number({}.valueOf().toString())==> NaN , 所以题目等同于 NaN == false , NaN 和 任何类型比较都是 false[] == []  
// false  内存地址不同![] == 0  
// true   ![]==>false , 所以题目等同于 false==0 , Number(false)==>0 ,  所以结果为 true

一些题目

1. [] == ![]

       - 第一步，![] 会变成 false
       - 第二步，[]的valueOf是[]，[]是引用类型，继续调用toString，题目变成： "" == false
       - 第三步，符号两端转换为Number， 得到 0==0
       - 所以， 答案是 true

2. [undefined] == false

       - 第一步，[undefined]的valueOf结果为 [undefined]，然后[undefined]通过toString变成 '' ，所以题目变成  '' == false
       - 第二步，符号两端转换为Number， 得到 0==0
       - 所以， 答案是 true ！

3. 如何使a==1 && a==2 && a==3的结果为 true

   var a = {
       value: 0,
       valueOf: function() {
           this.value += 1;
           return this.value    }};console.log(a == 1 && a == 2 && a == 3) // true

4. 如何使a===1&&a===2&&a===3的结果为 true

   // 使用 defineProperty 进行数据劫持var value = 0;Object.defineProperty(window,"a",{
       get(){
           return ++value;
       }})console.log(a===1&&a===2&&a===3)  //true

5. 实现一个无限累加函数

6. 柯里化实现多参累加

相关推荐：javascript学习教程

以上是javascript技巧之拆箱裝箱和型別轉換的詳細內容。更多資訊請關注PHP中文網其他相關文章！