Путь фронтенд-архитектора к развитию 07_JavaScript функция

1 Определение и вызов функций

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

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

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

// 内置函数
console.log(parseFloat('7.26e-2'));  // 返回解析后的浮点数：0.0726
console.log(isNaN(' '));             // 判断是否是NaN：false
console.log(parseInt('15.99'));      // 返回解析后的整数值：15

• parseFloat() используется для возврата числа с плавающей запятой после анализа строки.

• isNaN() определяет, является ли данный параметр NaN. Если результат да, он возвращает true, в противном случае возвращает false.

• parseInt() используется для возврата целочисленного значения после анализа строки.

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

Определение функции состоит из следующих 4 частей:

• Функция ключевых слов.
• Имя функции.
• параметр.
• тело функции.

function 函数名([参数1, 参数2, ……])
{
    
    
    函数体
    ……
    reutrn
}

• функция: ключевое слово, определяющее функцию.
• Имя функции: оно может состоять из прописных и строчных букв, цифр, подчеркивания (_) и символа $, но имя функции не может начинаться с цифры и не может быть ключевым словом в JavaScript.
• Параметр: это значение, передаваемое функции из внешнего мира. Это необязательно. Используйте "," для разделения нескольких параметров.
• Тело функции: это основное тело, специально используемое для реализации определенной функции и состоящее из одного или нескольких операторов.
• Возвращаемое значение: если вы хотите получить результат обработки после вызова функции, вы можете использовать ключевое слово return в теле функции для возврата.

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

1.2 Настройки параметров

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

• функция без параметров
• функция с параметрами

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

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

function greet() {
    
    
    console.log('Hello everybody!');
}

Примечание. При настройке функции, даже если реализация функции не требует установки параметров, скобки «()» опускать нельзя.

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

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

• Формальные параметры: относятся к формальным параметрам, которые имеют конкретное значение и задаются при определении параметризованной функции. Проще говоря: переменные, которые не нужно объявлять.
  • Используется для получения фактических параметров
• Фактические параметры: относятся к фактическим параметрам, то есть конкретным значениям, параметрам, передаваемым при вызове функции. При вызове функции фактические значения параметров передаются формальным параметрам.
• Множественные параметры фактических параметров и формальных параметров разделяются запятыми (,).

function maxNum(a, b) {
    
    
    a =  parseInt(a);
    b =  parseInt(b);
    return a >= b ? a : b;
}

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

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

function transferParam() {
    
    
    console.log(arguments.length);
    console.log(arguments);
}

Количество формальных параметров и фактических параметров не совпадают

Количество параметров	иллюстрировать
Количество фактических параметров равно количеству формальных параметров.	Выведите правильный результат
Количество фактических параметров больше количества формальных параметров	Получите только количество формальных параметров
Количество фактических параметров меньше количества формальных параметров.	Несколько формальных параметров определяются как неопределенные, а результатом является NaN.

function sum(num1, num2) {
    
    
    console.log(num1 + num2);
}
sum(100, 200);             // 300，形参和实参个数相等，输出正确结果
sum(100, 400, 500, 700);   // 500，实参个数多于形参，只取到形参的个数
sum(200);                  // 实参个数少于形参，多的形参定义为undefined，结果为NaN

Примечание. В JavaScript значение формальных параметров по умолчанию не определено.

Параметры со значениями по умолчанию и остальные параметры

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

function greet(name, say = 'Hi, I\'m ') {
    
    
    console.log(say + name);
}

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

оператор распространения

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

// 一个确定形参
function transferParam(num1, ...theNums) {
    
    
    theNums.unshift(num1);
    console.log(theNums);
}

// 无确定的形参
function transferParam(...theNums) {
    
    
    console.log(theNums);
}

transferParam(99, 33, 56, 88, 90, 662);

1.3 Вызов функции

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

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

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

函数名称([参数1, 参数2, ……])

[Параметр 1, Параметр 2...] является необязательным и используется для представления формального списка параметров, значение которого может быть нулем, одним или несколькими.

1.4 Практические задания

