javascript Reduce函數(shù)是比較強(qiáng)大的一個(gè)函數(shù),在簡(jiǎn)書(shū)上看到有個(gè)作者寫(xiě)了這個(gè)函數(shù)的文章,也是看到有個(gè)問(wèn)題就向他請(qǐng)教,大神很忙,但是仍然在github上做了答復(fù),我對(duì)那個(gè)問(wèn)題搞明白了,所以寫(xiě)了下面這個(gè)文章,但是沒(méi)有寫(xiě)完,現(xiàn)在陪老娘在醫(yī)院,又把這個(gè)問(wèn)題翻出來(lái)看,又不懂了,還是拉鋸戰(zhàn)啊. javascript的編程中,我開(kāi)始感到看別人的源碼最難的地方實(shí)際還是兩個(gè),一個(gè)是數(shù)組方法的靈活應(yīng)用,另一個(gè)是對(duì)象的淺拷貝和深拷貝的問(wèn)題.這兩個(gè)問(wèn)題要是有深刻的體會(huì),看源碼的難度會(huì)降低很多.reduce,slice,splice,concat函數(shù)是明星.遇到這幾個(gè)函數(shù)的時(shí)候就有些看不懂,所以掌握這幾個(gè)函數(shù)是非常重要的. 深拷貝和淺拷貝的問(wèn)題其實(shí)和javascript的對(duì)象和函數(shù)都是傳引用賦值息息相關(guān),一句話解決對(duì)象的共享還是獨(dú)享的問(wèn)題.javascript的設(shè)計(jì)模式很多都是利用對(duì)象很函數(shù)的傳引用賦值的特點(diǎn)來(lái)完成的.所以這兒地方也是非常的重要.javascript的數(shù)組元素也可以是對(duì)象的引用.

本人是新手,最大的體會(huì)是學(xué)到的兩個(gè)簡(jiǎn)單原則:1 對(duì)象是用來(lái)組織數(shù)據(jù)和相關(guān)方法的,所以組織方式越簡(jiǎn)單,越靈活越好,由于js的對(duì)象和函數(shù)都可以傳引用賦值,所以在js中,以對(duì)象字面量和數(shù)組的組織方式真的是非常的強(qiáng)大,之所以這么講,就是要把學(xué)習(xí)數(shù)組的方法提到新的高度.2 編程到底是在干什么？ 我逐漸體會(huì)到編程也就是解決信息的傳遞，存儲(chǔ)和處理的問(wèn)題. 所以很多問(wèn)題其實(shí)稍微抽象一下,問(wèn)題可能會(huì)簡(jiǎn)單一點(diǎn). 我簡(jiǎn)單的寫(xiě)了一個(gè)東西,在學(xué)習(xí)React/Redux的時(shí)候,總是掌握不了實(shí)質(zhì),就是Redux中的state的實(shí)質(zhì)是什么.前面學(xué)習(xí)的時(shí)候,總是言必稱(chēng)state,想了各種辦法去了解什么是state，為什么要這樣設(shè)計(jì).其實(shí)再抽象一下,這不就是一個(gè)小型的數(shù)據(jù)庫(kù)嗎？可以這樣說(shuō)嗎？當(dāng)然可以了,我看了一本介紹React的書(shū),有點(diǎn)確認(rèn)了,當(dāng)我這幾天再讀F8 app的代碼官方文檔的時(shí)候,facebook直接就是把Redux稱(chēng)為數(shù)據(jù)層.我還想了一些辦法來(lái)理解Redux，比如說(shuō)借用中介者模式,MVC解耦和模式,但是如果抽象為數(shù)據(jù)層,那么還有什么問(wèn)題解決不了的嗎？ 如果接觸過(guò)任何一種web框架語(yǔ)言,例如php/mysql,node/mongodb.每種都是解耦和,每種都是中介者模式.所以在理解這些概念的時(shí)候最基礎(chǔ)的內(nèi)容可能是最解決問(wèn)題的條件.你可以梳理一下這些框架中與數(shù)據(jù)庫(kù)操作都有哪些? 連接數(shù)據(jù)庫(kù),數(shù)據(jù)庫(kù)操作語(yǔ)句,數(shù)據(jù)庫(kù)文件,返回值等等.這些東西在react/redux中都能找到一摸一樣的內(nèi)容.web框架里的數(shù)據(jù)庫(kù)操作和redux的操作是完全一樣的,有什么奇怪的嗎？都是數(shù)據(jù)庫(kù).

