从 ES5 到 ES6 的 superPower 功能答案

【问题标题】：superPower function from ES5 to ES6从 ES5 到 ES6 的 superPower 功能
【发布时间】：2017-09-03 13:31:59
【问题描述】：

我有一个名为 superPower 的函数，它接受一个数字数组并返回一个数字。这个数字是通过将每个元素乘以 10 乘以它在数组中的索引位置的幂，然后将每个元素加在一起来创建的。

这是我需要重构为 ES6 的 ES5 版本

 ArrayFunctions.superPower = function(array){
 return array.reduce(function(sum, number, index){
 return sum + (number * (Math.pow(10, index)));
 });
};

这是我迄今为止尝试过的，但它不起作用：

static superPower (array) {
  return array.reduce(((sum, number, index) => sum + number + index ) {
  return (sum + (number => number ** (10, index) ));
  });
}

完整代码如下：

class ArrayFunctions {
  constructor () {
  }
  static printSpecial (array) {
    return array.join(" --- ");
  }
  static doubleArray (array) {
      return array.map(number => number * 2);
  }
  static superPower (array) {
  //   return array.reduce( ((sum, number, index) => sum + number + index); {
  //     return sum + (number * (Math.pow(10, index)));
  // });
  }
}

// Method to refactor 

ArrayFunctions.superPower = function(array){
  return array.reduce(function(sum, number, index){
    return sum + (number * (Math.pow(10, index)));
  });
};

// Here I am testing how to refactor it
// ArrayFunctions.superPower = function(array){
// return array.reduce(((sum, number, index) => sum + number + index ) {
//   return (sum + (number => number ** (10, index) ));
// });
// };

【问题讨论】：

我会提供整个上下文，你是对的@mplungjan
@RobG 我只是添加了一个 sn-p 来向您展示整个上下文。在它工作之前，我正在类主体之外测试我的重构。在它工作之后，我将删除代码并将其添加到类体中。
从 ES5 升级到 6 的预期改进是什么，而不是在旧浏览器中不工作
"我需要重构为 ES6" - 为什么？没有充分的理由将运行良好的 ES6 代码更改为不同的 ES6 代码。

标签： javascript ecmascript-6 static-methods arrow-functions

【解决方案1】：

永远不要只使用 class 和 static 函数，使用对象字面量！（或者只使用命名导出，如果你想默认导出模块对象）

你的代码应该变成

const ArrayFunctions = {
  printSpecial(array) {
    return array.join(" --- ");
  }
  doubleArray(array) {
    return array.map(number => number * 2);
  }
  superPower(array) {
    return array.reduce((sum, number, index) =>
      sum + number * 10 ** index;
    );
  }
};

请注意，您还可以通过使用reduceRight 而不是reduce 来提高代码的效率，并通过在开始时传递0 来提高可靠性，以便函数返回0 而不是抛出一个例外：

return array.reduceRight((acc, number) => number + 10 * acc, 0);

【讨论】：

【解决方案2】：

我认为您正在寻找的是：

ArrayFunctions = {};
ArrayFunctions.superPower = (array => array.reduce(
  (sum, number, index) => sum + number * 10 ** index), 0)
);

console.log(ArrayFunctions.superPower([1,2,3]));

这不会在我当前的 Safari 中运行，因为它不支持求幂运算符**，我需要使用：

ArrayFunctions = {};
ArrayFunctions.superPower = (array => array.reduce(
  (sum, number, index) => sum + number * Math.pow(10, index), 0)
);

console.log(ArrayFunctions.superPower([1,2,3]));

在类声明中使用一个 return 是必需的，因为您不能使用箭头函数来定义静态方法：

class ArrayFunctions {
  constructor(){}

  static superPower (array) {
    return array.reduce((sum, number, index) => sum + number * Math.pow(10, index),0);
  }
}

console.log(ArrayFunctions.superPower([1,2,3]));

但是，如果类语法只是用于创建对象的方法，那么很难证明它的合理性：

var arrayFunctions = {
  superPower : (array) => array.reduce((sum, number, index) => sum + number * Math.pow(10, index), 0)
};
    
console.log(arrayFunctions.superPower([1,2,3]));

【讨论】：

这取决于您对“正确”的标准。如果您使用箭头函数，则不需要 return （在这种情况下），因为单行函数默认返回其语句的值。而且也不需要 function 关键字。
是的，但请记住，我的 porpoise 是在类体内使用它。我不能在类体内使用你的解决方案，它不起作用。
@randseed1724——如果你写得正确的话。 ;-)

【解决方案3】：

我将以下代码添加到我的类主体中，它运行良好：

 return array.reduce((sum, number, index) => {
 return sum+number*Math.pow(10, index);

现在是这样的：

class ArrayFunctions {
 constructor () {
 }
  static printSpecial (array) {
   return array.join(" --- ");
  }
  static doubleArray (array) {
   return array.map(number => number * 2);
  }
  static superPower (array) {
   return array.reduce((sum, number, index) => {
   return sum+number*Math.pow(10, index);
 });
 }
 }

 module.exports = ArrayFunctions;

谢谢@PHPglue

【讨论】：

接受之前给出的答案可能就足够了。
@DaveNewton 你到底是什么意思或建议？

【解决方案4】：

就像：

ArrayFunctions.superPower = function(array){
 return array.reduce((sum, number, index) => {
   return sum+number*Math.pow(10, index);
 });
}

【讨论】：

谢谢，这正是我要找的！
@randseed1724 如果不需要进一步的帮助，您应该接受答案。