( 譯、持續更新 ) JavaScript 上分小技巧(四)

後續如有內容，本篇將會照常更新併排滿15個知識點，以下是其他幾篇譯文的地址：

第一篇地址：( 譯、持續更新 ) JavaScript 上分小技巧(一)

第二篇地址：( 譯、持續更新 ) JavaScript 上分小技巧(二)

第三篇地址：( 譯、持續更新 ) JavaScript 上分小技巧(三)

#48 - 內置函數reduce的用法
正如文檔所寫，reduce()方法應用一個函數以針對數組的值(從左到右)，以減至一個值。
reduce()
reduce()方法接收兩個參數(M：mandatory,O:options):
　(M)一個回調函數，用於處理與先前的計算結果和下一個元素。
　(O)被作為回調函數的第一個調用的參數的初始值。
所以，我們來看看普通用法，後面再來一個更先進的。
常見的用法(積累，連接)
假如我們在購物，並且購物車足夠滿，讓我們計算價格總和：

// 現在的價格
var items = [{price: 10}, {price: 120}, {price: 1000}];
// reducer函數
var reducer = function add(sumSoFar, nextPrice) { return sumSoFar + nextPrice.price; };
// 處理...
var total = items.reduce(reducer, 0);
console.log(total); // 1130

函數的可選參數在一般情況下是0，它可以是個對象，也可以是個數組。
現在，我們獲得一張20元的代金券：

var total = items.reduce(reducer,-20);
console.log(total); // 1110

高端用法(組合)
落後的思想是將reducers分別寫成單獨的功能，並最終計算出一個新的reducers的功能。
為了說明這一點，讓我們創建一個對象與一些能夠計算不同貨幣美元的總價格的reducers功能。

var reducers = {
  totalInDollar: function(state, item) {
    state.dollars += item.price;
    return state;
  },
  totalInEuros : function(state, item) {
    state.euros += item.price * 0.897424392;
    return state;
  },
  totalInYen : function(state, item) {
    state.yens += item.price * 113.852;
    return state;
  },
  totalInPounds : function(state, item) {
    state.pounds += item.price * 0.692688671;
    return state;
  }
  // 更多...
};

然後，我們創建一個新的功能：
　· 負責應用reduce的各部分功能。
　· 將返回一個新的回調函數。

var combineTotalPriceReducers = function(reducers) {
  return function(state, item) {
    return Object.keys(reducers).reduce(
      function(nextState, key) {
        reducers[key](state, item);
        return state;
      },
      {}      
    );
  }
};

現在，讓我們看看怎麼使用這個：

var bigTotalPriceReducer = combineTotalPriceReducers(reducers);
var initialState = {dollars: 0, euros:0, yens: 0, pounds: 0};
var totals = items.reduce(bigTotalPriceReducer, initialState);
console.log(totals);
/*
Object {dollars: 1130, euros: 1015.11531904, yens: 127524.24, pounds: 785.81131152}
*/

我希望這個方法能夠在你所需要的時候給你提供一個reduce使用的思路。
#47 - 基本聲明
下麵是javascript中聲明變數的不同方式。console.log能夠很好的解釋這裡將發生什麼。

var y, x = y = 1 //== var x; var y; x = y = 1
console.log('_> 1:', `x = ${x}, y = ${y}`)
// 將會列印
//_> 1: x = 1, y = 1

首先，我們設置兩個變數，在這裡沒更多的操作。

;(() => { 
  var x = y = 2 // == var x; y = 2;
  console.log('2.0:', `x = ${x}, y = ${y}`)
})()
console.log('_> 2.1:', `x = ${x}, y = ${y}`)
// 將會列印
//2.0: x = 2, y = 2
//_> 2.1: x = 1, y = 2

正如你所見的，這裡的代碼只改變了全局的y，因為我們沒有在閉包中聲明變數。

;(() => { 
  var x, y = 3 // == var x; var y = 3;
  console.log('3.0:', `x = ${x}, y = ${y}`)
})()
console.log('_> 3.1:', `x = ${x}, y = ${y}`)
// 將會列印
//3.0: x = undefined, y = 3
//_> 3.1: x = 1, y = 2

現在我們通過var來聲明變數。這意味著他們只存在封閉的語境中。

;(() => { 
  var y, x = y = 4 // == var x; var y; x = y = 4
  console.log('4.0:', `x = ${x}, y = ${y}`)
})()
console.log('_> 4.1:', `x = ${x}, y = ${y}`)
// 將會列印
//4.0: x = 4, y = 4
//_> 4.1: x = 1, y = 2

這兩個變數都通過var聲明並且只會給定了值。因為local>global，所以x和y在本地封閉語境中，意味著全局的x和y沒做改變。

x = 5 // x = 5
console.log('_> 5:', `x = ${x}, y = ${y}`)
// 將會列印
//_> 5: x = 5, y = 2

這最後一行是明確的。
更多的變數相關信息：MDN
#46 - js純粹的檢測文檔載入完畢
使用readyState以跨瀏覽器的方式來檢測javascript文檔是否載入。

if (document.readyState === 'complete') {
    // 頁面已經完全載入
}

你能夠檢查文檔是否載入...

let stateCheck = setInterval(() => {
    if (document.readyState === 'complete') {
    clearInterval(stateCheck);
     // document ready
  }
}, 100);

或者使用onreadystatechange...

document.onreadystatechange = () => {
  if (document.readyState === 'complete') {
   // document ready
  }
};

使用document.readyState === 'interactive'檢測DOM是否ready。
### 2016-02-18 更新 ###