• Преобразование регистра строк
  • Напишите HTML-форму и настройте два текстовых поля и две кнопки. Текстовые поля отображают данные до и после преобразования, а кнопки используются для преобразования.
  • Добавьте к кнопке событие щелчка и используйте функцию для его обработки.
  • Напишите функцию для выполнения различных операций преобразования на основе разных переданных параметров.
  • Отобразите преобразованные данные в соответствующем месте.
• Функция пакета для поиска максимального значения из двух чисел
  • Найдите максимум двух чисел; найдите максимум трёх чисел.

2 Область действия переменных

После объявления переменной можно ли ее где-либо использовать? нет.

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

function info() {
    
    
    var age = 18;
}
// 输出结果：Uncaught ReferenceError: age is not defined
console.log(age);

Использование переменных ограничено.

Разделение области действия: глобальная область видимости, область действия функции и область уровня блока (предоставляется ES6).

Переменные, соответствующие различным областям действия: глобальные переменные, локальные переменные, переменные уровня блока (предоставляемые ES6).

// demo.js 全局作用域
// -- 函数 函数作用域
// -- 语句(含有{}) 块级作用域

// 全局作用域
var global = 'global';
function add(){
    
    
    // 函数作用域
    var fuc = 'fuc';
    // 块级作用域
    for(let a=1;a<5;a++){
    
    
        console.log(a);
    }
}

• Глобальные переменные. Переменные, которые не объявлены ни в одной функции (явное определение), или переменные, объявленные с опущенным var внутри функции (неявное определение), называются глобальными переменными.
  • Область применения: его можно использовать во всех сценариях в одном файле подкачки.

// 全局变量
var global = 'global';
function add(){
    
    
    // 全局变量
    fuc = 'fuc';
}

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

var global = 'global';
function add(){
    
    
    // 局部变量
    var fuc = 'fuc';
}

• Переменные уровня блока. Переменные, объявленные с помощью ключевого слова let, предоставленного ES6, называются переменными уровня блока, которые действительны только между «{}», например операторами if, for или while и т. д.

function add(){
    
    
    // 块级变量
    let fuc = 'fuc';
    // 块级变量
    for(let a=1;a<5;a++){
    
    
        console.log(a);
        console.log(fuc);
    }
    console.log(fuc);
    console.log(a);
}

Уведомление:

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

Механизм сбора мусора

• В JavaScript локальные переменные существуют только во время выполнения функции. Во время этого процесса в памяти (стеке или куче) выделяется соответствующее пространство для локальных переменных для хранения их значений, а затем эти переменные используются в функции. функция завершается.
• После завершения выполнения функции локальные переменные больше не нужны, и JavaScript автоматически освободит занимаемое ими пространство памяти с помощью механизма сборки мусора.
• Когда объект создан и всем переменным объекта присвоены нулевые значения, объектом невозможно манипулировать, и он называется мусором.
• js имеет механизм автоматической сборки мусора. Ему не нужно и он не может собирать мусор вручную. Все, что он может сделать, это присвоить значение null объектам, которые больше не используются.

Если вы хотите сохранить значения локальных переменных во время разработки, вы можете добиться этого двумя способами:

// 第1种方式：利用return返回
function test(num) {
    
    
    num = num + 1;
    return num;
}
var num = test(24);
console.log(num); // 输出结果：25

// 第2种方式：利用全局变量保存
var memory;
function test(num) {
    
    
    memory = num + 1;
}
test(24);
console.log(memory); // 输出结果：25

3 анонимные функции

3.1 Выражение функции

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

// 函数表达式
var fn = function sum(num1, num2) {
    
    
    return num1 + num2;
};
fn();

// 函数声明方式
sum();
function sum(num1, num2) {
    
    
    return num1 + num2;
};

• Функции определяются по-разному
• Функции вызываются по-разному
• Определение функции и порядок вызова отличаются

3.2 Анонимные функции

Анонимная функция относится к функции без имени функции.

Это позволяет эффективно избежать загрязнения глобальных переменных и конфликта имен функций.

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

// 函数表达式中省略函数名
var fn = function (num1, num2) {
    
    
  return  num1 + num2;
};
fn(1, 2);

