多次调用函数并保存结果

Question

我有一个问题。

我需要设计一个函数<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container"> <div class="row"> <div class="col-md-12"> <button class="btn btn-primary" data-toggle="modal" data-target="#myModal1">Modal 1</button> <button class="btn btn-primary" data-toggle="modal" data-target="#myModal2">Modal 2</button> <button class="btn btn-primary" data-toggle="modal" data-target="#myModal3">Modal 3</button> </div> </div> </div> <div id="myModal1" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <div class="product-slider"> <div id="carousel_1" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"> <img src="https://picsum.photos/950/500?image=1"> </div> <div class="item"> <img src="https://picsum.photos/950/500?image=2"> </div> <div class="item"> <img src="https://picsum.photos/950/500?image=3"> </div> <div class="item"> <img src="https://picsum.photos/950/500?image=4"> </div> <div class="item"> <img src="https://picsum.photos/950/500?image=5"> </div> <div class="item"> <img src="https://picsum.photos/950/500?image=6"> </div> <div class="item"> <img src="https://picsum.photos/950/500?image=7"> </div> <div class="item"> <img src="https://picsum.photos/950/500?image=8"> </div> <div class="item"> <img src="https://picsum.photos/950/500?image=9"> </div> <div class="item"> <img src="https://picsum.photos/950/500?image=10"> </div> </div> </div> <div class="clearfix"> <div id="thumbcarousel_1" class="carousel thumbcarousel slide" data-interval="false"> <div class="carousel-inner"> <div class="item active"> <div data-target="#carousel_1" data-slide-to="0" class="thumb"><img src="https://picsum.photos/60/60?image=1"></div> <div data-target="#carousel_1" data-slide-to="1" class="thumb"><img src="https://picsum.photos/60/60?image=2"></div> <div data-target="#carousel_1" data-slide-to="2" class="thumb"><img src="https://picsum.photos/60/60?image=3"></div> <div data-target="#carousel_1" data-slide-to="3" class="thumb"><img src="https://picsum.photos/60/60?image=4"></div> <div data-target="#carousel_1" data-slide-to="4" class="thumb"><img src="https://picsum.photos/60/60?image=5"></div> </div> <div class="item"> <div data-target="#carousel_1" data-slide-to="5" class="thumb"><img src="https://picsum.photos/60/60?image=6"></div> <div data-target="#carousel_1" data-slide-to="6" class="thumb"><img src="https://picsum.photos/60/60?image=7"></div> <div data-target="#carousel_1" data-slide-to="7" class="thumb"><img src="https://picsum.photos/60/60?image=8"></div> <div data-target="#carousel_1" data-slide-to="8" class="thumb"><img src="https://picsum.photos/60/60?image=9"></div> <div data-target="#carousel_1" data-slide-to="9" class="thumb"><img src="https://picsum.photos/60/60?image=10"></div> </div> </div> <!-- /carousel-inner --> <a class="left carousel-control" href="#thumbcarousel_1" role="button" data-slide="prev"> <i class="fa fa-angle-left" aria-hidden="true"></i> </a> <a class="right carousel-control" href="#thumbcarousel_1" role="button" data-slide="next"><i class="fa fa-angle-right" aria-hidden="true"></i> </a> </div> <!-- /thumbcarousel --> </div> </div> </div> </div> </div> </div> <div id="myModal2" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <div class="product-slider"> <div id="carousel_2" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"> <img src="https://picsum.photos/950/500?image=11"> </div> <div class="item"> <img src="https://picsum.photos/950/500?image=12"> </div> <div class="item"> <img src="https://picsum.photos/950/500?image=13"> </div> <div class="item"> <img src="https://picsum.photos/950/500?image=14"> </div> <div class="item"> <img src="https://picsum.photos/950/500?image=15"> </div> <div class="item"> <img src="https://picsum.photos/950/500?image=16"> </div> <div class="item"> <img src="https://picsum.photos/950/500?image=17"> </div> <div class="item"> <img src="https://picsum.photos/950/500?image=18"> </div> <div class="item"> <img src="https://picsum.photos/950/500?image=19"> </div> <div class="item"> <img src="https://picsum.photos/950/500?image=20"> </div> </div> </div> <div class="clearfix"> <div id="thumbcarousel_2" class="carousel thumbcarousel slide" data-interval="false"> <div class="carousel-inner"> <div class="item active"> <div data-target="#carousel_2" data-slide-to="0" class="thumb"><img src="https://picsum.photos/60/60?image=11"></div> <div data-target="#carousel_2" data-slide-to="1" class="thumb"><img src="https://picsum.photos/60/60?image=12"></div> <div data-target="#carousel_2" data-slide-to="2" class="thumb"><img src="https://picsum.photos/60/60?image=13"></div> <div data-target="#carousel_2" data-slide-to="3" class="thumb"><img src="https://picsum.photos/60/60?image=14"></div> <div data-target="#carousel_2" data-slide-to="4" class="thumb"><img src="https://picsum.photos/60/60?image=15"></div> </div> <div class="item"> <div data-target="#carousel_2" data-slide-to="5" class="thumb"><img src="https://picsum.photos/60/60?image=16"></div> <div data-target="#carousel_2" data-slide-to="6" class="thumb"><img src="https://picsum.photos/60/60?image=17"></div> <div data-target="#carousel_2" data-slide-to="7" class="thumb"><img src="https://picsum.photos/60/60?image=18"></div> <div data-target="#carousel_2" data-slide-to="8" class="thumb"><img src="https://picsum.photos/60/60?image=19"></div> <div data-target="#carousel_2" data-slide-to="9" class="thumb"><img src="https://picsum.photos/60/60?image=20"></div> </div> </div> <!-- /carousel-inner --> <a class="left carousel-control" href="#thumbcarousel_2" role="button" data-slide="prev"> <i class="fa fa-angle-left" aria-hidden="true"></i> </a> <a class="right carousel-control" href="#thumbcarousel_2" role="button" data-slide="next"><i class="fa fa-angle-right" aria-hidden="true"></i> </a> </div> <!-- /thumbcarousel --> </div> </div> </div> </div> </div> </div> <div id="myModal3" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <div class="product-slider"> <div id="carousel_3" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="item active"> <img src="https://picsum.photos/950/500?image=21"> </div> <div class="item"> <img src="https://picsum.photos/950/500?image=22"> </div> <div class="item"> <img src="https://picsum.photos/950/500?image=23"> </div> <div class="item"> <img src="https://picsum.photos/950/500?image=24"> </div> <div class="item"> <img src="https://picsum.photos/950/500?image=25"> </div> <div class="item"> <img src="https://picsum.photos/950/500?image=26"> </div> <div class="item"> <img src="https://picsum.photos/950/500?image=27"> </div> <div class="item"> <img src="https://picsum.photos/950/500?image=28"> </div> <div class="item"> <img src="https://picsum.photos/950/500?image=29"> </div> <div class="item"> <img src="https://picsum.photos/950/500?image=30"> </div> </div> </div> <div class="clearfix"> <div id="thumbcarousel_3" class="carousel thumbcarousel slide" data-interval="false"> <div class="carousel-inner"> <div class="item active"> <div data-target="#carousel_3" data-slide-to="0" class="thumb"><img src="https://picsum.photos/60/60?image=21"></div> <div data-target="#carousel_3" data-slide-to="1" class="thumb"><img src="https://picsum.photos/60/60?image=22"></div> <div data-target="#carousel_3" data-slide-to="2" class="thumb"><img src="https://picsum.photos/60/60?image=23"></div> <div data-target="#carousel_3" data-slide-to="3" class="thumb"><img src="https://picsum.photos/60/60?image=24"></div> <div data-target="#carousel_3" data-slide-to="4" class="thumb"><img src="https://picsum.photos/60/60?image=25"></div> </div> <div class="item"> <div data-target="#carousel_3" data-slide-to="5" class="thumb"><img src="https://picsum.photos/60/60?image=26"></div> <div data-target="#carousel_3" data-slide-to="6" class="thumb"><img src="https://picsum.photos/60/60?image=27"></div> <div data-target="#carousel_3" data-slide-to="7" class="thumb"><img src="https://picsum.photos/60/60?image=28"></div> <div data-target="#carousel_3" data-slide-to="8" class="thumb"><img src="https://picsum.photos/60/60?image=29"></div> <div data-target="#carousel_3" data-slide-to="9" class="thumb"><img src="https://picsum.photos/60/60?image=30"></div> </div> </div> <!-- /carousel-inner --> <a class="left carousel-control" href="#thumbcarousel_3" role="button" data-slide="prev"> <i class="fa fa-angle-left" aria-hidden="true"></i> </a> <a class="right carousel-control" href="#thumbcarousel_3" role="button" data-slide="next"><i class="fa fa-angle-right" aria-hidden="true"></i> </a> </div> <!-- /thumbcarousel --> </div> </div> </div> </div> </div> </div>，该函数将汇总给定的参数。问题在于应该可以通过以下几种方式调用它：

