ES6 - Функции - CoderLessons.com

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

function function_name() { 
   // function body 
}

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

function_name()

Пример: простое определение функции

//define a  function 
function test() { 
   console.log("function called") 
} 
//call the function 
test()

В примере определяется функция test (). Пара разделителей ({}) определяет тело функции. Это также называется областью действия функции . Функция должна быть вызвана для принудительного выполнения.

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

function called

Классификация функций

Функции могут быть классифицированы как Возвратные и Параметризованные функции.

Возврат функций

Функции могут также возвращать значение вместе с контролем обратно вызывающей стороне. Такие функции называются возвращающими функциями.

Ниже приводится синтаксис возвращаемой функции.

function function_name() { 
   //statements 
   return value; 
}

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

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

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

Оператор return должен быть последним в функции.

Следующий фрагмент кода является примером возвращаемой функции —

function retStr() { 
   return "hello world!!!" 
}  
var val = retStr() 
console.log(val)

Приведенный выше пример определяет функцию, которая возвращает строку «hello world !!!» вызывающей стороне. Следующий вывод отображается при успешном выполнении вышеуказанного кода.

hello world!!!

Параметризованные функции

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

Ниже приводится синтаксис, определяющий параметризованную функцию.

function func_name( param1,param2 ,…..paramN) {   
   ...... 
   ...... 
}

Пример — параметризованная функция

В примере определяется функция add, которая принимает два параметра n1 и n2 и печатает их сумму. Значения параметров передаются в функцию при ее вызове.

function add( n1,n2) { 
   var sum = n1 + n2 
   console.log("The sum of the values entered "+sum) 
} 
add(12,13)

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

The sum of the values entered 25

Параметры функции по умолчанию

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

function add(a, b = 1) { 
   return a+b; 
} 
console.log(add(4))

Вышеуказанная функция устанавливает значение b в 1 по умолчанию. Функция всегда будет считать, что параметр b содержит значение 1, если только значение не было передано явно. Следующий вывод отображается при успешном выполнении вышеуказанного кода.

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

function add(a, b = 1) { 
   return a + b; 
} 
console.log(add(4,2))

Приведенный выше код явно устанавливает значение параметра b равным 2, тем самым перезаписывая его значение по умолчанию. Следующий вывод отображается при успешном выполнении вышеуказанного кода.

Остальные параметры

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

Чтобы объявить параметр rest, перед именем параметра указывается три периода, которые называются оператором распространения. Следующий пример иллюстрирует то же самое.

function fun1(...params) { 
   console.log(params.length); 
}  
fun1();  
fun1(5); 
fun1(5, 6, 7);

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

0 
1 
3

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

Анонимная функция

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

Переменным может быть назначена анонимная функция. Такое выражение называется функциональным выражением .

Ниже приводится синтаксис для анонимной функции.

var res = function( [arguments] ) { ... }

Пример — анонимная функция

var f = function(){ return "hello"} 
console.log(f())

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

hello

Пример — анонимная параметризованная функция

var func = function(x,y){ return x*y }; 
function product() { 
   var result; 
   result = func(10,20); 
   console.log("The product : "+result) 
} 
product()

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

The product : 200

Конструктор функций

Оператор функции — не единственный способ определить новую функцию; Вы можете определить свою функцию динамически, используя конструктор Function () вместе с оператором new.

Ниже приведен синтаксис для создания функции с помощью конструктора Function () вместе с оператором new.

var variablename = new Function(Arg1, Arg2..., "Function Body");

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

В конструктор Function () не передается ни один аргумент, определяющий имя создаваемой функции.

Пример — конструктор функции

var func = new Function("x", "y", "return x*y;"); 
function product() { 
   var result; 
   result = func(10,20); 
   console.log("The product : "+result)
} 
product()

В приведенном выше примере конструктор Function () используется для определения анонимной функции. Функция принимает два параметра и возвращает их произведение.

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

The product : 200

Функции рекурсии и JavaScript

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

Пример — рекурсия

function factorial(num) { 
   if(num<=0) { 
      return 1; 
   } else { 
      return (num * factorial(num-1)  ) 
   } 
} 
console.log(factorial(6))

В приведенном выше примере функция вызывает себя. Следующий вывод отображается при успешном выполнении вышеуказанного кода.

Пример — анонимная рекурсивная функция

(function() { 
   var msg = "Hello World" 
   console.log(msg)
})()

Функция вызывает себя, используя пару скобок (). Следующий вывод отображается при успешном выполнении вышеуказанного кода.

Hello World

Лямбда-функции

Лямбда относится к анонимным функциям в программировании. Лямбда-функции являются кратким механизмом для представления анонимных функций. Эти функции также называются функциями Arrow .

Лямбда-функция — анатомия

Есть 3 части лямбда-функции —

Параметры — функция может иметь параметры.
Обозначение жирной стрелки / лямбда-нотация (=>): оно также называется оператором перехода.
Заявления — представляет набор инструкций функции.

Параметры — функция может иметь параметры.

Обозначение жирной стрелки / лямбда-нотация (=>): оно также называется оператором перехода.

Заявления — представляет набор инструкций функции.

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

Лямбда-выражение

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

([param1, parma2,…param n] )=>statement;

Пример — лямбда-выражение

var foo = (x)=>10+x 
console.log(foo(10))

