細數 JavaScript 實用黑科技(一)

前言

只有深刻學精一門語言，學其餘語言才能更好地觸類旁通，觸類旁聽。

從接觸前端開發到如今已經將近 2 年了，最近又看了阮一鋒寫的： 《JavaScript 語言入門教程》 一書，重溫 JavaScript 。

小汪將工做和麪試遇到過的，沒多少人知道的 JavaScript 技巧，卻十分實用的技巧都總結在這裏面，分享給你們 。

溫故而知新，咱們對技術應該有的態度是： Stay hungry ! Stay young ！

1. 標籤（label）

JavaScript 語言容許，語句的前面有標籤（label），至關於定位符，用於跳轉到程序的任意位置，標籤的格式以下。

label:
  語句

標籤能夠是任意的標識符，但不能是保留字，語句部分能夠是任意語句。

標籤一般與 break 語句和 continue 語句配合使用，跳出特定的循環。

top:
  for (var i = 0; i < 3; i++){
    for (var j = 0; j < 3; j++){
      if (i === 1 && j === 1) break top;
      console.log('i=' + i + ', j=' + j);
    }
  }
// i=0, j=0
// i=0, j=1
// i=0, j=2
// i=1, j=0

上面代碼爲一個雙重循環區塊，break 命令後面加上了 top 標籤（注意，top 不用加引號），知足條件時，直接跳出雙層循環。若是 break 語句後面不使用標籤，則只能跳出內層循環，進入下一次的外層循環。

標籤也能夠用於跳出代碼塊。

foo: {
  console.log(1);
  break foo;  // 注意要加 break 才能退出
  console.log('本行不會輸出');
}
console.log(2);
// 1
// 2

上面代碼執行到 break foo，就會跳出區塊。

continue 語句也能夠與標籤配合使用。

top:
  for (var i = 0; i < 3; i++){
    for (var j = 0; j < 3; j++){
      if (i === 1 && j === 1) continue top;
      console.log('i=' + i + ', j=' + j);
    }
  }
// i=0, j=0
// i=0, j=1
// i=0, j=2
// i=1, j=0
// i=2, j=0
// i=2, j=1
// i=2, j=2

上面代碼中，continue 命令後面有一個標籤名，知足條件時，會跳過當前循環，直接進入下一輪 外層循環。 若是 continue 語句後面不使用標籤，則只能進入下一輪的 內層循環。

小汪通過實踐得出如下用途。

用途：

• 能夠跳出循環。
• 對於多層循環也一樣適用。
• 特別是兩層或者多層循環，只是爲了找到想要的某個值時，而循環的數據是大量的，用標籤就很是高效。

2. 區分數組和對象

先來道面試題：

console.log(typeof window)
console.log(typeof {}) 
console.log(typeof [])
console.log(typeof null)

答案：

"object"
"object"
"object"
"object"

上面代碼中，null 返回 object 。這是因爲歷史緣由形成的，且一切原型鏈的終點都是 null。
空數組（ [] ）的類型也是 object，這表示在 JavaScript 內部，數組本質上只是一種特殊的對象。而 instanceof 運算符能夠區分數組和對象。

var o = {};
var a = [];

o instanceof Array // false
a instanceof Array // true

3. null, undefined 和布爾值

常常會有面試官問：null 與 undefined 的區別 ？

區別：

• null 是一個表示「空」的對象，轉爲數值時爲 0 。
• undefined 是一個表示"此處無定義"的原始值，轉爲數值時爲 NaN。

Number(null) // 0
5 + null // 5

Number(undefined) // NaN
5 + undefined // NaN

3.1 用法和含義

對於 null 和 undefined，大體能夠像下面這樣理解。

null 表示空值，即該處的值如今爲空。調用函數時，某個參數未設置任何值，這時就能夠傳入 null，表示該參數爲空。好比，某個函數接受引擎拋出的錯誤做爲參數，若是運行過程當中未出錯，那麼這個參數就會傳入 null ，表示未發生錯誤。

undefined 表示「未定義」，下面是返回 undefined 的典型場景。

// 變量聲明瞭，但沒有賦值
var i;
i // undefined

// 調用函數時，應該提供的參數沒有提供，該參數等於 undefined
function f(x) {
  return x;
}
f() // undefined

// 對象沒有賦值的屬性
var  o = new Object();
o.p // undefined

// 函數沒有返回值時，默認返回 undefined
function f() {}
f() // undefined

注意，布爾值轉換的時候，空數組（[]）和空對象（{}）對應的布爾值，都是true。

if ([]) {
  console.log('true');
}
// true

if ({}) {
  console.log('true');
}
// true

4. 數值

JavaScript 內部，全部數字都是以 64 位浮點數形式儲存，即便整數也是如此。因此，1 與 1.0 是相同的，是同一個數。

1 === 1.0 // true

JavaScript 語言的底層根本沒有整數，全部數字都是小數（ 64 位浮點數）。容易形成混淆的是，某些運算只有整數才能完成，此時 JavaScript 會自動把 64 位浮點數，轉成 32 位整數，而後再進行運算。

因爲浮點數不是精確的值，因此涉及小數的比較和運算要特別當心。

例如：

0.1 + 0.2 === 0.3
// false

0.3 / 0.1
// 2.9999999999999996

(0.3 - 0.2) === (0.2 - 0.1)
// false

2.22 + 2.21
// 4.43 

3.45 + 1.11
// 4.5600000000000005

2.22 + 2.24
// 4.460000000000001

可是商品計算金額的時候，金額的結果通常都是保留兩倍小數點的，那怎麼辦呢？

能夠用 toFixed 解決：

var a = 2.22 + 2.24
// 4.460000000000001
var result = (a).toFixed(2)
// 4.46

5. Object 屬性的遍歷

for...in 循環用來遍歷一個對象的所有屬性(包括可遍歷的繼承的屬性)。可是，通常狀況下，都是隻想遍歷對象自身的屬性，因此使用 for...in 的時候，應該結合使用 hasOwnProperty 方法，在循環內部判斷一下，某個屬性是否爲對象自身的屬性。

var person = { name: '老張' };

for (var key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(key);
  }
}
// name

最後

重大事件：2017年11月，全部主流瀏覽器所有支持 WebAssembly，這意味着任何語言均可以編譯成 JavaScript，在瀏覽器運行。

前端仍是頗有將來的 ！！！

下節內容：細數 JavaScript 實用黑科技(二) 。

若是你以爲該文章對你有幫助，歡迎到個人 github star 一下，謝謝。

github 地址

參考教程： 《JavaScript 語言入門教程》

你覺得本文就這麼結束了 ? 精彩在後面 ！！！

對 全棧修煉 有興趣的朋友能夠掃下方二維碼關注個人公衆號

我會不按期更新有價值的內容，長期運營。

關注公衆號並回復 福利 可領取免費學習資料，福利詳情請猛戳： Python、Java、Linux、Go、node、vue、react、javaScript