細數 JavaScript 實用黑科技(二)

前言

書接上文：細數 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 (條件)

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