14.06.2024 в 12:17

ES15: Новые функции JavaScript в 2024 году

JavaScript один из широко используемых языков программирования в мире и претерпел значительную эволюцию. Мы предоставим информацию о некоторых основных функциях ES15 / ECMAScript 2024 / ECMA2024, новой версии стандарта ECMAScript. Давайте поговорим о интересных функциях, которые могут упростить ваш рабочий процесс и улучшить ваш код.

Примечание: ES15 или ECMA2024 все еще находятся в стадии разработки.

В этой статье мы рассмотрим некоторые ключевые функции, которые могут быть внедрены в ES15:

1. Правильно сформированные строки Unicode

Эта функция направлена на улучшение того, как JavaScript обрабатывает строки в Юникоде.

const str1 = "Bhaiya-G-Smile\uD83D\uDE00";
const str2 = "No\uDC00Smile";

console.log(str1.toWellFormed());
// "Bhaiya-G-Smile😀"
console.log(str2.toWellFormed());
// "No�Smile"

2. Удалена ошибка URIError из-за неправильной строки Юникода

const invalidURL= "https://www.website.com/query=\uDC00data";

encodeURI(invalidURL.toWellFormed()); // Expected output: "https://yourfuse.com/query=%EF%BF%BDdata"

encodeURI(invalidURL); // Expected: URIError: URI malformed

Переменная invalidURL содержит URL-адрес с единственным завершающим суррогатом (\uDC00)..
Попытка закодировать этот URL с помощью encodeURI() приводит к ошибке URIError из-за неправильно сформированной строки в Юникоде.
При применении функции toWellFormed() единственный заменяющий символ заменяется символом замены в Юникоде (U+FFFD, закодированным как %EF%BF%BD), что позволяет encodeURI() обработать его без ошибок.

3. Оператор Pipeline

Конвейерный оператор (|>) улучшает читаемость кода при многократных вызовах функций.

Оператор pipeline упрощает сложные манипуляции с данными, позволяя применять ряд функций в понятной и сжатой форме.

// Without pipeline operator
const withOutPipelineoperator = Math.ceil(Math.pow(Math.max(0, -10), 1/3));

// With pipeline operator
const withPipelineoperator = -10
  |> (n => Math.max(0, n)) // Replacing Math.max
  |> (n => Math.pow(n, 1/3)) // Replacing Math.pow
  |> Math.ceil; // Using Math.ceil

const numbers = [10, 20, 30, 40, 50];

const processedNumbers = numbers
  |> (_ => _.map(n => n / 2)) // Halving each number
  |> (_ => _.filter(n => n > 10)); // Filtering out numbers less than or equal to 10
console.log(processedNumbers); // [15, 20, 25]

4. Записи и кортежи

4.1 Записи

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

// Creating an immutable record
const user = #{
  name: "Avyukt",
  age: 39,
  friends: #["chiku", "mudit"]
};

const updatedUser = user.with({ age: 40});

console.log(updatedUser); 
// #{ username: "Avyukt", age: 40, friends: #["chiku", "mudit"] }

console.log(user);        
// #{ username: "Avyukt", age: 39, friends: #["chiku", "mudit"] } (No Change)

4.2 Кортежи

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

// Creating an immutable tuple 
const users = #['Avyukt', 'Bunny']

const newUsers = users.with(1, 'Reyansh');
console.log(newUsers);  // #['Avyukt', 'Reyansh']
console.log(users);     // #['Avyukt', 'Bunny'] (No change)

5. Элементарный waitSync

Эта операция работает только с Int32Array или BigInt64Array, который просматривает SharedArrayBuffer.

const sab = new SharedArrayBuffer(1024);
const int32 = new Int32Array(sab);

Поток чтения спит и ожидает местоположения 0, которым, как ожидается, будет Avyukt. result.value будет обещанием (promise).

const result = Atomics.waitAsync(int32, 0, "Avyukt", 1000);
// { async: true, value: Promise {<pending>} }

