JavaScript - ES6: руковод BEGINNERS Guide to Modern JavaScript

Привет, будущие маги JavaScript! Я рад быть вашим проводником в этом захватывающем путешествии в мир ES6, революционного обновления JavaScript, которое изменило способ написания кода. Как某人, кто преподавал программирование более десяти лет, я не могу дождаться, чтобы поделиться магией ES6 с вами. Так что возьмите свои жезлы (или клавиатуры) и погружайтесь с мной в это!

Новые добавленные функции в ES6

ES6, также известный как ECMAScript 2015, принес JavaScript кладезь новых функций. Это как если бы JavaScript пошел в школу супергероев и вернулся с целым новым набором способностей! Давайте рассмотрим эти суперсилы по одному.

JavaScript Стрелочные функции

Стрелочные функции - это как cool и модные дяди обычных функций. Они короче, изящнее и иногда даже мощнее. Давайте посмотрим на пример:

// Старый способ
function sayHello(name) {
return "Hello, " + name + "!";
}

// Способ со стрелочной функцией
const sayHello = (name) => `Hello, ${name}!`;

console.log(sayHello("Alice")); // Вывод: Hello, Alice!

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

Метод JavaScript Array find()

Метод find() - это как детектив для ваших массивов. Он ищет через массив и возвращает первый элемент, который проходит проверку. Вот как это работает:

const numbers = [1, 2, 3, 4, 5];
const firstEvenNumber = numbers.find(num => num % 2 === 0);

console.log(firstEvenNumber); // Вывод: 2

В этом случае наш метод find() ищет первый чётный номер. Он проверяет каждый номер, и как только находит такой, который divisible на 2 без остатка, он возвращает этот номер.

Метод JavaScript Array findIndex()

findIndex() - это cousin метода find(). Вместо того чтобы возвращать элемент, он возвращает индекс первого элемента, который проходит проверку. Давайте посмотрим, как это работает:

const fruits = ["apple", "banana", "cherry", "date"];
const indexOfLongFruit = fruits.findIndex(fruit => fruit.length > 5);

console.log(indexOfLongFruit); // Вывод: 1

Здесь мы ищем первый фрукт с более чем 5 буквами. "Banana" первым соответствует этому критерию, поэтому его индекс (1) возвращается.

Метод JavaScript Array from()

Array.from() - это как маг, который может превращать массивоподобные объекты или итерируемые в настоящие массивы. Это особенно полезно при работе с DOM элементами. Вот пример:

const name = "Alice";
const nameArray = Array.from(name);

console.log(nameArray); // Вывод: ["A", "l", "i", "c", "e"]

В этом случае мы превратили строку в массив отдельных символов. Pretty neat, не так ли?

Метод JavaScript Array keys()

Метод keys() возвращает Array Iterator объект с ключами массива. Это как VIP пропуск ко всем индексам вашего массива. Давайте посмотрим, как это работает:

const fruits = ["apple", "banana", "cherry"];
const keys = fruits.keys();

for (let key of keys) {
console.log(key);
}
// Вывод:
// 0
// 1
// 2

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

Классы JavaScript

Классы в ES6 принесли объектно-ориентированное программирование в JavaScript в более интуитивно понятной форме. Они как чертежи для создания объектов. Давайте создадим простой класс:

class Dog {
constructor(name) {
this.name = name;
}

bark() {
return `${this.name} says woof!`;
}
}

const myDog = new Dog("Buddy");
console.log(myDog.bark()); // Вывод: Buddy says woof!

В этом примере мы создали класс Dog с конструктором и методом. Затем мы можем создавать новые объекты Dog с помощью этого класса.

Ключевое слово JavaScript const

Ключевое слово const - это как сейф для ваших переменных. Once вы поместили значение внутрь, оно надежно заперто и не может быть изменено. Это идеально для значений, которые не должны быть пер reassigned. Вот как это работает:

const PI = 3.14159;
// PI = 3; // Это вызвать бы ошибку

console.log(PI); // Вывод: 3.14159

В этом примере мы объявили PI как константу. Если бы мы попытались его перезаписать, JavaScript бы выдал ошибку.

Ключевое слово JavaScript let

let - это как более ответственный sibling var. Он предоставляет блок-область действия, что может помочь избежать многих распространенных ошибок программирования. Вот пример:

let x = 1;

if (true) {
let x = 2; // Это другая 'x'
console.log(x); // Вывод: 2
}

console.log(x); // Вывод: 1

В этом случае переменная x внутри блока if - это другая переменная, отличная от x снаружи, благодаря блок-области действия let.

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

Параметры по умолчанию - это как safety nets для ваших функций. Они предоставляют значения по умолчанию для параметров, если аргументы не переданы. Давайте посмотрим, как они работают:

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

console.log(greet()); // Вывод: Hello, Guest!
console.log(greet("Alice")); // Вывод: Hello, Alice!

В этом примере, если мы не предоставляем имя, функция использует "Guest" как значение по умолчанию.

Цикл JavaScript for...of

Цикл for...of - это новый, более краткий способ итерации по итерируемым объектам, таким как массивы. Это как экскурсия по вашим данным. Вот как это работает:

const fruits = ["apple", "banana", "cherry"];

for (let fruit of fruits) {
console.log(fruit);
}
// Вывод:
// apple
// banana
// cherry

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

Параметр rest в JavaScript

Параметр rest - это как сеть, которая ловит все дополнительные аргументы, переданные функции. Он представлен тремя точками (...) после имени. Вот пример:

function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // Вывод: 10

В этом случае ...numbers ловит все аргументы и преобразует их в массив, который мы затем суммируем.

Модули JavaScript

Модули в ES6 - это как LEGO блоки для вашего кода. Они позволяют вам.split ваш код на отдельные файлы и import/export функциональность по мере необходимости. Вот простой пример:

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// main.js
import { add, subtract } from './math.js';