// 自调用方式
(function (num1, num2) {
    
    
  return  num1 + num2;
})(2, 3);

// 处理事件
document.body.onclick  = function () {
    
    
  alert('Hi, everybody!');
};

функция стрелки

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

Синтаксис выражения функции стрелки короче, чем синтаксис выражения функции.

// 语法
(p1, p2, …, pN) => {
    
     statements }
/*
参数：
多个参数：(p1, p2, …, pN)
一个参数：(p1)  或 p1
没有参数：() 或 _

函数体：
函数体：{ statements }
返回值：{ return expression; }
函数体只有一条语句：expression
*/

// 设置1个参数
var fn1 = x => x + 2;
console.log(fn1(4)); // 输出结果：6

// 设置2个参数
var fn2 = (x, y) => x + y;
console.log(fn2(1, 2) ); // 输出结果：3

Стрелка «=>» в стрелочной функции не является оператором или оператором, но на стрелочную функцию влияет приоритет оператора по сравнению с обычными функциями.

3.3 Функция обратного вызова

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

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

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

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

имя метода	Описание функции	Формат
находить()	Возвращает значение первого элемента массива, удовлетворяющего функции обратного вызова, в противном случае возвращает неопределенное значение.	array.find(function(currentValue, index, arr),thisValue);
каждый()	Проверяет, проходят ли все элементы массива проверку функции обратного вызова.	array.every(function(currentValue,index,arr), thisValue);
некоторый()	Проверяет, проходят ли определенные элементы массива тест, реализованный функцией обратного вызова.	array.some(function(currentValue,index,arr),thisValue);
для каждого()	Выполните предоставленную функцию один раз для каждого элемента массива.	array.forEach(function(currentValue, index, arr), thisValue);
карта()	Создает новый массив, результат которого является результатом однократного вызова предоставленной функции обратного вызова для каждого элемента массива.	array.map(функция(currentValue,index,arr), thisValue);
уменьшать()	Примените функцию к аккумулятору и каждому элементу массива (слева направо), сводя его к одному значению.	array.reduce(function(total, currentValue, currentIndex, arr), InitialValue);
уменьшитьправо()	Получает функцию в виде аккумулятора и сводит каждое значение массива (справа налево) к одному значению.	array.reduceRight(function(total, currentValue, currentIndex, arr), InitialValue);

/* array.find(function(currentValue, index, arr),thisValue);
currentValue 必需。当前元素
index 可选。当前元素的索引值
arr 可选。当前元素所属的数组对象
注意: find() 对于空数组，函数是不会执行的。
注意: find() 并没有改变数组的原始值。
*/
// 获取数组中年龄大于 18 的第一个元素
var ages = [3, 10, 18, 20];
function checkAdult(age) {
    
    
    return age >= 18;
}
console.log(ages.find(checkAdult));

/* array.every(function(currentValue, index, arr),thisValue);
currentValue 必需。当前元素
index 可选。当前元素的索引值
arr 可选。当前元素所属的数组对象
注意: every() 对于空数组，函数是不会执行的。
注意: every() 并没有改变数组的原始值。
*/
// 检测数组中所有元素是否都大于等于 18
var ages = [32, 33, 16, 40];
function checkAdult(age) {
    
    
    return age >= 18;
}
console.log(ages.every(checkAdult));

/* array.some(function(currentValue, index, arr),thisValue);
currentValue 必需。当前元素
index 可选。当前元素的索引值
arr 可选。当前元素所属的数组对象
注意: some() 对于空数组，函数是不会执行的。
注意: some() 并没有改变数组的原始值。
*/
// 检测数组中是否有元素大于 18
var ages = [3, 10, 18, 20];
function checkAdult(age) {
    
    
    return age >= 18;
}
console.log(ages.some(checkAdult));

/* array.forEach(function(currentValue, index, arr), thisValue);
currentValue 必需。当前元素
index 可选。当前元素的索引值
arr 可选。当前元素所属的数组对象
注意: forEach() 对于空数组，函数是不会执行的。
注意: forEach() 并没有改变数组的原始值。
*/
// 获取数组中所有值的总和
var sum = 0;
var numbers = [65, 44, 12, 4];
numbers.forEach(function (item) {
    
    
    sum += item;
});
console.log(sum);