В потоке чтения или в другом потоке вызывается ячейка памяти 0, и обещание может быть выполнено с помощью "ok".

Atomics.notify(int32, 0);
// { async: true, value: Promise {<fulfilled>: 'ok'} }

6. Декораторы

С помощью декораторов можно изменять или дополнять поведение классов, методов, свойств или параметров.

Они особенно полезны для добавления метаданных, ведения журнала или изменения поведения в декларативной форме:

// Applying a decorator to track the execution of a method
class SampleClass {
  @trackExecution
  performAction(parameter1, parameter2) {
    // Method implementation goes here
  }
}

В этом примере:

SampleClass — это определяемый класс.
@trackExecution — декоратор, используемый для регистрации или отслеживания вызовов метода PerformAction.
performAction — это метод внутри SampleClass, который принимает два параметра (parameter1 и parameter2). Декоратор будет регистрировать или отслеживать каждый вызов этого метода.

7. Temporal

Temporal - это современный и всеобъемлющий API для определения даты и времени, разработанный для устранения ограничений и сложностей существующего объекта Date.

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

// Getting the current instant in UTC format.  
Temporal.Now.instant().toString()

// Getting the current zoned date-time in a specific timezone 
Temporal.Now.zonedDateTimeISO('Asia/Shanghai').toString()

// Getting the current plain date-time in ISO format 
Temporal.Now.plainDateTimeISO().toString()

// Getting the current plain time in ISO format 
Temporal.Now.plainTimeISO().toString().

Свойства ZonedDateTime.prototype

Класс ZonedDateTime в Temporal имеет несколько свойств и методов, которые позволяют детально обрабатывать и извлекать информацию о дате и времени.

К ним относятся средства получения данных о календаре, часовом поясе, году, месяце, дне, часе, минуте, секунде и даже наносекундах.
Он также включает такие методы, как .with(), .add(), .subtract(), .until(), .since() и .round(), предоставляющие обширную функциональность для работы с зонированными значениями даты и времени.

Простые классы времени в Temporal

Temporal представляет «простые» классы, которые представляют собой абстрактное представление времени без часового пояса.

Эти классы включают PlainDateTime, PlainDate и PlainTime.
Они полезны для отображения времени на настенных часах в заданном часовом поясе или для расчетов времени, когда часовой пояс не имеет значения, например, для определения первого вторника июня 1984 года.

8. Эргономичная проверка фирменного стиля

Упрощает проверку типа объекта в пользовательских классах и структурах данных, делая проверку типов более интуитивно понятной и менее подверженной ошибкам.

Традиционный метод (до ES2024)

class Book {
    #author;
    constructor(author) {
        this.#author = author;
    }
    static hasAuthorField(obj) {
        try {
            obj.#author; // Attempt to access the private field
            return true; // Access successful
        } catch (err) {
            if (err instanceof TypeError) {
                return false; // Access failed, field does not exist
            }
            throw err; // Other errors are re-thrown
        }
    }
}

// Example usage:
const myBook = new Book("Avyukt");
console.log(Book.hasAuthorField(myBook));      // Expected output: true

const otherObject = {};
console.log(Book.hasAuthorField(otherObject)); // Expected output: false

Новый метод ES2024

class BookES2024 {
    #author;
    constructor(author) {
        this.#author = author;
    }
    static hasAuthorField(obj) {
        return #author in obj; // New ES2024 syntax for checking private field
    }
}

// Example usage:
const myBook2024 = new BookES2024("Avyukt");
console.log(BookES2024.hasAuthorField(myBook2024));      // Expected output: true

const otherObject2024 = {};
console.log(BookES2024.hasAuthorField(otherObject2024)); // Expected output: false

В этом примере класс Book демонстрирует традиционный метод, а BookES2024 использует новый синтаксис ES2024. Статический метод hasAuthorField проверяет наличие закрытого поля #author в объекте, используя разные подходы в каждом классе.

Источник

#JavaScript

Войти на сайт