Array Fungsi Javascript

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

array_of_functions[0];

Itu tidak berfungsi sebagaimana dimaksud karena setiap fungsi dalam array dieksekusi ketika array dibuat.

Apa cara yang tepat menjalankan fungsi dalam array dengan melakukan:

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

Terima kasih!

Nick
sumber
1
Apakah 'a string'perlu diketahui pada saat array diisi, atau bisakah pemanggil fungsi melewatinya?
Crescent Fresh
Saya ingin mendapatkan detail lebih lanjut tentang apa yang ingin Anda capai, karena mungkin ada cara yang lebih baik untuk menangani ini.
Jeff
2
"Array of Functions" - atau seperti yang kita suka menyebutnya objek dengan metode
symcbean
Tidakkah Anda pikir Anda harus memberikan lebih banyak detail? Mungkin ada cara yang lebih baik untuk menangani ini ..
IcyFlame

Jawaban:

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

dan kemudian ketika Anda ingin menjalankan fungsi yang diberikan dalam array:

array_of_functions[0]('a string');
Darin Dimitrov
sumber
16
Kiat: Ingatlah untuk memasang ()setelah array_of_functions[0], meskipun kosong. Saya menghabiskan 20 menit hanya untuk menemukan 'mengapa itu tidak berhasil'.
Horacio
Bekerja seperti pesona!
Moses Ndeda
Bagaimana Anda mendapatkan indeks fungsi dengan mengirimkan nilai string seperti 'firstFunction' sehingga bisa dinamis?
O'Dane Brissett
107

Saya pikir inilah yang ingin dicapai oleh poster asli:

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]();
}

Semoga ini akan membantu orang lain (seperti saya 20 menit yang lalu :-) mencari petunjuk tentang bagaimana memanggil fungsi JS dalam array.

pjcabrera
sumber
3
Ini hanya apa yang saya butuhkan, karena memungkinkan saya untuk mengubah panggilan parameter, dengan asumsi fungsi saya tidak semua mengambil parameter yang sama: P
Jem
25

Tanpa detail lebih lanjut dari apa yang Anda coba capai, kami agak menebak. Tapi Anda mungkin bisa lolos dengan menggunakan notasi objek untuk melakukan sesuatu seperti ini ...

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

  secondFunc: function(string) {
    // do something
  },

  thirdFunc: function(string) {
    // do something
  }
}

dan untuk memanggil salah satu dari mereka ...

myFuncs.firstFunc('a string')
Jeff
sumber
1
Saya pikir ini lebih ramah pengembang karena kita tidak perlu mengingat indeks fungsi. Dan juga, Jika kita ingin mendorong fungsi apa pun pada indeks spesifik maka itu menyebabkan perubahan indeks semua fungsi di sebelahnya. Jadi lebih baik gunakan ini
dd619
16

Atau hanya:

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

  secondFunc: function(string) {
    // do something
  },

  thirdFunc: function(string) {
    // do something
  }
}
Robin
sumber
13

Saya akan melengkapi utas ini dengan memposting cara yang lebih mudah untuk menjalankan berbagai fungsi dalam Array menggunakan shift()metode Javascript yang dijelaskan di sini

  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();
  }
Gus
sumber
7

Ini pada dasarnya sama dengan Darin Dimitrov'stetapi itu menunjukkan bagaimana Anda bisa menggunakannya secara dinamis membuat dan menyimpan fungsi dan argumen. Semoga bermanfaat buat kamu :)

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]);
}

Mensur Grišević
sumber
1
Tidak apa-apa untuk menambahkan jawaban Anda tidak peduli berapa banyak yang lain Tetapi lebih baik menambahkan beberapa penjelasan apa yang berbeda / lebih baik daripada yang lain
Bowdzone
3

di atas kami melihat beberapa dengan iterasi. Mari kita lakukan hal yang sama menggunakan 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]();
mlhazan
sumber
1

Ini benar

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);
Leonardo Ciaccio
sumber
1
Apakah Anda yakin ini pertanyaan yang ingin Anda jawab? Itu tidak terkait.
Bergi
1
@Bergi Sebenarnya, benar. Ganti jawabannya operadengan array_of_functionsdan Anda mendapatkan hal yang sama. Bagaimana kalau sekarang?
Jesse
@Jesse terima kasih, sekarang saya punya ide dengan memposting kode, ini adalah tanggapan pertama saya.
Leonardo Ciaccio
Tapi OP punya array, sementara ini beberapa objek (dengan nama properti ganjil)? Dan apa kabar dari jawaban ini, mengapa tidak mengungguli pjcabrera atau Robin?
Bergi
1
nama variabel yang membingungkan. Thats bukan array fungsi tetapi objek fungsi
Craicerjack
1

Jika Anda melakukan sesuatu seperti mencoba untuk secara dinamis melewati panggilan balik, Anda bisa melewati satu objek sebagai argumen. Ini memberi Anda kendali lebih besar atas fungsi mana yang ingin Anda jalankan dengan parameter apa pun.

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
Daniel Lizik
sumber
1

Eksekusi banyak fungsi melalui callback ES6 🤗

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

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

Thomas Gotwig
sumber
0

Mungkin itu bisa membantu seseorang.

<!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>
Hopkroft
sumber
0

Cara singkat untuk menjalankan semuanya:

[first_function, ..., nth_function].forEach (function(f) {
    f('a string');
}); 
Danyal Aytekin
sumber
0

probleme dari array fungsi ini tidak dalam "array form" tetapi dalam cara fungsi-fungsi ini disebut ... lalu ... coba ini .. dengan eval sederhana () ...

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] ); }

itu bekerja di sini, di mana tidak ada yang lebih baik melakukan pekerjaan di rumah ... berharap itu akan membantu

Quetzal
sumber
Bisakah Anda menjelaskan mengapa jawaban lain tidak berhasil untuk Anda, dan mengapa jawaban Anda tidak? Terima kasih!
Fabio berkata Reinstate Monica
pernah mengembalikan saya erors, fungsi tidak terdefinisi, atau mereka sebelumnya tidak dievaluasi oleh javascript ... (mengapa saya tidak tahu, tapi ini menyelesaikan masalah saya)
Quetzal
1
Saran yang mengerikan. stackoverflow.com/questions/86513/…
Andrei Savin
ya, mengerikan, seperti biasa, tetapi solusi tembakan, dan cukup mudah digunakan terutama jika itu jauh dari "input" ... di sini ia hanya memecahkan ketidakmungkinan javascript batin dalam cara singkat ...
Quetzal
0

Menggunakan 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')
    ]
Yakuza
sumber
0

Saya punya banyak masalah untuk mencoba yang satu ini ... mencoba yang sudah jelas, tetapi tidak berhasil. Itu hanya menambahkan fungsi kosong entah bagaimana.

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

Saya memecahkannya dengan menggunakan array string, dan kemudian dengan eval:

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

for (var Func of array_of_functions) {
   eval(Func);
   }
Nezumi
sumber
0

Ah man ada begitu banyak jawaban aneh ...

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 tidak didukung secara default, tetapi ada perpustakaan seperti ramda, lodash, atau bahkan redux yang menyediakan alat ini

Daniel Tok
sumber
-1

Anda mendapat beberapa jawaban teratas di atas. Ini hanyalah versi lain dari itu.

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

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

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

}

pallimula stackoverflow
sumber
2
Pertanyaannya adalah untuk array fungsi, bukan objek.
trincot
-4
/* 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();
pengguna37057
sumber