Redux的文檔中有個(gè)redo,undo的例子,我最近又重新看redux文檔的時(shí)候，感覺(jué)這一部分講的真是好,以前怎么沒(méi)有理解呢？ 有三個(gè)缺陷一個(gè)是對(duì)于state的數(shù)據(jù)結(jié)構(gòu)的理解,一個(gè)是堆棧方法使用理解,另一個(gè)就是js的淺拷貝的問(wèn)題。前面看那本數(shù)據(jù)結(jié)構(gòu)的書(shū),也不得法,但是硬著頭皮把幾種數(shù)據(jù)結(jié)構(gòu)拿下以后,突然覺(jué)得好多問(wèn)題都找到了解決辦法,計(jì)算機(jī)中對(duì)于數(shù)據(jù)結(jié)構(gòu)和算法的重視不是白來(lái)的.state如果作為一個(gè)簡(jiǎn)單數(shù)據(jù)庫(kù),他里面就是一些鍵值對(duì). 由于js中對(duì)象可以傳引用,所以可以很容易的建立一個(gè)類(lèi)數(shù)據(jù)庫(kù)的結(jié)構(gòu).其他語(yǔ)言可以嗎？

下面我們就貫徹以上的理念,來(lái)研究一些基礎(chǔ)的內(nèi)容。

第一個(gè)就是Reducer函數(shù),參考 MDN 文檔

直接看代碼例子

//accumulator是累加值,currentValue是當(dāng)前遍歷的值
[0,1,2,3,4].reduce( (accumulator, currentValue, currentIndex, array) => {
  return accumulator + currentValue;
}, 10);

第一個(gè)遍歷，accumulate等于10.遍歷的數(shù)組元素是0，index是0.這是巧合。數(shù)組還是[0,1,2,3,4]。返回的值是初始值加當(dāng)前的數(shù)組元素值，也就是返回accumulate+array[currentIndex]。return的就是 10+array[0]=10.

第二個(gè)遍歷，accumulate就是10，遍歷的數(shù)組元素是1，index是1.這也是巧合。數(shù)組還是[0,1,2,3,4]。返回的值是accumulate加當(dāng)前的數(shù)組值，accumulate+array[currentIndex]。
也就是返回 10+array[1]=11.

第二個(gè)遍歷和第一個(gè)遍歷的區(qū)別就是初始值來(lái)源不同。第一個(gè)遍歷的是reduce帶進(jìn)來(lái)的數(shù)據(jù)。第二個(gè)遍歷使用的是第一個(gè)遍歷返回的值。
后面的幾個(gè)遍歷就和第二個(gè)遍歷一樣了。

數(shù)組扁平化

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
    return a.concat(b); //要了解concat的使用,返回的是
    //數(shù)組合并的返回對(duì)象
}, []); //起始是空數(shù)組
// flattened is [0, 1, 2, 3, 4, 5]

就這么簡(jiǎn)單,但是靈活變動(dòng)起來(lái)也不是太好理解啊
看這個(gè)計(jì)算器的React-Native的代碼,在UI組件中渲染出計(jì)算器的幾個(gè)按鍵的方法

 var Types = { //類(lèi)型
  NUMBER: 'NUMBER',
  DECIMAL: 'DECIMAL',
  SIGN: 'SIGN'
};

