Освойте несколько форм параметров в функциях JS (основы функций)

JavaScript ECMAScript 6

Автор: Дмитрий Павлютин Переводчик: Front-end Xiaozhi Источник: дмитрипавлутин

Ставь лайк и смотри, поиск в WeChat【Переезд в мир】Обратите внимание на этого человека, который не имеет большого фабричного прошлого, но имеет восходящий и позитивный настрой. эта статьяGitHub GitHub.com/QQ449245884…Он был включен, статьи были классифицированы, и многие мои документы и учебные материалы были систематизированы.

Все говорили, что нет проекта для написания резюме, поэтому я помог вам найти проект, и это было с бонусом.【Учебник по строительству】.

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

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

1. Параметры функции

Функции JS могут иметь любое количество аргументов. Давайте определим0,1а также2функция с параметрами.

// 0 个参数
function zero() {
  return 0;
}

// 1 个参数
function identity(param) {
  return param;
}

// 2 个参数
function sum(param1, param2) {
  return param1 + param2;
}

zero();      // => 0
identity(1); // => 1
sum(1, 2);   // => 3

над3Количество параметров, передаваемых при вызове функции, совпадает с количеством параметров в определении функции. Конечно, когда количество входящих параметров меньше, чем количество заданных параметров, JS позволяет нам это сделать, об ошибке не будет сообщено, а если она отсутствует, она будет использованаundefinedзаменять.

Например, мы вызываем функцию с одним аргументомsum()(имеет два параметра)

function sum(param1, param2) {
  console.log(param1); // 1
  console.log(param2); // undefined
  return param1 + param2;
}

sum(1); // => NaN

Функция вызывается только с одним аргументом:sum(1). такparam1Значение1, а второй параметрparam2буду использоватьundefinedИнициализация.

param1 + param2ценность1 + undefined, результатNaN.

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

function sum(param1, param2) {
  if (param2 === undefined) {
    param2 = 0;
  }
  return param1 + param2;
}

sum(1); // => 1

Конечно, есть лучший способ — использовать параметры по умолчанию, давайте посмотрим.

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

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

Затем используйте функцию параметра по умолчанию ES6, чтобыparam2По умолчанию0.

function sum(param1, param2 = 0) {
  console.log(param2); // => 0
  return param1 + param2;
}

sum(1);            // => 1
sum(1, undefined); // => 1

Теперь, если нет передаваемого параметра,param2По умолчанию это 0 .

Уведомление, еслиundefinedустановить вторым параметромsum(1, undefined),param2также будет инициализирован как0.

3. Параметры деструктуризации

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

function greet({ name }) {
  return `Hello, ${name}!`;
}

const person = { name: '前端小智' };
greet(person); // => 'Hello, 前端小智!'

{ name }параметр, применяемый к деструктуризации объекта.

Конечно, вы также можете комбинироватьпараметры по умолчанию:

function greetWithDefault({ name = '无名氏' } = {}) {
  return `Hello, ${name}!`;
}

greetWithDefault(); // => 'Hello, 无名氏!'

{name = 'Unknown'} ={}По умолчанию пустой объект.

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

function greeFirstPerson([{ name }]) {
  return `Hello, ${name}!`;
}

const persons = [{ name: '王小智' }, { name: '王大治'}];
greeFirstPerson(persons); // => 'Hello, 王小智!'

[{name}]Деструктуризация более сложная, она извлекает первый элемент массива, а затем читает из объектаnameАтрибуты.

4. объект аргументов

Еще одна приятная особенность JS-функций — возможность вызывать одну и ту же функцию с вариативными аргументами. Это можно использоватьargumentsobject для получения всех переданных параметров.

argumentsОбъекты — это локальные переменные, доступные во всех (не стрелочных) функциях. вы можете использоватьargumentsОбъект ссылается на параметры функции в функции.

Например, чтобы суммировать аргументы функции:

function sumArgs() {
  console.log(arguments); // { 0: 5, 1: 6, length: 2 }
  let sum = 0;
  for (let i = 0; i < arguments.length; i++) {
    sum += arguments[i];
  }
  return sum;
}

sumArgs(5, 6); // => 11

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

Одна из проблем заключается в том, что каждая область видимости функции определяет свою собственнуюargumentsобъект. Следовательно, для доступа к области действия внешней функции может потребоваться дополнительная переменная.arguments:

function outerFunction() {
  const outerArguments = arguments;
  return function innerFunction() {
    // outFunction arguments
    outerArguments[0];
  };
}

4.1 Функция Стрелки

Есть особая ситуация: нет стрелочной W-функцииarguments.

const sumArgs = () => {
  console.log(arguments);
  return 0;
};

// throws: "Uncaught ReferenceError: arguments is not defined"
sumArgs();

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

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

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

По-старому, иди посмотри.

function sumArgs(...numbers) {
  console.log(numbers); // [5, 6]
  return numbers.reduce((sum, number) => sum + number);
}

sumArgs(5, 6); // => 11

...numbersЯвляетсяостальные параметры, это будет истинный массив оставшихся аргументов[5,6]. из-заnumbersэто массив, поэтому вы можете использовать собственные методы массиваreduce(в отличие от аргументов для массивоподобных объектов).

Если вы не хотите собирать все параметры в остальные параметры, вы можете объединитьОбщие параметрыа такжеостальные параметры.

function multiplyAndSumArgs(multiplier, ...numbers) {
  console.log(multiplier); // 2
  console.log(numbers);    // [5, 6]
  const sumArgs = numbers.reduce((sum, number) => sum + number);
  return multiplier * sumArgs;
}

multiplyAndSumArgs(2, 5, 6); // => 22

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

Разница между остальными параметрами и объектом аргументов

Между остальными параметрами и объектом arguments есть три основных отличия:

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

  • argumentsобъект не является реальным массивом, а остальные аргументы являются реальнымиArrayэкземпляр, что означает, что вы можете использовать все методы массива непосредственно на нем, напримерsort,map,forEachилиpop.

  • argumentsОбъекты также имеют некоторые дополнительные свойства (например,calleeАтрибуты).

6. Резюме

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

Значения по умолчанию можно легко установить при отсутствии параметров.

К параметрам можно применить все возможности деструктуризации JS. Можно даже комбинировать деструктурирование с параметрами по умолчанию.

arguments— это специальный массивоподобный объект, содержащий все параметры, используемые при вызове функции.

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

Ошибки, которые могут существовать после развертывания кода, не могут быть известны в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку журнала.Кстати, я рекомендую всем полезный инструмент мониторинга ошибок.Fundebug.

оригинал:Рисовое путешествие avlutin.com/JavaScript-…

общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.

Категории