/* array.map(function(currentValue,index,arr), thisValue);
currentValue 必需。当前元素
index 可选。当前元素的索引值
arr 可选。当前元素所属的数组对象
注意: map() 对于空数组，函数是不会执行的。
注意: map() 并没有改变数组的原始值。
*/
var arr = ['a', 'b', 'c'];
arr.map(function(value, index) {
    
    
    console.log(value, index);
});

/* array.reduce(function(total, currentValue, currentIndex, arr), initialValue);
total 必需。初始值, 或者计算结束后的返回值。
currentValue 必需。当前元素
currentIndex 可选。当前元素的索引
arr 可选。当前元素所属的数组对象
initialValue 可选。传递给函数的初始值
reduce() 对于空数组是不会执行回调函数的。
*/
var numbers = [65, 44, 12, 4];
function getSum(total, num) {
    
    
    return total + num;
}
console.log(numbers.reduce(getSum));

/* array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue);
total 必需。初始值, 或者计算结束后的返回值。
currentValue 必需。当前元素
currentIndex 可选。当前元素的索引
arr 可选。当前元素所属的数组对象
initialValue 可选。传递给函数的初始值
reduce() 对于空数组是不会执行回调函数的。
*/
var numbers = [65, 44, 12, 4];
function getSum(total, num) {
    
    
    return total + num;
}
console.log(numbers.reduceRight(getSum));

• Параметры: Параметр карты() — это функция обратного вызова fn. Первый параметр fn представляет элемент текущего массива. Второй параметр fn представляет индекс индекса соответствующего элемента.
• Возвращаемое значение: возвращаемые значения после каждого выполнения функции обратного вызова будут объединены для формирования нового массива.
• Результат: вы можете последовательно увидеть «a 0», «b 1» и «c 2» на консоли.

// 利用 map() 方法实现二维数组的转置
var arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];  // 待转置的数组
var reverse = arr[1].map(function (col, i) {
    
      // 利用i获取转置后数组元素的下标
    return arr.map(function (row) {
    
    	          // 返回转置后新组合而成的数组元素
        return row[i];			              // 返回转置前数组元素的指定索引的元素
    });
});
console.log(reverse);

4 Вложение и рекурсия

4.1 Вложенность функций и цепочка областей действия

Вложенная функция — это объявление функции внутри другой функции.

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

var i = 10;

function fn1() {
    
    
    fn2();
}

function fn2() {
    
    
    console.log(i);
}

fn1();

4.2 Рекурсивные вызовы

Рекурсивные вызовы — это особый тип вызовов вложенных функций. Это относится к процессу вызова функции внутри тела функции.Этот тип функции называется рекурсивной функцией.

Простое понимание: функция вызывает сама себя. Эта функция является рекурсивной.

function factorial(n){
    
    
    if(n==1){
    
    
        return 1;
    }
    return n*factorial(n-1);
}
console.log(factorial(4));

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

Поскольку рекурсия подвержена ошибкам «переполнения стека», необходимо добавить возврат условия выхода.

4.3 Практические задания

• Найдите значение N-го члена последовательности Фибоначчи.
  • Последовательность Фибоначчи также называют последовательностью золотого сечения, например «1, 1, 2, 3, 5, 8, 13, 21...».
  • Эта последовательность начинается с пункта 3, и каждый пункт равен сумме двух предыдущих пунктов.
  • Принцип реализации кода:
    • Если оно меньше 0, будет выдано сообщение об ошибке.
    • Равно 0, вернуть 0.
    • Равно 1, возвращает 1.
    • Если оно больше 1, то это можно реализовать по найденным правилам и с помощью рекурсивных вызовов функций.

5 функция закрытия

5.1 Что такое функция замыкания?

В JavaScript встроенная функция может получить доступ ко всем переменным и функциям, определенным во внешней функции, включая все переменные и функции, доступные ее внешней функции. Однако внутренние переменные и вложенные функции функции недоступны вне функции. На этом этапе вы можете использовать «закрытие», чтобы добиться этого.