console.log(add(5, 3)); // Вывод: 8
console.log(subtract(5, 3)); // Вывод: 2

Этот модульный подход помогает поддерживать ваш код организованным и повторно используемым.

Объекты Map JavaScript

Объекты Map - это как super-powered объекты. Они позволяют ключи любого типа и поддерживают порядок записей. Вот как они работают:

const myMap = new Map();

myMap.set('name', 'Alice');
myMap.set(1, 'number one');

console.log(myMap.get('name')); // Вывод: Alice
console.log(myMap.get(1)); // Вывод: number one

Map особенно полезны, когда вам нужно связать дополнительные данные с объектом.

Новые глобальные методы

ES6 ввел несколько новых глобальных методов. Давайте посмотрим на один из них: isFinite().

console.log(Number.isFinite(10)); // Вывод: true
console.log(Number.isFinite(Infinity)); // Вывод: false
console.log(Number.isFinite("10")); // Вывод: false

Этот метод проверяет, является ли значение конечным числом, возвращая true или false.

Новые методы JavaScript Math

ES6 также принес новые математические методы. Один из них - Math.trunc(), который удаляет десятичную часть числа:

console.log(Math.trunc(4.9)); // Вывод: 4
console.log(Math.trunc(-4.2)); // Вывод: -4

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

Новые методы JavaScript Number

Новые методы также были введены для Number. Давайте посмотрим на Number.isInteger():

console.log(Number.isInteger(10)); // Вывод: true
console.log(Number.isInteger(10.5)); // Вывод: false

Этот метод проверяет, является ли значение целым числом.

Новые свойства JavaScript Number

ES6 добавил новые свойства для Number. Вот пример с Number.EPSILON:

console.log(Number.EPSILON); // Вывод: 2.220446049250313e-16

EPSILON представляет собой наименьший интервал между двумя представляемыми числами.

JavaScript Promises

Promises - это как IOUs в JavaScript. Они представляют собой значение, которое может быть недоступно в настоящее время, но будет доступно в будущем. Вот простой пример:

const myPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Success!");
}, 1000);
});

myPromise.then(result => console.log(result)); // Вывод через 1 секунду: Success!

Promises жизненно важны для обработки асинхронных операций в JavaScript.

JavaScript Set Objects

Объекты Set - это как массивы, но без дубликатов. Они представляют собой коллекцию уникальных значений. Вот как они работают:

const mySet = new Set([1, 2, 3, 3, 4]);

console.log(mySet); // Вывод: Set(4) {1, 2, 3, 4}

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

Новые методы JavaScript String

ES6 ввел несколько новых методов для String. Давайте посмотрим на startsWith():

const str = "Hello, world!";

console.log(str.startsWith("Hello")); // Вывод: true
console.log(str.startsWith("world")); // Вывод: false

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

JavaScript Symbol

Symbol - это новый примитивный тип в ES6. Они уникальны и неизменны, часто используются в качестве ключей свойств. Вот пример:

const mySymbol = Symbol("mySymbol");
const obj = {
[mySymbol]: "Hello, Symbol!"
};

console.log(obj[mySymbol]); // Вывод: Hello, Symbol!

Symbol полезны для создания нестроковых ключей свойств в объектах.

JavaScript Spread Operator

Spread operator (...) это как magic wand, который может распространять массив на отдельные элементы. Он очень универсален. Вот пример:

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];

console.log(arr2); // Вывод: [1, 2, 3, 4, 5]

Spread operator распространил arr1 на отдельные элементы в arr2.

Заключение

Уф! Мы covered много ground, не так ли? ES6 принес JavaScript так много захватывающих функций, и мы только поцарапали surface. Помните, ключ к овладению этими концепциями - это практика. Так что идите и кодируйте! Экспериментируйте с новыми функциями, ломайте вещи, чините их и получайте удовольствие от процесса. Before вы знаете это, вы будете писать modern JavaScript как pro!

Вот таблица, резюмирующая все методы, о которых мы говорили:

Метод	Описание
Arrow Functions	Краткая запись для функциональных выражений
Array.find()	Возвращает значение первого элемента в массиве, который удовлетворяет заданному тесту
Array.findIndex()	Возвращает индекс первого элемента в массиве, который удовлетворяет заданному тесту
Array.from()	Создает новый массив из массивоподобного или итерируемого объекта
Array.keys()	Возвращает новый Array Iterator объект с ключами массива
Class	Шаблон для создания объектов, предоставляющий более чистый синтаксис для объектно-ориентированного программирования
const	Объявляет блок-ограниченную, неизменную константу
let	Объявляет блок-ограниченную, локальную переменную
Default Parameters	Позволяют�始化 named параметры значениями по умолчанию, если аргументы не переданы
for...of	Создает цикл итерации по итерируемым объектам
Rest Parameter	Позволяет функции принимать неопределенное количество аргументов в виде массива
Modules	Позволяют.split ваш код на отдельные файлы и import/export функциональность по мере необходимости
Map	Коллекция ключевых данных элементов, аналогичная объекту, но позволяет ключи любого типа
Number.isFinite()	Определяет, является ли переданное значение конечным числом
Math.trunc()	Удаляет десятичную часть числа
Number.isInteger()	Определяет, является ли переданное значение целым числом
Promise	Представляет собой значение, которое может быть недоступно в настоящее время, но будет доступно в будущем
Set	Коллекция уникальных значений
String.startsWith()	Проверяет, начинается ли строка с указанных символов
Symbol	Уникальный и неизменный примитивный тип
Spread Operator	Позволяет распространять массив на отдельные элементы

Счастливого кодирования и пусть ES6 будет с вами!

Credits: Image by storyset