Часть 1

Введение:

JavaScript — это язык программирования высокого уровня, созданный в 1995 году Бренданом Эйхом для веб-разработки. С тех пор он превратился в универсальный язык, используемый для разработки веб-приложений, серверной части и мобильных приложений. JavaScript был стандартизирован ECMA International в 1997 году как ECMAScript и выпущен в 2015 году с новыми функциями, такими как стрелочные функции, литералы шаблонов, деструктуризация и оператор расширения.

Обзор ES6:

ES6 (ECMAScript 2015) — это версия JavaScript, выпущенная в 2015 году. Она включает в себя новые функции, такие как стрелочные функции, литералы шаблонов, деструктурирование, оператор распространения, классы, модули, let и const, параметры по умолчанию, карту и набор объектов, промисы. , генераторы, async/await и усовершенствования литерала объекта, чтобы сделать кодирование проще, эффективнее и удобнее в сопровождении.

Новые функции в ES6:

  1. Стрелочные функции. Стрелочные функции — это сокращение для написания анонимных функций в JavaScript. Она также известна как функция «толстая стрелка» и обозначается оператором «=›».
(param1, param2, ...) => { function body }

or

param => expression // For single expression

Случаи использования и преимущества:

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

Сравнение с обычными функциями:

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

Пример:

// Traditional function
function multiply(a, b) {
  return a * b;
}

// Arrow function equivalent
const multiply = (a, b) => a * b;

2. Объяснение let и const:

  • let и const используются для объявления переменных.
  • Переменным, объявленным let, можно присвоить новое значение.
  • Переменные, объявленные с помощью const, не могут быть переназначены.

Сравнение с var:

  • var — это старый способ объявления переменных в JavaScript.
  • var имеет область действия функции, а let/const имеет область действия блока.

Преимущества использования let и const по сравнению с var:

  • Лучшее понимание области видимости переменных.
  • Предотвращает непреднамеренное изменение переменных.
  • Предотвращает подъем переменной.

Случаи использования let:

  • Когда вы хотите переназначить значение переменной.

Случаи использования const:

  • Когда вы хотите объявить постоянное значение, которое нельзя изменить.

Пример:

const name = "John Doe";
console.log(name); // Output: "John Doe"

let age = 30;
console.log(age); // Output: 30

3. Деструктуризация. Деструктуризация в JavaScript означает распаковку значений из массивов или объектов в отдельные переменные.

Деструктуризация массива:

  • Синтаксис: const [var1, var2, ...varX] = array;
  • Присваивает переменным соответствующие значения в массиве.

Деструктуризация объекта:

  • Синтаксис: const {var1, var2, ...varX} = object;
  • Назначает переменные соответствующим свойствам объекта.

Преимущества деструктуризации:

  • Лаконичный и читаемый код
  • Простой доступ к значениям объекта/массива
  • Улучшенная организация кода

Случаи использования для деструктуризации:

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

Пример:

const numbers = [1, 2];
const [one, two, three = 3] = numbers;
console.log(one, two, three); // Output: 1 2 3

const person = {
  name: "John Doe",
  age: 30
};
const { name: fullName, age } = person;
console.log(fullName, age); // Output: "John Doe" 30

const { name, ...otherProps } = person;
console.log(name, otherProps); // Output: "John Doe" { age: 30 }

4. Оператор распространения:оператор распространения в JavaScript представлен тремя точками (...) и используется для распространения элементов массива или свойств объекта в новый массив или объект.

Синтаксис:

  • Оператор расширения массива: const newArray = [...oldArray]
  • Оператор распространения объекта: const newObject = {...oldObject}

Случаи использования и преимущества:

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

Примеры:

  1. Копирование массива:
const oldArray = [1, 2, 3];
const newArray = [...oldArray];
console.log(newArray); // Output: [1, 2, 3]

2. Объединение объектов:

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const newObject = { ...obj1, ...obj2 };
console.log(newObject); // Output: { a: 1, b: 2, c: 3, d: 4 }

3. Использование внутрифункциональных вызовов:

const numbers = [1, 2, 3];
console.log(Math.max(...numbers)); // Output: 3

Я закончил часть 1 и перейду к части 2 в следующей истории.

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

Спасибо за прочтение. Удачного обучения 😄

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.