Как вызвать функцию в JavaScript с использованием аргументов

JavaScript
На чтение 10 мин Просмотров 14 Опубликовано

В предыдущем руководстве мы узнали, как вызвать функцию в JavaScript без использования параметров.

Во всех программах мы создавали функции без параметров в скрипте. Мы не объявили никаких параметров в списке параметров, и он пустой.

Теперь мы узнаем, как вызвать функцию в JavaScript с передачей значений аргументов. Мы объявляем функции с любым количеством параметров, но их должны разделять запятые.

Как только функция JavaScript с параметрами объявлена, нам нужно передать значения аргументов в функцию, чтобы изменить поведение функции при ее вызове.

Другими словами, когда мы вызываем функцию, мы можем передавать ей некоторые значения. Эти значения являются параметрами или аргументами. Давайте разберемся более подробно.

Содержание
  1. Формальные параметры в JavaScript
  2. Ключевые моменты формальных параметров в JavaScript:
  3. Аргументы в JavaScript
  4. Как вызвать функцию в JavaScript, передавая аргументы/Параметры
  5. Как вызвать функцию в JavaScript Onclick
  6. Вызов функций путем передачи аргументов изнутри другой функции
  7. Вызов функций со значениями аргументов по умолчанию
  8. Как установить значения параметров по умолчанию?
  9. Ключевое слово Arguments в JavaScript

Формальные параметры в JavaScript

Параметры функции в JavaScript — это локальные переменные, объявленные внутри определения функции. Их также называют формальными параметрами.

Каждое определение функции содержит список параметров, заключенный в круглые скобки. Параметры функции получают реальные значения, передаваемые при вызове функции.

Общий синтаксис для объявления функции вместе со списком параметров выглядит следующим образом:

function functionName(parameter1, parameter2, parameter3...) {
// code to be executed
}

Ключевые моменты формальных параметров в JavaScript:

1. Параметры в списке необязательны. Таким образом, список параметров может быть пустым или содержать любую комбинацию типов данных, таких как integer, float, character и т.д.

2. Поскольку JavaScript свободно типизирован, нам не нужно указывать тип данных параметров, как в C ++, Java и других строго типизированных языках программирования.

3. Поскольку параметры являются локальными переменными для функции, они существуют только внутри функции, в которой они определены.

4. Функции JavaScript не выполняют проверку типа передаваемых значений аргументов.

5. Они не проверяют количество полученных аргументов.

Рассмотрим следующий пример.

// Formal parameters in function definition.
<script>
function welcome(myName) // Here, myName is a formal parameter. 
{
  document.write("Welcome " +myName+ " to Scientech Easy!");
}
</script>

Давайте рассмотрим другой пример, чтобы понять более четко.

<script>
function maxTwo(x, y)
{
  if(x > y)
     return x;
  else
     return y;
}
</script>

В приведенной выше функции x и y являются формальными параметрами.

Аргументы в JavaScript

Аргументы в JavaScript — это фактические значения или данные, передаваемые переменным (т.Е. Параметрам), определенным в определении функции. Иногда аргументы также называются фактическими параметрами.

Функция использует значения аргументов при вызове. Значения аргументов всегда заключаются в круглые скобки функции и заменяют те параметры, которые были определены при определении функции. Затем тело метода выполняется с этими значениями.

Рассмотрим следующие примеры.

var x = sum(40, 50);
var y = sub(12, 10);

Значения 40 и 50 — это аргументы, с которыми мы будем вызывать функцию, передавая эти значения.

Примечание: Значения аргументов, передаваемые функции, должны быть перечислены в том же порядке, что и параметры в определении функции.

Как вызвать функцию в JavaScript, передавая аргументы/Параметры

Давайте создадим простую программу на JavaScript, в которой мы будем вызывать функцию, передавая значения аргументов.

Пример 1:

<script>
// Function declaration with two parameters.
  function sum(x, y) // formal parameters
  {
    let s = x+y;
    document.write("Sum of two numbers: " +s);
  }
  sum(20, 30); // Calling function with passing arguments.
</script>

Вывод:
 Сумма двух чисел: 50

В этом примере мы определили функцию с именем sum() с двумя параметрами в разделе head HTML-документа. Когда мы будем вызывать эту функцию, передавая значения аргументов, код внутри функции будет выполняться с этими значениями.

Давайте создадим программу на JavaScript для вычисления среднего значения из трех чисел. Мы вызовем функцию, передав фактические параметры.

Пример 2:

