Javascript 函数数组

Posted 2023-02-19

技术标签:

【中文标题】Javascript 函数数组【英文标题】：Javascript Array of Functions 【发布时间】：2011-06-21 22:58:56 【问题描述】：

var array_of_functions = [
    first_function('a string'),
    second_function('a string'),
    third_function('a string'),
    forth_function('a string')
]

array_of_functions[0];

这并没有按预期工作，因为数组中的每个函数都是在创建数组时执行的。

执行数组中任何函数的正确方法是：

array_of_functions[0];  // or, array_of_functions[1] etc.

谢谢！

【问题讨论】：

在填充数组时是否需要知道'a string'，或者函数的调用者可以将其传入吗？我很想了解更多关于您要完成的工作的详细信息，因为可能有更好的方法来处理这个问题。 “函数数组”——或者我们喜欢称它为带有方法的对象你不认为你应该提供更多细节吗？可能有更好的方法来处理这个.. 【参考方案1】：

var array_of_functions = [
    first_function,
    second_function,
    third_function,
    forth_function
]

然后当你想执行数组中的给定函数时：

array_of_functions[0]('a string');

【讨论】：

提示：请记住将() 放在array_of_functions[0] 之后，即使它是空的。我花了大约 20 分钟来找出“为什么那行不通”。像魅力一样工作！如何通过传递像“firstFunction”这样的字符串值来获取函数的索引，以便它可以是动态的？【参考方案2】：

如果没有更多关于您要完成的工作的详细信息，我们只是在猜测。但是您也许可以使用对象表示法来做这样的事情......

var myFuncs = 
  firstFunc: function(string) 
    // do something
  ,

  secondFunc: function(string) 
    // do something
  ,

  thirdFunc: function(string) 
    // do something

并打电话给其中一个......

myFuncs.firstFunc('a string')

【讨论】：

我认为这对开发人员更友好，因为我们不需要记住函数索引。而且，如果我们想在特定索引处推送任何函数，那么它会导致它旁边的所有函数的索引发生变化。所以最好用这个【参考方案3】：

或者只是：

var myFuncs = 
  firstFun: function(string) 
    // do something
  ,

  secondFunc: function(string) 
    // do something
  ,

  thirdFunc: function(string) 
    // do something

【讨论】：

【参考方案4】：

我认为这就是原始海报想要实现的目标：

var array_of_functions = [
    function()  first_function('a string') ,
    function()  second_function('a string') ,
    function()  third_function('a string') ,
    function()  fourth_function('a string') 
]

for (i = 0; i < array_of_functions.length; i++) 
    array_of_functions[i]();

希望这会帮助其他人（比如 20 分钟前的我 :-) 寻找有关如何在数组中调用 JS 函数的任何提示。

【讨论】：

这正是我所需要的，因为它允许我更改参数调用，假设我的函数不都采用相同的参数：P【参考方案5】：

这是正确的

var array_of_functions = 
            "all": function(flag)  
                console.log(1+flag); 
              ,
                "cic": function(flag)  
                console.log(13+flag); 
                                   
        ;

array_of_functions.all(27);
array_of_functions.cic(7);

【讨论】：

您确定要回答的this is the question 吗？不相关。 @Bergi 实际上是这样。用array_of_functions 替换答案的opera，你得到了同样的结果。现在怎么样？ @Jesse 谢谢，现在我有了发布代码的想法，这是我的第一个回复。但是 OP 有一个数组，而这是一些对象（具有奇怪的属性名称）？这个答案的新闻是什么，为什么不直接投票给 pjcabrera 或 Robin 的呢？变量名称混淆。那不是函数数组，而是函数对象【参考方案6】：

我将通过发布一个更简单的方法来补充这个线程，使用shift() javascript 方法originally described here 在数组中执行各种函数

  var a = function() console.log("this is function: a") 
  var b = function() console.log("this is function: b") 
  var c = function() console.log("this is function: c") 

  var foo = [a,b,c];

  while (foo.length)
     foo.shift().call();

【讨论】：

【参考方案7】：

/* PlanetGreeter */

