자바 스크립트 함수 배열

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

배열의 각 함수는 배열을 만들 때 실행되므로 의도 한대로 작동하지 않습니다.

다음을 수행하여 배열에서 함수를 실행하는 올바른 방법은 무엇입니까?

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

감사!

javascript  arrays  function 
— 새긴 ​​금
소스
1
하는가 'a string'어레이가 채워지는 시점에서 공지 될 필요하거나 함수 호출 측에 전달할 수 있는가?
— Crescent Fresh
더 나은 처리 방법이있을 수 있기 때문에 달성하려는 작업에 대해 더 자세히 알고 싶습니다.
— Jeff
2
"함수의 배열"-또는 우리가 그것을 메소드를 가진 객체 라 부르고 자
— symcbean
더 자세한 정보를 제공해야한다고 생각하지 않습니까? 이것을 처리하는 더 좋은 방법이있을 수 있습니다 ..
— IcyFlame

답변:

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

그런 다음 배열에서 주어진 함수를 실행하려는 경우 :

array_of_functions[0]('a string');
— 다린 디미트로프
소스
16
팁 : 비어 있더라도 ()뒤에 array_of_functions[0]두어야합니다. 나는 왜 그것이 효과가 없는지 찾기 위해 20 분을 보냅니다.
— Horacio
매력처럼 일했다!
— Moses Ndeda
'firstFunction'과 같은 문자열 값을 전달하여 동적으로 함수의 색인을 얻는 방법은 무엇입니까?
— O'Dane Brissett
106

나는 이것이 원래의 포스터가 성취하려는 의도라고 생각합니다.

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 함수를 호출하는 방법에 대한 힌트를 찾는 데 도움이되기를 바랍니다.

— pjcabrera
소스
3
내 함수가 모두 같은 매개 변수를 사용하지 않는다고 가정하면 매개 변수 호출을 변경할 수 있기 때문에 이것은 내가 필요한 것입니다. : P
— Jem
24

당신이 이루고자하는 것에 대한 자세한 설명이 없다면, 우리는 다소 추측하고 있습니다. 그러나 객체 표기법을 사용하여 이와 같은 작업을 수행 할 수 있습니다 ...

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

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

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

그리고 그들 중 하나를 부르기 위해 ...

myFuncs.firstFunc('a string')
— 제프
소스
1
함수 인덱스를 기억할 필요가 없으므로 개발자 친화적이라고 생각합니다. 또한 특정 인덱스에서 함수를 푸시하려면 옆에있는 모든 함수의 인덱스가 변경됩니다. 그래서 이것을 더 잘 사용하십시오
— dd619
16

아니면 그냥 :

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

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

  thirdFunc: function(string) {
    // do something
  }
}
— 남자 이름
소스
13

원래 여기에 설명 된shift() Javascript 메소드를 사용하여 Array 내에서 다양한 기능을 쉽게 실행할 수있는 방법을 게시 하여이 스레드를 보완합니다.

  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

기본적으로는 동일 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]);
}
스 니펫 확장

— 멘 수르 그리 셰 비치
소스
1
아무리 많은 사람이 있더라도 답변을 추가하는 것이 좋습니다. 그러나 다른 것들과 다른 점 / 더 나은 점에 대한 설명을 추가하는 것이 좋습니다
— Bowdzone
3

위에서 우리는 반복되는 것을 보았다. 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
소스
1

맞습니다

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);
— 레오나르도 치아 치오
소스
1
이것이 당신이 대답하고 싶은 질문 인지 확실 합니까? 관련이 없습니다.
— Bergi
1
@Bergi 사실이다. 응답의 교체 opera와를 array_of_functions당신은 같은 일을 가지고있다. 지금은 어때?
— Jesse
@Jesse thanks, 이제 코드를 게시하는 아이디어가 있습니다. 이것이 첫 번째 응답입니다.
— 레오나르도 Ciaccio
그러나 OP에는 배열이 있지만 이것이 이상한 속성 이름을 가진 일부 개체입니까? 그리고이 답변에 대한 뉴스는 무엇입니까? 왜 pjcabrera 나 Robin을 공감하지 않습니까?
— Bergi
1
변수 이름이 혼동됩니다. 그것은 함수의 배열이 아니라 함수의 대상입니다
— Craicerjack
1

콜백을 동적으로 전달하는 것과 같은 작업을 수행하는 경우 단일 객체를 인수로 전달할 수 있습니다. 이를 통해 매개 변수로 실행하려는 기능을 훨씬 효과적으로 제어 할 수 있습니다.

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
— 다니엘 리 지크
소스
1

ES6 콜백을 통한 많은 기능의 실행 🤗

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

f(() => [
  console.log(1),
  console.log(2),
  console.log(3)
])
스 니펫 확장

— 토마스 고 트윅
소스
0

어쩌면 누군가에게 도움이 될 수 있습니다. 

<!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>
— 홉 크로프트
소스
0

이 함수 배열의 문제는 "배열 형태"가 아니지만 이러한 함수가 호출되는 방식으로 ... 다음을 시도해보십시오. 간단한 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] ); }

그것은 집에서 일하는 위의 일이 없었던 곳입니다 ... 그것이 도움이되기를 바랍니다.

— 케찰
소스
왜 다른 답변이 효과가 없는지, 왜 당신의 답변이 효과가 있는지 설명해 주시겠습니까? 감사합니다!
— Fabio에 의하면 Reinstate Monica는
이제까지 정의되지 않은 함수 나 erors 반환하거나 precisly 자바 스크립트에 의해 evalued되지 않습니다 ... (내가 왜 몰라,하지만 이건 내 문제 해결)
— 퀘찰
1
— Andrei Savin
예, 끔찍한, 변함없이,하지만 샷 솔루션은 꽤 쉽게 ... 그냥 짧은 방법으로 내부 자바 스크립트 불가를 해결 ... 여기의 경우 지금까지에 "입력"에서 특히 사용
— 퀘찰
0

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')
    ]
— 야쿠자
소스
0

이 문제를 해결하려고 많은 문제가 있습니다 ... 명백한 시도했지만 작동하지 않았습니다. 어떻게 든 빈 함수를 추가합니다.

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);
   }
— 네즈 미
소스
0

아 이상한 답변이 너무 많아

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와 같은 라이브러리가 있습니다.

— 다니엘 톡
소스
-1

위에 몇 가지 최고의 답변이 있습니다. 이것은 또 다른 버전입니다.

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
소스
2
문제는 객체가 아니라 함수 의 배열 에 관한 것이었다 .
— 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();
— 사용자 37057
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.