<script>
function avg(x, y, z) // formal parameters
{
    let s = (x+y+z)/3;
    document.write("Avg of three numbers: " +s);
}
// Actual parameters.
   avg(20, 30, 40); // Calling function with passing arguments.
</script>

Вывод:
 Среднее значение из трех чисел: 30

Как вызвать функцию в JavaScript Onclick

Чтобы вызвать функцию в html-документе, мы должны создать простую кнопку и, используя вместе с ней атрибут события onclick (который является обработчиком события), мы вызовем функцию нажатием на кнопку.

Давайте создадим программу на JavaScript, в которой мы будем передавать значения аргументов в список параметров функции во время вызова функции. Когда пользователь нажимает на кнопку, функция запускается.

Пример 3:

<html>
<head>
   <title>Calling function in JavaScript onclick</title>
<script>
// Function declaration.
   function display(name, age, gender){
      document.write("Name: " +name+ " Age: " +age+ " Gender: " +gender);
    }
</script>
</head>
<body>
   <p>Please, click on the given button to call a function</p>
   <input type = "button" onclick = "display('John', 25, 'Male')" value = "Click me">
</body>
</html>

В этой программе мы определили функцию с именем «display()» с тремя параметрами: именем, возрастом и полом, и определили ее в разделе head HTML-документа.

Для вызова этой функции из head мы использовали кнопку в разделе body HTML. Когда пользователь нажимает эту кнопку, функция вызывается с передачей значений аргументов в параметры функции и выполняется. Вывод этой программы выглядит следующим образом:

Вывод:
 Имя: Джон Возраст: 25 Пол: Мужской

Давайте создадим другую HTML-программу, в которой мы определим функцию внутри скрипта раздела head и вызовем ее изнутри скрипта и из раздела body с помощью button.

Пример 4:

<html>
<head>
  <title>Calling function by passing parameters</title>
<script>
// Function declaration.
  function calculate(speed, time) {
     var distance = speed * time;
     document.write("Distance travelled: " +distance+ "<br>");
  }
  calculate(25, 5); // Calling function from the head section.
</script>
</head>
<body>
   <input type = "button" onclick = "calculate(30, 4)" value= "click me">
</body>
</html>

Вывод:
 Пройденное расстояние: 125
 Пройденное расстояние: 120 (при нажатии кнопки)

Вызов функций путем передачи аргументов изнутри другой функции

Давайте создадим программу на JavaScript, в которой мы будем вызывать функции, передавая аргументы изнутри другой функции. Мы будем вычислять сложение, вычитание, умножение и деление двух чисел.

Пример 5:

<script>
// Functions declaration.
  function addition(x, y)
  {
    let p = x+y;
    document.write("Sum: " +p, "<br>");
  }
  function subtraction(x, y)
  {
    let q = x - y;
    document.write("Sub: " +q, "<br>");
   }
  function multiplication(x, y)
  {
    let r = x * y;
    document.write("Multiply: " +r, "<br>");
  }
  function division(x, y)
  {
    let s = x/y;
    document.write("Division: "+s);
  }
  function main()
  {
 // Calling function inside another function by passing argument values.
    addition(20, 30);
    subtraction(30, 10);
    multiplication(10, 20);
    division(20, 5);
  }
  main();
</script>

Вывод:
 Сумма: 50
 Вычитание: 20
 Умножение: 200
 Деление: 4

Вызов функций со значениями аргументов по умолчанию

Если мы вызываем функцию, передавая меньше аргументов, чем количество именованных параметров, дополнительные параметры оказываются неопределенными.

Например, если определение функции содержит три параметра, но мы вызываем ее с двумя аргументами, третьему параметру в функции будет присвоено значение undefined.

Аналогично, если мы вызываем функцию, передавая больше аргументов, чем количество параметров, то они игнорируются.

Рассмотрим следующий пример программы.

Пример 6:

<script>
// Function 1 declaration.
  function m1(x, y, z)
  {
    document.write("Value of x = " +x, "<br>");
    document.write("Value of y = " +y, "<br>");
    document.write("Value of z = " +z, "<br>");
  }
  m1(25, 20); // Calling function by passing only two arguments.
// Function 2 declaration.
  function m2(a, b)
  {
   document.write("Value of a = " +a, "<br>");
   document.write("Value of b = " +b);
  }
 m2(2, 4, 8); // JavaScript will ignore third argument.
</script>
</head>

Вывод:
 Значение x = 25
 Значение y = 20
 Значение z = не определено
 Значение a = 2
 Значение b = 4

