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

書接上文：細(xì)數(shù) JavaScript 實(shí)用黑科技(一)

本文介紹 獨(dú)孤九劍和兩篇最高內(nèi)功心法。

!! 操作符：!!variable 。
!! 可以將變量轉(zhuǎn)換為布爾值。
!! 可以把任何類型的值轉(zhuǎn)換為布爾值，并且只有當(dāng)這個(gè)變量的值為 0 / null / "" / NaN / undefined 的時(shí)候才會(huì)返回 false，其他情況都返回 true。

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

它只能作用于字符串?dāng)?shù)值，否則就會(huì)返回 NaN（不是數(shù)字）。
例子：

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

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

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

if (token) {
    getUser();
}

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

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

token && getUser();

如果第一個(gè)參數(shù)返回 false，第二個(gè)值將被作為默認(rèn)值。用來設(shè)置默認(rèn)參數(shù)。

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

當(dāng)然，ES6 已經(jīng)支持默認(rèn)值參數(shù)設(shè)置了。
如果你想學(xué)到更多工作中會(huì)用到的 ES6 的新特性，請看小汪寫過的：那些必會(huì)用到的 ES6 精粹

大多數(shù)人的做法：

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

優(yōu)化方法：

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 等這些庫打亂數(shù)組元素順序，你可以使用這個(gè)技巧：

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

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

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

比如，當(dāng)數(shù)組中有 10 個(gè)元素，而你只想獲取其中前 5 個(gè)的話，你可以截?cái)鄶?shù)組，通過設(shè)置 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]

一般人合并兩個(gè)數(shù)組的話，通常會(huì)使用 Array.concat()。

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

然而，這個(gè)函數(shù)并不適用于合并大的數(shù)組，因?yàn)樗枰獎(jiǎng)?chuàng)建一個(gè)新的數(shù)組，而這會(huì)消耗很多內(nèi)存。

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

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

函數(shù)本身也是一個(gè)值，也有自己的作用域。它的作用域與變量一樣，就是其聲明時(shí)所在的作用域，與其運(yùn)行時(shí)所在的作用域無關(guān)。

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

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

f() // 1

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

總之，函數(shù)執(zhí)行時(shí)所在的作用域，是定義時(shí)的作用域，而不是調(diào)用時(shí)所在的作用域。

很容易犯錯(cuò)的一點(diǎn)是，如果函數(shù) A 調(diào)用函數(shù) B，卻沒考慮到函數(shù) B 不會(huì)引用函數(shù) A 的內(nèi)部變量。

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

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

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

上面代碼將函數(shù) x 作為參數(shù)，傳入函數(shù) y。但是，函數(shù) x 是在函數(shù) y 體外聲明的，作用域綁定外層，因此找不到函數(shù) y 的內(nèi)部變量 a，導(dǎo)致報(bào)錯(cuò)。

同樣的，函數(shù)體內(nèi)部聲明的函數(shù)，作用域綁定函數(shù)體內(nèi)部。

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

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

上面代碼中，函數(shù) foo 內(nèi)部聲明了一個(gè)函數(shù) bar，bar 的作用域綁定 foo。當(dāng)我們在 foo 外部取出 bar 執(zhí)行時(shí)，變量 x 指向的是 foo 內(nèi)部的 x，而不是 foo 外部的 x。正是這種機(jī)制，構(gòu)成了 “閉包” 現(xiàn)象。

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

立即調(diào)用的函數(shù)表達(dá)式”（Immediately-Invoked Function Expression），簡稱 IIFE。

通常寫法：

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

注意，上面兩種寫法最后的分號都是必須的。如果省略分號，遇到連著兩個(gè) IIFE，可能就會(huì)報(bào)錯(cuò)。

// 報(bào)錯(cuò)
(function(){ /* code */ }())
(function(){ /* code */ }())

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

IIFE 的目的有兩個(gè)：

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

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

例子：

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

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

上面代碼中，寫法二比寫法一更好，因?yàn)橥耆苊饬宋廴救肿兞俊?/p> 最后

獨(dú)孤九劍共九式和兩篇最高內(nèi)功心法都在這里面了，大俠學(xué)會(huì)后，除惡懲奸，遨游江湖吧！！！

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

github 地址

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

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

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

我會(huì)不定期更新有價(jià)值的內(nèi)容，長期運(yùn)營。

關(guān)注公眾號并回復(fù) 福利 可領(lǐng)取免費(fèi)學(xué)習(xí)資料，福利詳情請猛戳： Python、Java、Linux、Go、node、vue、react、javaScript