В примере объявляется функция лямбда-выражения. Функция возвращает сумму 10 и переданный аргумент.

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

Лямбда-оператор

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

( [param1, parma2,…param n] )=> {       
   //code block 
}

Пример — лямбда-оператор

var msg = ()=> { 
   console.log("function invoked") 
} 
msg()

Ссылка на функцию возвращается и сохраняется в переменной msg. Следующий вывод отображается при успешном выполнении вышеуказанного кода.

function  invoked

Синтаксические вариации

Необязательные скобки для одного параметра.

var msg = x=> { 
   console.log(x) 
} 
msg(10)

Дополнительные скобки для одного утверждения. Пустые скобки без параметров.

var disp = ()=>console.log("Hello World") 
disp();

Выражение функции и объявление функции

Выражение функции и объявление функции не являются синонимами. В отличие от выражения функции, объявление функции связано с именем функции.

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

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

Подъем функции

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

Следующий фрагмент кода иллюстрирует подъем функций в JavaScript.

hoist_function();  
function hoist_function() { 
   console.log("foo"); 
}

Следующий вывод отображается при успешном выполнении вышеуказанного кода.

foo

Однако выражения функций не могут быть подняты. Следующий фрагмент кода иллюстрирует то же самое.

hoist_function(); // TypeError: hoist_function() is not a function  
var hoist_function() = function() { 
   console.log("bar"); 
};

Сразу же вызванное выражение функции

Выражения с немедленным вызовом функций (IIFE) могут использоваться, чтобы избежать подъема переменных из блоков. Это позволяет публичный доступ к методам, сохраняя конфиденциальность для переменных, определенных в функции. Этот шаблон называется самовыполняющейся анонимной функцией. Следующие два примера лучше объясняют эту концепцию.

Пример 1: IIFE

var main = function() { 
   var loop = function() { 
      for(var x = 0;x<5;x++) {
         console.log(x); 
      } 
   }(); 
   console.log("x can not be accessed outside the block scope x value is :"+x); 
} 
main();

Пример 2: IIFE

var main = function() { 
   (function() { 
      for(var x = 0;x<5;x++) { 
         console.log(x); 
      } 
   })(); 
   console.log("x can not be accessed outside the block scope x value is :"+x); 
} 
main();

Оба примера приведут к следующему выводу.

0 
1 
2 
3 
4 
Uncaught ReferenceError: x is not define

Функции генератора

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

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

Функция может вернуть управление вызывающей стороне в любой момент.

Когда вы вызываете генератор, он не сразу запускается. Вместо этого вы получите итератор. Функция запускается при вызове следующего метода итератора.

Генераторы обозначаются суффиксом ключевого слова функции; в противном случае их синтаксис идентичен обычным функциям.

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

"use strict" 
function* rainbow() { 
   // the asterisk marks this as a generator 
   yield 'red'; 
   yield 'orange'; 
   yield 'yellow'; 
   yield 'green'; 
   yield 'blue'; 
   yield 'indigo'; 
   yield 'violet'; 
} 
for(let color of rainbow()) { 
   console.log(color); 
}

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

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

function* ask() { 
   const name = yield "What is your name?"; 
   const sport = yield "What is your favorite sport?"; 
   return `${name}'s favorite sport is ${sport}`; 
}  
const it = ask(); 
console.log(it.next()); 
console.log(it.next('Ethan'));  
console.log(it.next('Cricket'));

Последовательность функции генератора следующая:

Генератор запущен в приостановленном состоянии; итератор возвращается.
It.next () выдает «Как тебя зовут». Генератор приостановлен. Это делается с помощью ключевого слова yield.
Вызов it.next («Ethan») присваивает значение Ethan имени переменной и выдает «Какой ваш любимый вид спорта?». Генератор снова останавливается.
Вызов it.next («Cricket») присваивает значение Cricket переменной sport и выполняет последующий оператор return.

Генератор запущен в приостановленном состоянии; итератор возвращается.

It.next () выдает «Как тебя зовут». Генератор приостановлен. Это делается с помощью ключевого слова yield.

Вызов it.next («Ethan») присваивает значение Ethan имени переменной и выдает «Какой ваш любимый вид спорта?». Генератор снова останавливается.

Вызов it.next («Cricket») присваивает значение Cricket переменной sport и выполняет последующий оператор return.

Следовательно, вывод приведенного выше кода будет —

{ 
   value: 'What is your name?', done: false 
} 
{ 
   value: 'What is your favorite sport?', done: false 
} 
{ 
   value: 'Ethan\'s favorite sport is Cricket', done: true 
}

Примечание. Функции генератора не могут быть представлены с помощью функций стрелок.

ES6 — Функции

Пример: простое определение функции

Классификация функций

Возврат функций

Параметризованные функции

Параметры функции по умолчанию

Остальные параметры

Анонимная функция

Конструктор функций

Функции рекурсии и JavaScript

Лямбда-функции

Лямбда-функция — анатомия

Лямбда-выражение

Лямбда-оператор

Синтаксические вариации

Выражение функции и объявление функции

Подъем функции

Сразу же вызванное выражение функции

Пример 1: IIFE

Пример 2: IIFE

Функции генератора

Популярные уроки и статьи

Инициализаторы экземпляра в Java объяснены

AJAX - Краткое руководство

TempDB для производительности