add()

如果函数的内部没有问题，可以按照以下方式实现：

add(1, 2, 3, 4, 5) // outputs 15
add(1, 2)(3)(4, 5) // outputs 15
add(1, 2, 3)(4, 5) // outputs 15

参数数量始终为5。不多不少。

但是，我不确定如何处理此处的连续呼叫。有人有什么想法吗？

非常感谢。

Answer 1

具有add返回一个函数，该函数在其作用域内具有一个持久数组，该函数可以跟踪累积传递的所有参数。每次调用时，push对该数组进行操作-该数组具有5个项目后，将求和后的数组作为数字返回，否则，返回相同的函数：

function add(...initialArgs) {
  const allArgs = [];
  function inner(...args) {
    allArgs.push(...args);
    return allArgs.length === 5
     ? allArgs.reduce((a, b) => a + b)
     : inner;
  }
  return inner(...initialArgs)
}

console.log(add(1, 2, 3, 4, 5)) // outputs 15
console.log(add(1, 2)(3)(4, 5)) // outputs 15
console.log(add(1, 2, 3)(4, 5)) // outputs 15

当然，这取决于事先知道参数总数始终为5。

Answer 2

这是一种通用方法，您可以在下面将动态参数传递给“ add”函数，“ parseAdd”函数会注意这一点。

通常，此问题属于“ currying”功能类别，值得一读。另外，对bind和function.toString()的理解将有助于您更好地理解这种方法。

function addition(...args) {
  return args.reduce((conc, v) => conc += v ,0)
}
                
            
function parseAdd(fn) {
  var newFn = fn.bind(null);

  function cal(...args) {
    newFn = newFn.bind(null, ...args);
    return cal;
  }

  cal.toString = () => newFn();

  return (...arg) => { newFn = fn.bind(null); return cal(...arg) }
}
                
           
var add = parseAdd(addition);

console.log(add(1,2,3,4))
console.log(add(1,2,3)(4)(5))
console.log(add(1)(2)(3)(4)(5)(6))