TypeScript — Функции скрипта

TypeScript — Функции скрипта

От автора: функции скрипта – это структурные элементы читаемого, легкого в сопровождении и повторно используемого кода. Функция – это набор операторов, которые выполняют определенные задачи. Функции организуют программу в логические блоки кода. Когда функции уже определены, их можно вызвать для получения доступа к коду. Это делает код многократно используемым. Более того, функции помогают сделать код читаемым и легким в сопровождении.

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

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

Вызов функции — Для выполнения функция должна быть вызвана.

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

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Параметризованная функция — Параметры – это механизм передачи значений функциям.

Необязательные параметры

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

function function_name (param1[:type], param2[:type], param3[:type])

Пример: необязательные параметры

function disp_details(id:number,name:string,mail_id?:string) { 
 console.log("ID:", id); 
 console.log("Name",name); 
 
 if(mail_id!=undefined) 
 console.log("Email Id",mail_id); 
}
disp_details(123,"John");
disp_details(111,"mary","mary@xyz.com");

Вышеприведенный код объявляет параметризованную функцию. Здесь третий параметр, то есть mail_id, является необязательным.

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

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

После компиляции мы получим следующий JavaScript код:

//Сгенерировано typescript 1.8.10
function disp_details(id, name, mail_id) {
 console.log("ID:", id);
 console.log("Name", name);
 
 if (mail_id != undefined)
 console.log("Email Id", mail_id);
}
disp_details(123, "John");
disp_details(111, "mary", "mary@xyz.com");

Приведенный выше код дает следующий результат:

ID:123 
Name John 
ID: 111 
Name  mary 
Email Id mary@xyz.com

Остаточные параметры

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

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

Пример: остаточные параметры

function addNumbers(...nums:number[]) { 
 var i; 
 var sum:number = 0; 
 
 for(i = 0;i<nums.length;i++) { 
 sum = sum + nums; 
 } 
 console.log("sum of the numbers",sum) 
} 
addNumbers(1,2,3) 
addNumbers(10,10,10,10,10)

Объявление функции addNumbers() принимает остаточный параметр nums. Тип данных остаточного параметра должен быть задан массиву. Более того, функция может иметь не больше одного остаточного параметра.

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

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

После компиляции мы получим следующий код JavaScript:

function addNumbers() {
 var nums = [];
 for (var _i = 0; _i < arguments.length; _i++) {
 nums[_i - 0] = arguments[_i];
 }
 var i;
 var sum = 0;
 
 for (i = 0; i < nums.length; i++) {
 sum = sum + nums;
 }
 console.log("sum of the numbers", sum);
}
addNumbers(1, 2, 3);
addNumbers(10, 10, 10, 10, 10);

Приведенный выше код дает следующий результат:

sum of numbers 6 
sum of numbers 50

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

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

Синтаксис

function function_name(param1[:type],param2[:type] = default_value) { 
}

Примечание: Параметр не может быть одновременно объявлен как необязательный и параметр по умолчанию.

Пример: параметры по умолчанию

function calculate_discount(price:number,rate:number = 0.50) { 
 var discount = price * rate; 
 console.log("Discount Amount: ",discount); 
} 
calculate_discount(1000) 
calculate_discount(1000,0.30)

После компиляции мы получим следующий код JavaScript:

//Сгенерировано typescript 1.8.10
function calculate_discount(price, rate) {
 if (rate === void 0) { rate = 0.50; }
 var discount = price * rate;
 console.log("Discount Amount: ", discount);
}
calculate_discount(1000);
calculate_discount(1000, 0.30);

Приведенный выше код дает следующий результат:

Discount amount : 500 
Discount amount : 300

В этом примере мы видим объявление функции calculate_discount. Данная функция имеет два параметра — price и rate.

Значение параметра rate задано по умолчанию 0.50 .

Программа вызывает функцию, передавая ей только значение параметра price. В данном случае значение rate составляет 0.50 (по умолчанию).

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

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

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

Анонимная функция может быть назначена переменной. Такого рода выражение называется выражением функции.

Синтаксис

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

Пример: простая анонимная функция

var msg = function() { 
 return "hello world"; 
} 
console.log(msg())

После компиляции мы получим тот же самый JavaScript код. Приведенный выше код дает следующий результат:

hello world

Пример: анонимная функция с параметрами

var res = function(a:number,b:number) { 
 return a*b; 
}; 
console.log(res(12,2))

Анонимная функция возвращает произведение переданных ей значений. После компиляции мы получим следующий JavaScript код:

//Сгенерировано typescript 1.8.10
var res = function (a, b) {
 return a * b;
};
console.log(res(12, 2));

Приведенный выше код дает следующий результат:

24

Выражение и объявление функции – это синонимы?

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

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

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

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

TypeScript также поддерживает определение функций со встроенным конструктором JavaScript под названием Function().

Синтаксис

var res = new Function( [arguments] ) { ... }.

Пример

var myFunction = new Function("a", "b", "return a * b"); 
var x = myFunction(4, 3); 
console.log(x);

Новая Function() – это вызов конструктора, который по очереди создает и возвращает ссылки на функцию.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

После компиляции мы получим тот же самый код JavaScript. Приведенный выше код дает следующий результат:

12 

Рекурсия и функции TypeScript

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

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

function factorial(number) {
 if (number <= 0) { 
 return 1; 
 } else { 
 return (number * factorial(number - 1)); // функция вызывает сама себя
 } 
}; 
console.log(factorial(6)); // результат 720

После компиляции мы получим тот же самый код JavaScript. Приведенный выше код дает следующий результат:

720

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

(function () { 
 var x = "Hello!!"; 
 console.log(x) 
})() // функция вызывает саму себя, используя пару параметров ()

После компиляции мы получим тот же самый код JavaScript. Приведенный выше код дает следующий результат:

Hello!!

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

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

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

Лямбда-функции состоят из 3 частей:

Параметры – Функция может иметь параметры

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

Операторы − представляют набор инструкций функции

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

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

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

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

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

var foo = (x:number)=>10 + x 
console.log(foo(100)) //outputs 110

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

//Сгенерировано typescript 1.8.10
var foo = function (x) { return 10 + x; };
console.log(foo(100)); //результат 110

Приведенный выше код дает следующий результат:

110

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

Лямбда выражение – это объявление анонимной функции, которое указывает на блок кода. Этот синтаксис используется, когда тело функции охватывает несколько строк. Он выглядит следующим образом:

( [param1, parma2,…param n] )=> {
 
 //блок кода
}

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

var foo = (x:number)=> { 
 x = 10 + x 
 console.log(x) 
} 
foo(100)

Ссылка на функцию возвращается и хранится в переменной foo. После компиляции мы получим следующий код JavaScript:

//Generated by typescript 1.8.10
var foo = function (x) {
 x = 10 + x;
 console.log(x);
};
foo(100);

Приведенный выше код дает следующий результат:

110

Варианты синтаксиса

Вывод типа параметра

Указывать тип данных параметра не обязательно. В таком случае тип данных параметра будет задан как any. Давайте рассмотрим следующий фрагмент кода:

var func = (x)=> { 
 if(typeof x=="number") { 
 console.log(x+" is numeric") 
 } else if(typeof x=="string") { 
 console.log(x+" is a string") 
 } 
} 
func(12) 
func("Tom")

После компиляции мы получим следующий код JavaScript:

//Сгенерировано typescript 1.8.10
var func = function (x) {
 if (typeof x == "number") {
 console.log(x + " is numeric");
 } else if (typeof x == "string") {
 console.log(x + " is a string");
 }
};
func(12);
func("Tom");

Приведенный выше код дает следующий результат:

12 is numeric 
Tom is a string

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

var display = x=> { 
 console.log("The function got "+x) 
} 
display(12)

После компиляции мы получим следующий код JavaScript:

//Generated by typescript 1.8.10
var display = function (x) {
 console.log("The function got " + x);
};
display(12);

Приведенный выше код дает следующий результат:

The function got 12

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

var disp =()=> { 
 console.log("Function invoked"); 
} 
disp();

После компиляции мы получим следующий JavaScript код:

//Сгенерировано typescript 1.8.10
var disp = function () {
 console.log("Function invoked");
};
disp();

Приведенный выше код дает следующий результат:

Function invoked

Перезапуск функции

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

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

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

Тип данных параметра

function disp(string):void; 
function disp(number):void;

Количество параметров

function disp(n1:number):void; 
function disp(x:number,y:number):void;

Последовательность параметров

function disp(n1:number,s1:string):void; 
function disp(s:string,n:number):void;

Примечание – Сигнатура функции не включает в себя тип возвращаемой функции.

Шаг 2 – После объявление должно следовать определение функции. Типы параметров должны быть заданы как any, если типы параметров будут отличаться во время перезапуска. Дополнительно, для приведенного выше case b, вы можете сделать один или несколько параметров необязательными во время определения функции.

Шаг 3 – Наконец, вам нужно вызвать функцию, чтобы она запустилась.

Пример. Давайте рассмотрим следующий пример кода:

function disp(s1:string):void; 
function disp(n1:number,s1:string):void; 

function disp(x:any,y?:any):void { 
 console.log(x); 
 console.log(y); 
} 
disp("abc") 
disp(1,"xyz");

Первые две строчки иллюстрируют объявление перезапуска функции. Функция имеет два перезапуска:

Функция, которая принимает единственный параметр string.

Функция, которая принимает два значения типа number и string соответственно.

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

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

После компиляции мы получим следующий JavaScript код:

//Сгенерировано typescript 1.8.10
function disp(x, y) {
 console.log(x);
 console.log(y);
}
disp("abc");
disp(1, "xyz");

Приведенный выше код дает следующий результат:

abc 
1 
xyz 

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Курс по ES 6 (EcmaScript 6.0)

Прямо сейчас посмотрите курс по EcmaScript 6.0

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree