Dada una array que contiene funciones, la tarea es acceder a su elemento de diferentes maneras usando JavaScript.
Acercarse:
- Declarar una array de funciones.
- La función de array funciona con índices como una función de array.
Ejemplo 1: en este ejemplo, la llamada a la función se inicia desde el elemento de la array, pero la función se define en otro lugar. Podemos pasar argumentos a la función mientras llamamos.
<!DOCTYPE HTML>
<html>
<head>
<title>
Array of functions in javascript
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 19px; font-weight: bold;">
</p>
<button onClick = "GFG_Fun()">
click here
</button>
<p id = "GFG_DOWN" style =
"color: green; font-size: 24px; font-weight: bold;">
</p>
<script>
var up = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
function firstFun(str) {
down.innerHTML = str;
}
function secondFun(str) {
down.innerHTML = str;
}
function thirdFun(str) {
down.innerHTML = str;
}
// Declare array of functions
var arrayOfFunction = [
firstFun,
secondFun,
thirdFun
]
up.innerHTML = "Calling function from the array of functions";
// Function call
function GFG_Fun() {
arrayOfFunction[0]("This is first function");
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: En este ejemplo, la función (anónima) en sí misma se define como los elementos de la array. Podemos acceder a él accediendo al elemento de array seguido de().
<!DOCTYPE HTML>
<html>
<head>
<title>
Array of functions in JavaScript
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 19px; font-weight: bold;">
</p>
<button onClick = "GFG_Fun()">
click here
</button>
<p id = "GFG_DOWN" style =
"color: green; font-size: 24px; font-weight: bold;">
</p>
<script>
var up = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
// Declare an array of functions
var arrayOfFunction = [
function() {
down.innerHTML = "Inside First function";
},
function() {
down.innerHTML = "Inside Second function";
},
function() {
down.innerHTML = "Inside Third function";
}
]
up.innerHTML = "Calling function from the array of functions";
function GFG_Fun() {
arrayOfFunction[2]();
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA