如何看懂這段關(guān)于js排列組合代碼？

一行一行解釋源碼，估計也不太好理解；我們從另外一個角度來看這個問題。

返回的是動態(tài)函數(shù)

首先看 bonusCombination 函數(shù)的返回語句是：return (new Function(str)).apply(null, [arr, fun])。這條語句的分解如下：：

• new Function(str) ：含義是利用 str 字符串動態(tài)構(gòu)造出函數(shù)，我們暫且稱這個構(gòu)造出來的函數(shù)名為 strFn （即 var strFn = new Function(str)）
• 這樣就有 strFn.apply(null, [arr, fun])，轉(zhuǎn)換成我們平時可以理解的形式就是 strFn(arr, fun)

從這里我們可以看出，這個 bonusCombination 的目的是動態(tài)構(gòu)建一個函數(shù) strFn，該函數(shù)接受兩個入?yún)?arr 和 fun —— 而這兩個入?yún)⒕褪俏覀儌鹘o bonusCombination 的入?yún)ⅲ?/p>

對應(yīng)你給的例子，這里的 arr 就是 [1,2,3,4]，而 fun 是 null

入?yún)?num 的作用，動態(tài)創(chuàng)建函數(shù)體

我們知道 bonusCombination 還有一個入?yún)?，就?num，它的作用就是 鍛造 上述動態(tài)函數(shù) strFn 的具體內(nèi)容，利用這個 num 入?yún)碛绊懩且淮蠖巫址僮?，這樣也就影響了動態(tài)函數(shù)的具體內(nèi)容：

對于閱讀這樣的函數(shù)，要理解它的含義，最好的辦法就是枚舉。

比如我們讓 num 為 2：那么動態(tài)構(gòu)建的函數(shù) strFn 結(jié)構(gòu)體如下：

var strFn2 = function(arr, fun){
  var arr=arguments[0]; 
  var fun=arguments[1];  
  var ret=[]; 
  for (var a = 0; a < arr.length; a++) {
    for(var b = a + 1; b < arr.length; b++){
        var temp = [];
          temp.push(arr[a]); 
          temp.push(arr[b]); 
          if(fun){
            ret.push(fun(temp));
        } else {
            ret.push(temp); 
        }
    } 
  };
  return ret;
}

可見函數(shù)體內(nèi)包含 2 次循環(huán)（因為 num 值為 2），返回的 ret 就是結(jié)果值；

也就說調(diào)用 bonusCombination([1,2,3,4],2) 就相當于調(diào)用 strFn2([1,2,3,4])，返回值就是你題中的 [[1,2],[1,3],[1,4],[2,3],[2,4],[3,4]] 。

同樣如果我們讓 num 為 3：那么動態(tài)構(gòu)建的函數(shù) strFn 結(jié)構(gòu)體如下：

var strFn3 = function(arr, fun){
  var arr=arguments[0]; 
  var fun=arguments[1];  
  var ret=[]; 
  for (var a = 0; a < arr.length; a++) {
    for(var b = a + 1; b < arr.length; b++){
      for(var c = b + 1; c < arr.length; c++) {
        var temp = [];
          temp.push(arr[a]); 
          temp.push(arr[b]); 
          temp.push(arr[c]);
          if(fun){
            ret.push(fun(temp));
        } else {
            ret.push(temp); 
        }
      }
    } 
  };
  return ret;
}

函數(shù)體內(nèi)包含 3 次循環(huán)（因為 num 值為 3）；此時調(diào)用 bonusCombination([1,2,3,4],3) 就相當于調(diào)用 strFn3([1,2,3,4])，返回值是 [[1,2,3],[1,2,4],[1,3,4],[2,3,4]]；

你也可以自己試一下讓 num 為 4 或者 1，寫出的函數(shù)體內(nèi)容是怎么樣的，你就能徹底明白這個 bonusCombination 函數(shù)的作用了。

回答你的問題

問題1：看不懂為什么用字符串做變量，這個方法還有其他的功能嗎？
回答：字符串做變量就是為了動態(tài)構(gòu)造函數(shù)體內(nèi)容，依據(jù) num 的不同值動態(tài)生成不同的 strFn 函數(shù) —— 從這個角度上來講 bonusCombination 就是一個 工廠函數(shù)；

該方法還有另外的功能，體現(xiàn)在入?yún)?fun 上，可以對每個結(jié)果元素調(diào)用 fun(temp)，相當于使用數(shù)組的 map 功能。

問題2：一開始為什么定義一個 variable;
回答：主要是為動態(tài)函數(shù)體提供足夠多的中間變量，沒啥具體含義，只要是符合 js 變量名稱就可以。這里使用 a、b... 這些變量名，估計是為了簡單起見，你可以用任何符合 js 變量名稱規(guī)范的字符串就行。

問題3：請一步一步來解釋
回答：讀懂上面兩小節(jié)的分析或者參考前一個回答，每一行解釋這里就不附上了。

其他

這種利用 Function 動態(tài)函數(shù)構(gòu)造出來的功能函數(shù)，性能堪憂；
你也知道，如果 arr 入?yún)?shù)組越長，num 越大，那么嵌套的循環(huán)體也就越多，性能就越差。