Так называемое «замыкание» относится к функции, которая имеет право доступа к переменным (локальным переменным) в области видимости другой функции. Его основные применения заключаются в следующих двух моментах:

• Переменные внутри функции можно читать вне функции.
• Значение переменной всегда можно сохранить в памяти.

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

5.2 Реализация функции закрытия

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

// 闭包（closure）指有权访问另一个函数作用域中变量的函数。
// 一个作用域可以访问另外一个函数的局部变量 
// 我们 fn 外面的作用域可以访问 fn 内部的局部变量
// 闭包的主要作用: 延伸了变量的作用范围
function fn() {
    
    
    var num = 10;
    return function() {
    
    
        console.log(num);
    }
}
var f = fn();
f();

Нажмите li, чтобы вывести порядковый номер.

<body>
    <ul class="nav">
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>大猪蹄子</li>
    </ul>
    <script>
        var lis = document.querySelector('.nav').querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
      
      
            lis[i].index = i;
            lis[i].onclick = function() {
      
      
                // console.log(i);
                console.log(this.index);

            }
        }
        // 2. 利用闭包的方式得到当前小li 的索引号
        for (var i = 0; i < lis.length; i++) {
      
      
            // 利用for循环创建了4个立即执行函数
            // 立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这变量
            (function(i) {
      
      
                // console.log(i);
                lis[i].onclick = function() {
      
      
                    console.log(i);
                }
            })(i);
        }
    </script>
</body>

6 практических заданий

• Используйте функции для сортировки от меньшего к большему
  • Учитывая набор данных, требуется отсортировать их от меньшего к большему.
• Функция нахождения факториала
  • Учитывая число, вы можете напрямую использовать функцию, чтобы найти результат вычисления факториала и сумму факториальных функций.
• Определите, является ли этот год високосным
  • Пользователь вводит год и использует функцию, чтобы определить, является ли введенный год високосным или обычным годом.
• Функции для вычисления площади и окружности круга
  • Определите функции периметра и площади и используйте программу для расчета площади и окружности круга.
• Поменяйте местами два целых числа друг с другом
• Нажмите, чтобы добавить стиль границы к окну
• веб-калькулятор
  • Напишите HTML-страницу, два текстовых поля используются для ввода данных, 4 кнопки используются для выполнения операций сложения, вычитания, умножения и деления, а последнее текстовое поле отображает результаты вычислений.
  • Напишите функцию Calc() для получения и преобразования входных данных, определения того, являются ли они недопустимыми, выдайте подсказку и вызовите указанную функцию для завершения соответствующих вычислений.
    ) { // Используйте цикл for для создания 4 функций немедленного выполнения // Функции немедленного выполнения также становятся небольшими замыканиями, поскольку любая функция в функции немедленного выполнения может использовать свою переменную i (function(i) { // console .log(i); lis[i].onclick = function() { console.log(i); } })(i); }
    
    
    
    
    
    
    
    
    
    

```

6 практических заданий

• Используйте функции для сортировки от меньшего к большему
  • Учитывая набор данных, требуется отсортировать их от меньшего к большему.
• Функция нахождения факториала
  • Учитывая число, вы можете напрямую использовать функцию, чтобы найти результат вычисления факториала и сумму факториальных функций.
• Определите, является ли этот год високосным
  • Пользователь вводит год и использует функцию, чтобы определить, является ли введенный год високосным или обычным годом.
• Функции для вычисления площади и окружности круга
  • Определите функции периметра и площади и используйте программу для расчета площади и окружности круга.
• Поменяйте местами два целых числа друг с другом
• Нажмите, чтобы добавить стиль границы к окну
• веб-калькулятор
  • Напишите HTML-страницу, два текстовых поля используются для ввода данных, 4 кнопки используются для выполнения операций сложения, вычитания, умножения и деления, а последнее текстовое поле отображает результаты вычислений.
  • Напишите функцию Calc() для получения и преобразования входных данных, определения того, являются ли они недопустимыми, выдайте подсказку и вызовите указанную функцию для завершения соответствующих вычислений.
  • Напишите функции для реализации операций сложения, вычитания, умножения и деления.