摘要：前言書接上文細數實用黑科技一本文介紹獨孤九劍和兩篇最高內功心法。可以將變量轉換為布爾值。可以把任何類型的值轉換為布爾值，并且只有當這個變量的值為的時候才會返回，其他情況都返回。同樣的，函數體內部聲明的函數，作用域綁定函數體內部。

書接上文：細數 JavaScript 實用黑科技(一)

本文介紹 獨孤九劍和兩篇最高內功心法。

!! 操作符：!!variable 。
!! 可以將變量轉換為布爾值。
!! 可以把任何類型的值轉換為布爾值，并且只有當這個變量的值為 0 / null / "" / NaN / undefined 的時候才會返回 false，其他情況都返回 true。

!!"" 
// false
!!" "
// true
!!0
// false
!!null
// false
!!undefined
// false
!!NaN
// false
!!123
// true
!![]
// true

它只能作用于字符串數值，否則就會返回 NaN（不是數字）。
例子：

function toNumber(strNumber) {
    return +strNumber;
}
console.log(toNumber("1234")); 
// 1234
console.log(toNumber("abc"));
 // NaN

并且此方法也可作用于 Date 函數，這是它將返回時間戳：

console.log(+new Date()) 
// 1461288164385

if (token) {
    getUser();
}

可以通過使用 && 操作符組合兩個變量來縮短它。

比如前面這段代碼可以縮短為：

token && getUser();

如果第一個參數返回 false，第二個值將被作為默認值。用來設置默認參數。

function getUser(token) {
    var token = token || "XXXXXXXXXX";
    console.log("token",token)
    // 用 token 來異步請求數據
    // .......
}
getUser(666666);
// 666666
getUser();
// XXXXXXXXXX

當然，ES6 已經支持默認值參數設置了。
如果你想學到更多工作中會用到的 ES6 的新特性，請看小汪寫過的：那些必會用到的 ES6 精粹

大多數人的做法：

var arr = [123, 456, 789];
var len = arr.length;
var end = arr[len-1]
console.log("end:", end)
// "end:" 789

優化方法：

var array = [1, 2, 3, 4, 5, 6];
console.log( array.slice(-1) ); // [6]
console.log( array.slice(-1)[0] ); // 6
console.log( array.slice(-2) ); // [5,6]
console.log( array.slice(-3) ); // [4,5,6]

不適用 Lodash 等這些庫打亂數組元素順序，你可以使用這個技巧：

var list = [1,2,3];
console.log( list.sort(function() { Math.random() - 0.5 }) ); // [2,1,3]

數組的 slice方法可以將“類似數組的對象”變成真正的數組。
var arr = Array.prototype.slice.call(arrayLike);

var elements = document.querySelectorAll("p"); 
 // NodeList 節點列表對象。但這個對象并不具有數組的全部方法，如 sort(), reduce(), map(), filter()
var arrayElements = [].slice.call( elements ); 
// 現在 NodeList 是一個數組
var arrayElements = Array.from( elements ); 
// 這是另一種轉換 NodeList 到 Array  的方法

比如，當數組中有 10 個元素，而你只想獲取其中前 5 個的話，你可以截斷數組，通過設置 array.length = 5 使其更小。

var array = [1,2,3,4,5,6];
console.log( array.length ); 
// 6
array.length = 3;
console.log( array.length );
 // 3
console.log( array ); 
// [1,2,3]

一般人合并兩個數組的話，通常會使用 Array.concat()。

var array1 = [1,2,3];
var array2 = [4,5,6];
console.log(array1.concat(array2)); // [1,2,3,4,5,6];

然而，這個函數并不適用于合并大的數組，因為它需要創建一個新的數組，而這會消耗很多內存。

這時，你可以使用 Array.push.apply( arr1, arr2 ) 來代替創建新的數組，它可以把第二個數組合并到第一個中，從而較少內存消耗：

var array1 = [1,2,3];
var array2 = [4,5,6];
console.log( array1.push.apply(array1, array2) );  // [1,2,3,4,5,6];

函數本身也是一個值，也有自己的作用域。它的作用域與變量一樣，就是其聲明時所在的作用域，與其運行時所在的作用域無關。

// 先來一道題，看看輸出什么
var a = 1;
var x = function () {
  console.log(a);
};

function f() {
  var a = 2;
  x();
}

f() // 1

上面代碼中，函數 x 是在函數 f 的外部聲明的，所以它的作用域綁定外層，內部變量 a 不會到函數 f 體內取值，所以輸出 1，而不是 2。

總之，函數執行時所在的作用域，是定義時的作用域，而不是調用時所在的作用域。

很容易犯錯的一點是，如果函數 A 調用函數 B，卻沒考慮到函數 B 不會引用函數 A 的內部變量。

// 再來一道題，看看輸出什么
var x = function () {
  console.log(a);
};

function y(f) {
  var a = 2;
  f();
}

y(x)
// ReferenceError: a is not defined

上面代碼將函數 x 作為參數，傳入函數 y。但是，函數 x 是在函數 y 體外聲明的，作用域綁定外層，因此找不到函數 y 的內部變量 a，導致報錯。

同樣的，函數體內部聲明的函數，作用域綁定函數體內部。

function foo() {
  var x = 1;
  function bar() {
    console.log(x);
  }
  return bar;
}

var x = 2;
var f = foo();
f() // 1

上面代碼中，函數 foo 內部聲明了一個函數 bar，bar 的作用域綁定 foo。當我們在 foo 外部取出 bar 執行時，變量 x 指向的是 foo 內部的 x，而不是 foo 外部的 x。正是這種機制，構成了 “閉包” 現象。

閉包簡單理解，請看我的筆記： 閉包

立即調用的函數表達式”（Immediately-Invoked Function Expression），簡稱 IIFE。

通常寫法：

(function(){ /* code */ }());
// 或者
(function(){ /* code */ })();

注意，上面兩種寫法最后的分號都是必須的。如果省略分號，遇到連著兩個 IIFE，可能就會報錯。

// 報錯
(function(){ /* code */ }())
(function(){ /* code */ }())

上面代碼的兩行之間沒有分號，JavaScript 會將它們連在一起解釋，將第二行解釋為第一行的參數。

IIFE 的目的有兩個：

一是不必為函數命名，避免了污染全局變量；

二是 IIFE 內部形成了一個多帶帶的作用域，可以封裝一些外部無法讀取的私有變量。

例子：

// 寫法一
var tmp = newData;
processData(tmp);
storeData(tmp);

// 寫法二
(function () {
  var tmp = newData;
  processData(tmp);
  storeData(tmp);
}());

上面代碼中，寫法二比寫法一更好，因為完全避免了污染全局變量。

獨孤九劍共九式和兩篇最高內功心法都在這里面了，大俠學會后，除惡懲奸，遨游江湖吧！！！

如果你覺得該文章對你有幫助，歡迎到我的 github，star 一下，謝謝。

github 地址

參考教程： 《JavaScript 語言入門教程》
參考文章：12 個非常有用的 JavaScript Hacks

你以為本文就這么結束了 ? 精彩在后面 ！！！

對 全棧修煉 有興趣的朋友可以掃下方二維碼關注我的公眾號

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

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