您将如何重写这3个函数,以便一个函数可以调用它?

时间:2018-12-04 01:11:45

标签: javascript reactjs refactoring

所以我正在做一个宾果游戏,并解决我编写的所有获胜条件

 calWinner = () =>{
    let winHor = [[0,1,2,3,4],[5,6,7,8,9],
    [10,11,12,13,14],[15,16,17,18,19],[20,21,22,23,24]];
    let winVert = this.createWinVert(winHor,5);
    let winDiag = this.createWinDiagonal(winHor);
    let winDiag2 = this.createWinDiagonal2(winHor);
    let winCondtion = [...winHor,...winVert,...winDiag,...winDiag2];

   // boardHistory > Per winCondtion
   if(winCondtion
    .some(arr=> arr
        .every(index=>this.state.boardHistory[index] === true))){
        this.setState({winner: "Winner"});
   }
}

如您所见,下面的3个函数具有相似之处,它们都具有for循环并返回一个数组。

createWinVert= (data,counter)=>{
    let arr = [];
    for(let z = 0; z < counter; z++){
        arr.push(data.map(x=>x[z]));
    }
    return arr;
}

createWinDiagonal = (data)=>{
    let arr = [];
    arr.push(data.map((x,index)=>x[index]));   
    return arr;
}

createWinDiagonal2 = (data)=>{
    let arr = [];
    let temp = data.length - 1;
    arr.push(data.map(x=>x[temp--]));
    return arr;
}

唯一的区别是它们使用for循环的方式以及传递给map函数的内容

我如何浓缩此代码?

3 个答案:

答案 0 :(得分:1)

您可以将所有输出压缩到1个数组中。

calWinner = () => {
  let winHor = [
    [0, 1, 2, 3, 4],
    [5, 6, 7, 8, 9],
    [10, 11, 12, 13, 14],
    [15, 16, 17, 18, 19],
    [20, 21, 22, 23, 24]
  ];
  let winSomething = this.createWinSomething(winHor, 5);
  let winCondtion = [...winHor, ...winSomething];

  // boardHistory > Per winCondtion
  if (winCondtion
    .some(arr => arr
      .every(index => this.state.boardHistory[index] === true))) {
    this.setState({
      winner: "Winner"
    });
  }
}

createWinSomething = (data, counter) => {

  let arr = [];

  // Vert
  for (let z = 0; z < counter; z++) {
    arr.push(data.map(x => x[z]));
  }

  // Diag 1
  arr.push(data.map((x, index) => x[index]));

  // Diag 2
  let temp = data.length - 1;
  arr.push(data.map(x => x[temp--]));

  return arr;
}

答案 1 :(得分:1)

我将输出一个数组对象:

createWin = (data, counter) => {
  let winVer, winDia1, winDia2, temp = data.length - 1;

  for(let z = 0; z < counter; z++){
    winVer = data.map(x=>x[z]);
  }

  winDia1 = data.map((x,index)=>x[index]));   
  winDia2 = data.map(x=>x[temp--]));

  return {
    winVer,
    winDia1,
    winDia2
  }

顺便说一句,由于.map()总是返回一个新数组,因此您可以直接将其直接分配给变量。

答案 2 :(得分:1)

您可以从下面的3个函数中减少代码行-

let calWinner = () => {
  let winHor = [
    [0, 1, 2, 3, 4],
    [5, 6, 7, 8, 9],
    [10, 11, 12, 13, 14],
    [15, 16, 17, 18, 19],
    [20, 21, 22, 23, 24]
  ];
  let winVert = createWinVert(winHor);
  let winDiag = createWinDiagonal(winHor);
  let winDiag2 = createWinDiagonal2(winHor);
  let winCondtion = [...winHor, ...winVert, ...winDiag, ...winDiag2];

  console.log(winCondtion)
  // boardHistory > Per winCondtion
  //if(winCondtion
  //.some(arr=> arr
  //  .every(index=> boardHistory[index] === true))){
  //console.log({winner: "Winner"});
  //}
}

let createWinVert = (data) => [data.map(x => x[0])]

let createWinDiagonal = (data) => [data.map((x, index) => x[index])]

let createWinDiagonal2 = (data) => [data.map((x, i) => x[data.length - i - 1])]

calWinner()

然后,如果您希望结合使用这些功能,则可以执行以下操作

let calWinner = () => {
  let winHor = [
    [0, 1, 2, 3, 4],
    [5, 6, 7, 8, 9],
    [10, 11, 12, 13, 14],
    [15, 16, 17, 18, 19],
    [20, 21, 22, 23, 24]
  ];
  let winVert = createWin(winHor,1);
  let winDiag = createWin(winHor,0,);
  let winDiag2 = createWin(winHor,0,true);
  let winCondtion = [...winHor, ...winVert, ...winDiag, ...winDiag2];

  console.log(winCondtion)
  // boardHistory > Per winCondtion
  //if(winCondtion
  //.some(arr=> arr
  //  .every(index=> boardHistory[index] === true))){
  //console.log({winner: "Winner"});
  //}
}

let createWin = (d,p,r) => [d.map((x,i) => r ? [...x].reverse()[i] : x[p? 0: i])]

calWinner()