JavaScript - ECMAScript 2019: руковод Beginner's Guide

Привет, будущие суперзвезды кодирования! Я рад быть вашим проводником в этом захватывающем путешествии в мир ECMAScript 2019. Как кто-то, кто teaches программирование уже много лет, я не могу дождаться, чтобы поделиться чудесами этого языка с вами. Так что возьмите свои виртуальные блокноты и погружайтесь с нами!

Введение в ECMAScript 2019

Before мы начнем, давайте быстро поговорим о том, что такое ECMAScript. Представьте JavaScript как вкусный торт, а ECMAScript как рецепт. Каждый год рецепт немного улучшается и улучшается, и 2019 год не был исключением. ECMAScript 2019 принес нам несколько новых интересных функций, которые сделали наш JavaScript торт еще более аппетитным!

Новые функции, добавленные в ECMAScript 2019

ECMAScript 2019 introduced несколько захватывающих функций, которые упрощают нашу жизнь программистов. Давайте рассмотрим их по одному, не так ли?

Метод JavaScript Array flat()

Вы когда-нибудь имели беспорядочную комнату с коробками в коробках? Это kinda как вложенные массивы в JavaScript. Метод flat() похож на магического робота-уборщика, который открывает все эти коробки и кладет все в один аккуратный слой.

Давайте посмотрим, как это работает:

const messyRoom = [1, 2, [3, 4, [5, 6]]];
const tidyRoom = messyRoom.flat(2);
console.log(tidyRoom); // Вывод: [1, 2, 3, 4, 5, 6]

В этом примере messyRoom - это наш вложенный массив. Метод flat(2) уходит на два уровня глубины, чтобы разровнять массив. Результат - tidyRoom, где все числа находятся на одном уровне. Круто, правда?

Метод JavaScript Array flatMap()

Представьте, что наш уборочный робот мог бы не только убирать, но и transform предметы по ходу дела. Вот что делает flatMap()! Это как map() и flat() создали super-powered ребенка.

Вот забавный пример:

const pets = ["dog", "cat", "fish"];
const petSounds = pets.flatMap(pet => {
if (pet === "dog") return ["woof", "bark"];
if (pet === "cat") return ["meow"];
return [];
});
console.log(petSounds); // Вывод: ["woof", "bark", "meow"]

В этом коде мы берем наш массив pets и создаем новый массив с их звуками. Обратите внимание, как у собаки два звука, но они заканчиваются в одном плоском массиве. Poor fish, though - они слишком тишины, чтобы попасть в список!

Исправленный метод Array sort()

Метод sort() получил slight обновление в ECMAScript 2019. Теперь он гарантирует, что массивы будут отсортированы стабильным образом. Что это значит? Ну, если два элемента считаются равными по функции сортировки, они сохранят свой исходный порядок relative друг к другу.

Давайте посмотрим на пример:

const students = [
{name: "Alice", grade: "B"},
{name: "Bob", grade: "A"},
{name: "Charlie", grade: "B"},
{name: "David", grade: "A"}
];

students.sort((a, b) => a.grade.localeCompare(b.grade));
console.log(students);
/* Вывод:
[
{name: "Bob", grade: "A"},
{name: "David", grade: "A"},
{name: "Alice", grade: "B"},
{name: "Charlie", grade: "B"}
]
*/

В этом примере мы сортируем студентов по их оценкам. Обратите внимание, как Bob и David (обе оценки A) сохраняют свой исходный порядок, так же как и Alice и Charlie (обе оценки B). Эта стабильная сортировка может быть crucial во многих приложениях!

Метод JavaScript Object fromEntries

Вы когда-нибудь wished, чтобы вы могли превратить кучу ключ-значений в объект? Теперь вы можете с Object.fromEntries()! Это как магия, но лучше, потому что это JavaScript.

Посмотрите это:

const entries = [
['name', 'Alice'],
['age', 25],
['city', 'Wonderland']
];

const person = Object.fromEntries(entries);
console.log(person);
// Вывод: { name: 'Alice', age: 25, city: 'Wonderland' }

В этом примере мы начинаем с массива ключ-значений. Object.fromEntries() transform этот массив в объект, где каждая пара становится свойством. Это相反 Object.entries(), который у нас был уже давно.

Опциональная привязка catch

Обработка ошибок стала немного smoother с опциональной привязкой catch. Раньше нам всегда приходилось указывать параметр ошибки в是我们的 catch предложении, даже если мы его не использовали. Теперь мы можем опустить его, если нам не нужно.

Вот как это выглядит:

// До ECMAScript 2019
try {
// Some code that might throw an error
} catch (error) {
console.log("An error occurred");
}

// С ECMAScript 2019
try {
// Some code that might throw an error
} catch {
console.log("An error occurred");
}

См. как мы удалили часть (error) во втором примере? Это и есть опциональная привязка catch в действии. Это небольшое изменение, но оно может сделать наш код чище, когда нам не нужно использовать объект ошибки.

Исправленный метод JSON.stringify()

JSON.stringify() стал немного умнее в ECMAScript 2019. Он теперь лучше обрабатывает некоторые Unicode символы, обеспечивая, чтобы наш JSON оставался valid.

Вот пример:

const obj = { name: "Pikachu\uD800" };
console.log(JSON.stringify(obj));
// Вывод: {"name":"Pikachu�"}

В этом случае \uD800 - это непарный суррогат, который мог вызвать проблемы в некоторых JSON парсерах. Новый JSON.stringify() заменяет его Unicode замещающим символом (�), чтобы сохранить valid JSON.

Исправленный метод Function toString()

Метод toString() для функций теперь возвращает точный исходный код функции, включая любое пробелы и комментарии. Это как получить perfect fotocopy вашей функции!

Давайте посмотрим, как это работает:

function greet(name) {
// Это функция приветствия
console.log(`Hello, ${name}!`);
}

console.log(greet.toString());
/* Вывод:
function greet(name) {
// This is a greeting function
console.log(`Hello, ${name}!`);
}
*/

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

Разделители символов разрешены в строковых литералах

ECMAScript 2019 принес small, но полезное изменение: вы можете использовать U+2028 (лиnea разделитель) и U+2029 (абзац разделитель) в строковых литералах без их экранирования.

Вот пример:

const text = "Line 1 separator→\u2028←Line 2";
console.log(text);
// Вывод:
// Line 1
// Line 2

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

Методы JavaScript String trimStart() и trimEnd()

Last but not least, у нас появились два новых строковых метода: trimStart() и trimEnd(). Это как trim(), но они удаляют пробелы только с одной стороны строки.

Давайте посмотрим, как они работают:

const messy = "   Hello, World!   ";
console.log(messy.trimStart()); // Вывод: "Hello, World!   "
console.log(messy.trimEnd());   // Вывод: "   Hello, World!"
console.log(messy.trim());      // Вывод: "Hello, World!"

Эти методы великолепны, когда вы хотите почистить одну сторону вашей строки. Они являются alias для старых методов trimLeft() и trimRight(), но с именами, которые более清楚地 описывают, что они делают.

Заключение

И вот оно, folks! Мы прошли через захватывающие новые функции ECMAScript 2019. От выравнивания массивов до уборки строк, эти добавления делают наш JavaScript более мощным и легким в использовании.

Remember, лучший способ учиться - это делать. Идите вперед и экспериментируйте с этими новыми функциями в вашем собственном коде. Не бойтесь犯 mistakes - это как мы учимся и grow как программисты.

Счастливого кодирования, и пусть ваши JavaScript приключения будут свободны от ошибок и наполнены joy!

Credits: Image by storyset