這樣的代碼雖然能運行，但質(zhì)量比較糟糕，還有很大的性能隱患，不能放在線上正式的產(chǎn)品中使用。這段代碼比較適合用來學習 Function 的功能，以及 組合數(shù)學 的相關(guān)知識。

這種方式的編程屬于 元編程 范疇，可以參考我最近寫的文章 《【資源集合】 ES6 元編程（Proxy & Reflect & Symbol）》了解更多。后續(xù)有機會，我看能否使用 Proxy & Reflect 來重寫這個 bonusCombination 函數(shù)。

個人感覺 還不如遞歸來的快

你運行下這個看看 很有意思

/**
  * 排列組合算法
  **/
function bonusCombination (arr,num,fun){
  if (arr.length < num || num > 10) {
    return []
  }

  function step (arr_in,num_in) {
    if (num_in==1){
      let res = arr_in.map((v)=>{
        let temp = fun?fun(v):v
        return [temp]
      })
      return res
    }
    let ret=[]
    for (let i=1;i<arr_in.length;){
      let temp = fun?fun(arr_in[0]):arr_in[0]
      let currVal = [temp]
      arr_in = arr_in.slice(i)
      step(arr_in,num_in-1) .forEach((arr2)=>{
        ret.push(currVal.concat(arr2))
      })
    }
    return ret;
  }
  return  step(arr,num);
}


/**
  * 排列組合算法
  **/
 function bonusCombination2 (arr, num, fun) {
  if (arr.length < num || num > 10) {
    return []
  }
  let variable = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u']
  let replaceStr = '#$#'
  let str = 'var arr=arguments[0]; var fun=arguments[1];  var ret=[]; for (var a = 0; a < arr.length; a++) { ' + replaceStr + ' } return ret;'
  for (let i = 1; i < num; i++) {
    str = str.replace(replaceStr, ' for (var ' + variable[i] + ' =' + variable[i - 1] + '+ 1; ' + variable[i] + ' < arr.length; ' + variable[i] + '++) { ' + replaceStr + '  }')
  }
  let temp = 'var temp= [];'
  for (let i = 0; i < num; i++) {
    temp += 'temp.push(arr[' + variable[i] + ']);'
  }
  if (fun) {
    temp += 'ret.push(fun(temp)); '
  } else {
    temp += 'ret.push(temp);'
  }
  str = str.replace(replaceStr, temp)
  return (new Function(str)).apply(null, [arr, fun])
}

let arr = [
  'a',
  'b',
  'c',
  'd',
  'e',
  'f',
  'g',
  'h',
  'i',
  'j',
  'k',
  'l',
  'm',
  'n',
  'o',
  'p',
  'q',
  'r',
  's',
  't',
  'u',
  'v',
  'w',
  'x',
  'y',
  'z'
]



console.time('bonusCombination')
let result = bonusCombination([...arr],10,(val)=>{return val});
console.log(result)
console.timeEnd('bonusCombination')

console.time('bonusCombination2')
let result2 = bonusCombination([...arr],10,(val)=>{return val});
console.log(result2)
console.timeEnd('bonusCombination2')

你這個問題，就好比20年前一個很流行的節(jié)目：正大綜藝。主持人跑到歐洲某個地方，進入一戶人家，突然指著墻上一個物件問大家：這是什么？干嘛用？怎么用？

我怎么知道？

你應(yīng)該至少帶上以下信息：

1. 這個函數(shù)你從哪里找到的？
2. 你學習這個函數(shù)希望實現(xiàn)什么效果？
3. 你做過哪些嘗試，收獲哪些成果，遇到哪些問題？

跑起來這么卡？

/**
  * 排列組合算法
  **/
bonusCombination(arr, num, fun) {
  if (arr.length < num || num > 10) {
    return []
  }
  // 一堆隨機的變量名稱
  let variable = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u']
  // 替代內(nèi)容的字面量 token
  let replaceStr = '#$#'
  // 函數(shù)體的基本模板
  let str = 'var arr=arguments[0]; var fun=arguments[1];  var ret=[]; for (var a = 0; a < arr.length; a++) { ' + replaceStr + ' } return ret;'
  // 替換 replaceStr 為【排列組合】多重嵌套循環(huán)
  for (let i = 1; i < num; i++) {
    str = str.replace(replaceStr, ' for (var ' + variable[i] + ' =' + variable[i - 1] + '+ 1; ' + variable[i] + ' < arr.length; ' + variable[i] + '++) { ' + replaceStr + '  }')
  }
  // 替換 replaceStr 為【記錄排列組合結(jié)果】的代碼
  let temp = 'var temp= [];'
  for (let i = 0; i < num; i++) {
    temp += 'temp.push(arr[' + variable[i] + ']);'
  }
  if (fun) {
    temp += 'ret.push(fun(temp)); '
  } else {
    temp += 'ret.push(temp);'
  }
  str = str.replace(replaceStr, temp)
  // 使用 Function 將 str 轉(zhuǎn)化為一個函數(shù)并運行
  return (new Function(str)).apply(null, [arr, fun])
}

// Done ...

并沒有什么難理解的，你唯一需要理解的是，F(xiàn)unction 這個構(gòu)造函數(shù)的作用。