JavaScript计算传入参数的乘积以及优化方案

遇到求几个参数乘积的问题(例如求(1,2,3,4)的乘积得24),我们可能会毫不犹豫地写出如下代码:

原始版本

var multiply = function () {
  var a = 1;
  for (let i = 0; i < arguments.length; i++) {
    a = a * arguments[i];
  }
  return a;
}
console.log('11:',multiply(1,2,3,4)); // 输出:24

multiply 函数接受一些 number 类型的参数,并返回这些参数的乘积。但对于那些相同的参数来说,每次都进行计算是一种浪费,我们可以加入缓存机制来提高这个函数的性能,优化成以下版本:

优化版本一:加入缓存机制

var cache = {};
var multiply2 = function () {
  var args = Array.prototype.join.call(arguments, ',');
  if (args in cache) {
    return cache[args]
  }
  var a = 1;
  for (let i = 0; i < arguments.length; i++) {
    a = a * arguments[i];
  }
  return cache[args] = a;
}
console.log('22:',multiply2(1,2,3,4)); // 输出:24

上述版本 cache 这个变量仅仅在函数中被使用,暴露在全局作用域下,不如把它封闭在 函数内部,这样可以减少页面中的全局变量,还能避免该变量在其他地方被不小心修改而引发错误。可以再优化为以下版本:

优化版本二:将暴露的全局变量改为局部变量

var multiply3 = function () {
  var cache = {};
  return function () {
    var args = Array.prototype.join.call(arguments, ',');
    if (args in cache) {
      return cache[args]
    }
    var a = 1;
    for (let i = 0; i < arguments.length; i++) {
      a =  a * arguments[i];
    }
    return cache[args] = a;
  }
}
console.log('33:',multiply2(1,2,3,4)); // 输出:24

然而如果在一个大函数中有一些代码块能够独立出来,我们常常把这些代码块封装在独立的小函数里面。独立出来的小函数有助于代码复用。如果这些小函数不需要在程序的其他地方使用,最好是把它们用闭包封闭起来。可以再次优化代码如下:

优化版本三:抽取独立功能的代码封装成函数

var multiply4 = (function () {
  var cache = {};
  var calculate = function () {
    var a = 1;
    for (let i = 0; i < arguments.length; i++) {
      a = a * arguments[i];
    }
    return a;
  }
  return function () {
    var args = Array.prototype.join.call(arguments, ',');
    if (args in cache) {
      return cache[args];
    }
    return cache[args] = calculate.apply(null, arguments)
  }
})()
console.log('44:',multiply4(1,2,3,4)); // 输出:24

你可能感兴趣的:(web前端,javascript,前端面试题,javascript,前端)