JavaScript數據類型中易被忽略的點

String

• 字符串中可以包含由反斜槓\和字符構成的特殊字符，如\n換行，\b 退格,\f 換頁，\r回車，\tTab；

var multiLine = " first \n second \n third line "
alert(multiLine) // alerts 3 lines

• ""當做轉義符號也可以避免一些問題，如

var str = 'I\'m the Valrus'

• 當計算字符串長度時，特殊字符也會參與計算，如：

var str = "My\n" // 3 .`\n`也算其中之一
alert(str.length)  // 3

• javascript中的字符串只能讀取不能改變；

• javascript中有兩種查找子字符串的方法，indexOf和lastIndexOf,返回找到的第一個字符的位置，沒找到返回-1；

• 逐位運算符~not,~n相當於 -(n+1)，if ~indexOf相當於if found;

• 取得子字符串的三種方法substr, substring, slice,可以Google找到它們之間的差異，也可以從後文鏈接中找到；

• 字符串的筆記

  • 字符串逐位比較，一旦比較出大小就不再往後比較；"Bob" > "Bar" // true, because o > a,alert("2" > "14"); // true

  • 字符裝換為ASCII碼比較

  • 當有數值參與比較時，會把字符串也轉換為數值，如alert(2 > "14"); // false

Number, Math

• JavaScript中的數值采用雙精度（IEEE 754），每個數占8byte；

• JavaScript可以識別十六進制（0xFF），八進制（010）以及科學計數方法的數字（3e5）;

• Infinity和-Infinity是兩個特殊的值，它們大於或小於任何值，對它們進行運算後依舊會得到Infinity,二者相除會得到NaN,並不會報錯;

• 當一個數學運算符不能被正確執行時會得到NaN（0/0），它不等於包括其本身的任何數值,只可有isNaN函數檢查；

• 除了雙向的加號，其它所有的運算符都會把數值形式的字符串轉換為數值；alert( -"12.34" / "2" ) // -6.17;

• 不能轉換則返回NaN;

• 一個由空白符組成的字符串會被轉化為0；

• 如果字符串首字母非數字，parseInt/parseFloat會返回NaN,alert( parseInt('a123') )//NaN;

• JavaScript中的數值計算存在精度問題（alert(0.1 + 0.2 == 0.3)//false）(浮點數不能被二進制精確的表示)，解決方法可以先轉化為整數，再除以10alert( (0.1*10 + 0.2*10) / 10 ) // 0.3，也可以使用toFixed;

Array

• shift,pop刪除對應項，並返回該項；

• unshift,push;

• join,split;

• 如果給數組的length賦值低於數組實際的長度，會刪除超過的項；

• push,pop直接操作最後一項，其運行速度快，效率高；

• shift,unshift操作第一項，需要記住整個數組，效率低；

• 數組中的length方法（屬性） 其實是last index+1,

  var fruits = [] // empty array
  fruits[1] = 'Peach'
  fruits[99] = 'Apple'
  alert(fruits.length)  // 100 (but 2 elements)

• 對數組也可以使用delete，但是只會刪除該項的值，不會真的刪除該項；

• splice在原數組上更改和slice返回原數組的一個片段（新數組）；

• sort默認把內容轉化為string，然後根據ASCII碼比較；

• new Array返回的是具有指定長度的值為空的數組；

Objects

• obj.prop和obj[prop]二者都可以訪問對象中的一項，但是值得注意的是obj.prop裡prop是該項的名稱，obj[prop]裡的prop是該項的值，此時prop是字符串，應該加引號；

• alert("key" in obj) // true, key exists使用in運算符可以用來確定是否存在某一項；

• 使用for in時，子項處理順序不確定，不同浏覽器有所差別；

• 對象中可以儲存一切類型，包括函數；

• 可以利用對象實現鏈式調用，其關鍵在於每次的返回值為this;

var ladder = {
  step: 0,
  up: function() {
    this.step++
    return this
  },
  down: function() {
    this.step--
    return this
  },
  showStep: function() {
    alert(this.step)
    return this
  }
}
ladder.up().up().down().up().down().showStep()  // 1