var inputs = [
  {value: 1, type: Types.NUMBER},
  {value: 2, type: Types.NUMBER},
  {value: 3, type: Types.NUMBER},
  {value: 4, type: Types.NUMBER},
  {value: 5, type: Types.NUMBER},
  {value: 6, type: Types.NUMBER},
  {value: 7, type: Types.NUMBER},
  {value: 8, type: Types.NUMBER},
  {value: 9, type: Types.NUMBER},
  {value: '+/-', type: Types.SIGN},
  {value: 0, type: Types.NUMBER},
  {value: '.', type: Types.DECIMAL},
];
//操作符的配置
var operations = [
  {value: '/', color: '#c77ccc', altColor: '#b16eb7', operation: OPERATION_DIVIDE},
  {value: '-', color: '#f8b055', altColor: '#dc9c4c', operation: OPERATION_SUBTRACT},
  {value: '+', color: '#f796d2', altColor: '#e088be', operation: OPERATION_ADD},
  {value: 'x', color: '#6fcdf4', altColor: '#65badd', operation: OPERATION_MULTIPLY}
];

renderInputRows() {
    var {inputNumber, inputSigned, inputDecimal} = this.props;//注意在redux中那個(gè)地方返回了這三個(gè)函數(shù)的名字
    return inputs.reduce((collection, input) => {//這里的reduce是怎么用的呢？
      if (collection[collection.length - 1].length === 3) {//為什么等于3
        collection.push([]);
      }
      collection[collection.length-1].push(input);
      return collection;
    }, [[]]).map((group, rowIndex) => {
      var columns = group.map((item, columnIndex) => {//看看map的方法
        return (
          <TouchableHighlight
            key={'inputRow_' + rowIndex + '_inputCol_' + columnIndex}
            underlayColor="#ededed"
            style={styles.input}
            onPress={() => { //dispatch方法
              if (item.type === Types.NUMBER) {
                inputNumber(item.value);
              } else if (item.type === Types.DECIMAL) {
                inputDecimal();
              } else if (item.type === Types.SIGN) {
                inputSigned();
              }
            }}>
            <Text style={styles.inputText}>{item.value}</Text>
          </TouchableHighlight>
        );
      });

看看這個(gè)數(shù)組的reducer方法的使用.源代碼在這里

這個(gè)我稍后再補(bǔ)充,會(huì)補(bǔ)充大神給我的解答.

 var Types = {
  NUMBER: 'NUMBER',
  DECIMAL: 'DECIMAL',
  SIGN: 'SIGN'
}

var inputs = [
  {value: 1, type: Types.NUMBER},
  {value: 2, type: Types.NUMBER},
  {value: 3, type: Types.NUMBER},
  {value: 4, type: Types.NUMBER},
  {value: 5, type: Types.NUMBER},
  {value: 6, type: Types.NUMBER},
  {value: 7, type: Types.NUMBER},
  {value: 8, type: Types.NUMBER},
  {value: 9, type: Types.NUMBER},
  {value: '+/-', type: Types.SIGN},
  {value: 0, type: Types.NUMBER},
  {value: '.', type: Types.DECIMAL},
];
//這里其實(shí)是有一維數(shù)組轉(zhuǎn)為二維數(shù)組，打印結(jié)構(gòu)可以看到.
//注意reduce的起始值就是一個(gè)二維數(shù)組.
var result = inputs.reduce((collection, input) => {
      if (collection[collection.length - 1].length === 3) {
        collection.push([]);
      }
      collection[collection.length-1].push(input);
      return collection;
    }, [[]])

console.log(result)
console.table(result)

再看看下面這里兩段代碼

let str = `name,  age,  hair\nMerble,  35,  red\nBob,  64,  blonde`;
function lameCSV(str) {
  return str.split('\n').reduce(function(table, row){
    table.push(row.split(',').map(function(c) {return c.trim();}));
    return table
  }, [[]]);
};
lameCSV(str);

var arr=[0,1,2,3,4,5,6,7,8];
 var result = arr.reduce((collection, input) => {
      if (collection[collection.length - 1].length === 3) {
        collection.push([]);
      }
      collection[collection.length-1].push(input);
      console.log(collection);
      return collection;
    }, [[]]);

感謝大神的幫助,大神的github
reduce這個(gè)方法還能演變出什么花樣來(lái)呢？數(shù)組的操作真的是一個(gè)需要好好學(xué)習(xí)的內(nèi)容.