class PlanetGreeter 
    hello   :  () : void;  [] = [];
    planet_1 : string = "World";
    planet_2 : string = "Mars";
    planet_3 : string = "Venus";
    planet_4 : string = "Uranus";
    planet_5 : string = "Pluto";
    constructor() 
        this.hello.push( () =>  this.greet(this.planet_1);  );
        this.hello.push( () =>  this.greet(this.planet_2);  );
        this.hello.push( () =>  this.greet(this.planet_3);  );
        this.hello.push( () =>  this.greet(this.planet_4);  );
        this.hello.push( () =>  this.greet(this.planet_5);  );
     
    greet(a: string) : void  alert("Hello " + a); 
    greetRandomPlanet() : void  
        this.hello [ Math.floor( 5 * Math.random() ) ] (); 
     
 
new PlanetGreeter().greetRandomPlanet();

【讨论】：

【参考方案8】：

也许它对某人有帮助。

<!DOCTYPE html>
<html>
   <head lang="en">
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript">
         window.manager = 
             curHandler: 0,
             handlers  : []
         ;
         
         manager.run = function (n) 
             this.handlers[this.curHandler](n);
         ;
         
         manager.changeHandler = function (n) 
             if (n >= this.handlers.length || n < 0) 
                 throw new Error('n must be from 0 to ' + (this.handlers.length - 1), n);
             
             this.curHandler = n;
         ;
         
         var a = function (n) 
             console.log("Handler a. Argument value is " + n);
         ;
         
         var b = function (n) 
             console.log("Handler b. Argument value is " + n);
         ;
         
         var c = function foo(n) 
             for (var i=0; i<n; i++) 
                 console.log(i);
             
         ;
         
         manager.handlers.push(a);
         manager.handlers.push(b);
         manager.handlers.push(c);
      </script>
   </head>
   <body>
      <input type="button" onclick="window.manager.run(2)" value="Run handler with parameter 2">
      <input type="button" onclick="window.manager.run(4)" value="Run handler with parameter 4">
      <p>
      <div>
         <select name="featured" size="1" id="item1">
            <option value="0">First handler</option>
            <option value="1">Second handler</option>
            <option value="2">Third handler</option>
         </select>
         <input type="button" onclick="manager.changeHandler(document.getElementById('item1').value);" value="Change handler">
      </div>
      </p>
   </body>
</html>

【讨论】：

【参考方案9】：

它与Darin Dimitrov's 基本相同，但它展示了如何使用它来动态创建和存储函数和参数。我希望它对你有用:)

var argsContainer = ['hello', 'you', 'there'];
var functionsContainer = [];

for (var i = 0; i < argsContainer.length; i++) 
var currentArg = argsContainer[i]; 

  functionsContainer.push(function(currentArg)
    console.log(currentArg);
  );
;

for (var i = 0; i < functionsContainer.length; i++) 
  functionsContainer[i](argsContainer[i]);

【讨论】：

无论有多少其他人，都可以添加您的答案。但最好添加一些解释，它与其他的不同/更好【参考方案10】：

如果您正在尝试动态传递回调，您可以将单个对象作为参数传递。这使您可以更好地控制要使用任何参数执行的功能。

function func_one(arg) 
    console.log(arg)
;

function func_two(arg) 
    console.log(arg+' make this different')
;

var obj = 
    callbacks: [func_one, func_two],
    params: ["something", "something else"];
;

function doSomething(obj) 
    var n = obj.counter
    for (n; n < (obj.callbacks.length - obj.len); n++) 
        obj.callbacks[n](obj.params[n]);
    
;

obj.counter = 0;
obj.len = 0;
doSomething(obj); 

//something
//something else make this different

obj.counter = 1;
obj.len = 0;
doSomething(obj);

//something else make this different

【讨论】：

【参考方案11】：

一个简单的方法来运行它们：

[first_function, ..., nth_function].forEach (function(f) 
    f('a string');
);

【讨论】：

【参考方案12】：

这些函数数组的问题不是“数组形式”，而是这些函数的调用方式......那么...... 试试这个.. 用一个简单的 eval()...