Как вы можете наблюдать в программе, первая функция содержит три параметра, но мы вызываем ее, передавая только два аргумента. В результате третий параметр устанавливается со значением undefined.

Как установить значения параметров по умолчанию?

JavaScript также позволяет нам устанавливать значения по умолчанию, отличные от undefined. Наиболее широко поддерживаемый и принятый способ заключается в том, что сначала проверяется, является ли аргумент undefined.

Если это так, то установите значение по умолчанию. Например, рассмотрим приведенную ниже программу, где функция имеет один параметр. Внутри функции мы проверим, является ли аргумент неопределенным. Если это так, мы установим значение по умолчанию.

Пример 7:

<html>
<head>
   <title>Setting default parameter values</title>
<script>
function welcome(yourName)
{
// Checking whether the argumenet is undefined or not. 
   if(typeof yourName == 'undefined') {
    yourName = "friend"; // Setting defualt value to the parameter.
}
document.write(yourName);
}
welcome();
</script>
</head>
<body>
</body>
</html>

Вывод:
 друг

ECMAScript 6 также позволяет установить значения по умолчанию для параметров внутри заголовка функции, как показано в приведенном ниже коде.

Пример 8:

<html>
<head>
   <title>Setting a default value in the function head</title>
<script>
  function welcome(yourName = "John")
  {
    document.write("Welcome ", yourName);
  }
  welcome();
</script>
</head>
<body>
</body>
</html>

Вывод:
 Добро пожаловать, Джон

Ключевое слово Arguments в JavaScript

Мы также можем определить функцию, которая принимает переменное количество аргументов. JavaScript предоставляет ключевое слово arguments, которое является специальной переменной.

Эта переменная позволяет функции принимать аргументы, которые динамически изменяются при каждом вызове функции. Например, первый аргумент — functionName.arguments[0], второй — functionName.arguments[1], третий — functionName.arguments[2] и так далее.

JavaScript сохраняет количество аргументов, переданных функции, в свойстве length объекта arguments. Объект arguments содержит массив всех аргументов, переданных функции. Синтаксис выглядит следующим образом:

Имяфункции.аргументы.длина

Рассмотрим следующий код скрипта, который иллюстрирует эту концепцию:

Пример 9:

<html>
<head>
  <title>Arguments keyword in JavaScript</title>
<script>
function display()
{
    document.write("First argument is " +display.arguments[0], "<br>");
    document.write("Second argument is " +display.arguments[1], "<br>");
    document.write("Third argument is " +display.arguments[2], "<br>");
    document.write("Number of arguments = " +display.arguments.length, "<br>");
}
display(2, 4, 6);
</script>
</head>
<body>
</body>
</html>

Вывод:
 Первый аргумент равен 2
 Второй аргумент равен 4
 Третий аргумент равен 6
 Количество аргументов = 3

В этой программе аргументы.длина подсчитывает количество аргументов в массиве.

Мы можем использовать цикл for или for…in loop для печати списка аргументов, переданных функции. Давайте рассмотрим пример, основанный на этой концепции.

Пример 10:

<html>
<head>
   <title>Iterating Arguments in JavaScript</title>
<script>
function cityList()
{
    var result = ""; // initial empty string variable.
    for(let x = 0; x < cityList.arguments.length; x++)
    {
    // Adding each argument supplied to result variable.
       result += cityList.arguments[x]+ "<br>";
    }
   document.write(result);
}
cityList("Dhanbad", "New York", "Mumbai", "Sydney", "Tokyo");
</script>
</head>
<body>
</body>
</html>

Вывод:
 Dhanbad
 НЬЮ-ЙОРК
 Мумбаи
 Сидней
 Токио

Давайте создадим программу на JavaScript, в которой мы будем суммировать все входные значения.

Пример 11:

<html>
<head>
  <title>Calculating sum of all input values</title>
<script>
function sumAll()
{
    let sum = 0;
    for (let x = 0; x < arguments.length; x++)
    {
      sum += arguments[x];
    }
   document.write("Sum of all numbers = " +sum);
}
sumAll(10, 20, 30, 40, 50, 60);
</script>
</head>
<body>
</body>
</html>

Вывод:
 Сумма всех чисел = 210

В этом руководстве вы узнали, как вызывать функцию в JavaScript, передавая аргументы. Я надеюсь, что вы поняли концепцию вызова функции, когда пользователь нажимает на кнопку.

Оцените статью
© 2025 Блог о разработке сайтов на HTML, CSS и Javascript
Adblock
detector