• 使用構造函數創建對象時，var animal = new Animal()和var animal = new Animal等同；

• 使用構造函數創建對象時，其關鍵在於this，如果構造函數返回了一個對象則會忽略this；

• JS中存在Math,Date,RegExp三種內置對象，函數從某種程度上來說也是對象，String，Number，Booleans三者比較特殊，它們各自擁有一些方法；

對象轉換為簡單數據類型

轉化為字符串

• 如果對象中存在toString方法，且返回一個簡單類型數據，那麼就返回這個字符串（所有數組默認擁有，所以一般執行到此完畢）；

• 默認

  alert( {key: 'value'} ) // toString for Objects outputs: [object Object]
  alert( [1,2] )          // toString for Arrays lists elements "1,2"
  alert( new Date )       // toString for Dates outputs the date as a string

• 可以自己定義一個toString方法

  var user = {
  firstName: 'John',
  toString: function() {
    return 'User ' + this.firstName
  }
  }
  alert( user )  // User John

• 如果存在valueOf方法，且返回一個簡單類型數據，那麼返回這個；

• alert（）會觸發裝換為字符串

轉換為數值（兩種情況下發生，非常常見）

• 對數值進行計算的方法（ Math.sin(obj),isNaN(obj)）以及運算符（+，-，*，/等等）

• 做比較時（注：obj1==obj2,只有二者引用同一對象時才相等）；Number(obj)也會轉換,

• 數值轉換規則如下

  • 如果存在valueOf方法，且返回一個簡單類型數據，那麼返回這個結果；

  • 如果對象中存在toString方法，且返回一個簡單類型數據，那麼就返回這個字符串；

  alert( new Date() ) // The date in human-readable form
  alert( +new Date() ) // Microseconds till 1 Jan 1970

  • 自己定義一個valueOf方法

    var room = {
      num: 777,
      valueOf: function() {
        return this.num
      }
    }
    alert( +room )  // 777

  • 不存在valueOf方法，但是存在toString方法時會調用此方法

    var room = {
      num: 777,
      toString: function() {
        return this.num
      }
    }
    alert( room / 3 )  // 259

  • 注意只需要返回簡單數值類型即可（Numeric，String，Boolean）,不一定非要返回數值；

裝換為布爾值

• 裝換表
  |Value | Converted to…|

true/false no conversion undefined， null false Number 0, NaN become false, others - true. String "" becomes false, any other - true Object true

• 注意，字符"0"為true；

• 涉及到邏輯運算符會觸發布爾裝換；

• 但是也有比較奇怪的地方,看下面兩例

  alert( [0] == 0 )  // true
  alert( "\n0\n" == 0 ) // true
  alert( "\n0\n" == false ) // true
// 

  if ([0]) alert(1)  // 1, if treats [0] as true
  if ("\n0\n") alert(2) // 2, if treats "\n0\n" as true

• 仔細想想如何轉換的，就可以理解了。==只比較值得結果，[0]，“0”裝換為數值後就是0，但是當他們是數組中的一項，或字符串時並非是空的。

再看一個比較奇怪的例子

alert( [] == ![] ) // true

• 首先，看右邊![]，邏輯非對[]進行布爾轉換，依據上面的裝換表，數組其實也是對象，object裝換為真。所以右邊![] = !true = false；

• 再看左邊，對象與簡單類型比較時，會按數值方式裝換，沒有valueOf，將使用toString進行裝換（以逗號分隔的字符串）那麼就裝換為一個空的字符串''=false；

• 所以二者相等；

檢測一下你是否真的掌握了數值裝換，看看下面的題目能不能理解

6 / "3" = 2
"2" * "3" = 6
4 + 5 + "px" = "9px"
"$" + 4 + 5 = "$45"
"4" - 2 = 2
"4px" - 2 = NaN
7 / 0 = Infinity
{}[0] = undefined
parseInt("09") = "0" or "9" // octal or decimal, depends on the browser
5 && 2 = 2
2 && 5 = 5
5 || 0 = 5
0 || 5 = 5

說明

本文對各類型並未做詳盡的說明，想了解更多資料可以參考以下文章

• Mastering data types