array_of_function = ["fx1()","fx2()","fx3()",.."fxN()"]
var zzz=[];
for (var i=0; i<array_of_function.length; i++)
      var zzz += eval( array_of_function[i] );

它在这里工作，没有任何上层在家里做这项工作...... 希望对你有帮助

【讨论】：

您能否解释一下为什么其他答案对您不起作用，而您的答案又为何起作用？谢谢！它曾经返回我错误，未定义的函数，或者它们完全没有被 javascript 评估......（为什么我不知道，但这解决了我的问题）糟糕的建议。 ***.com/questions/86513/… 是的，一如既往的糟糕，但是拍摄解决方案，并且非常容易使用，特别是如果它远离“输入”......这里它只是在短时间内解决了内部 javascript 的不可能...... .【参考方案13】：

使用 Function.prototype.bind()

var array_of_functions = [
        first_function.bind(null,'a string'),
        second_function.bind(null,'a string'),
        third_function.bind(null,'a string'),
        forth_function.bind(null,'a string')
    ]

【讨论】：

【参考方案14】：

您在上面得到了一些最佳答案。这只是另一个版本。

var dictFun = 
     FunOne: function(string) 
     console.log("first function");
  ,

   FuncTwo: function(string) 
   console.log("second function");
 ,

  FuncThree: function(string) 
   console.log("third function");

【讨论】：

问题是函数的数组，而不是对象。【参考方案15】：

通过 ES6 回调执行许多函数 ?

const f = (funs) => 
  funs().forEach((fun) => fun)


f(() => [
  console.log(1),
  console.log(2),
  console.log(3)
])

【讨论】：

【参考方案16】：

在上面我们看到了一些迭代。让我们使用 forEach 做同样的事情：

var funcs = [function () 
        console.log(1)
  ,
  function () 
        console.log(2)
  
];

funcs.forEach(function (func) 
  func(); // outputs  1, then 2
);
//for (i = 0; i < funcs.length; i++) funcs[i]();

【讨论】：

最被接受的解决方案基本上是有效的，但尽管实际调用了函数，JS 仍然抛出数组名称不是函数的错误（并在我的可视化中显示该错误）。您的解决方案不会导致该错误。谢谢。【参考方案17】：

我在尝试解决这个问题时遇到了很多问题...尝试了显而易见的方法，但没有奏效。它只是以某种方式附加一个空函数。

array_of_functions.push(function()  first_function('a string') );

我通过使用字符串数组解决了这个问题，后来又使用了 eval：

array_of_functions.push("first_function('a string')");

for (var Func of array_of_functions) 
   eval(Func);

【讨论】：

【参考方案18】：

哎呀，有这么多奇怪的答案......

const execute = (fn) => fn()
const arrayOfFunctions = [fn1, fn2, fn3]

const results = arrayOfFunctions.map(execute)

or if you want to sequentially feed each functions result to the next:
compose(fn3, fn2, fn1)

compose默认是不支持的，但是有像ramda、lodash甚至redux这样的库提供了这个工具

【讨论】：

【参考方案19】：

使用 ES6 语法，如果你需要一个类似“管道”的过程，通过一系列函数（在我的例子中，一个 HTML 抽象语法树）传递同一个对象，你可以使用 for...of 来调用每个管道函数在给定的数组中：

const setMainElement = require("./set-main-element.js")
const cacheImages = require("./cache-images.js")
const removeElements = require("./remove-elements.js")

let htmlAst = 

const pipeline = [
    setMainElement,
    cacheImages,
    removeElements,
    (htmlAst) => 
        // Using a dynamic closure.
    ,
]

for (const pipe of pipeline) 
    pipe(htmlAst)

【讨论】：

【参考方案20】：

也许这样可以解决问题：

[f1,f2,f3].map((f) => f('a string'))

【讨论】：

以上是关于Javascript 函数数组的主要内容，如果未能解决你的问题，请参考以下文章

将数组转换为“2元组”数组的Javascript函数[重复]

如何从 SQL where 子句创建一个 JavaScript 函数，以将其作为谓词传递给 JavaScript 数组的过滤函数？

JavaScript常用数组方法

Javascript：将数组中的数据插入函数参数

JavaScript数组

javascript二维数组怎样排序