Виталий и Платформа: “Что нового Baseline Widely Available, часть 3 ...продолжение JavaScrip…”

Что нового Baseline Widely Available, часть 3

...продолжение

JavaScript

Array findLast() и findLastIndex() — поиск в массиве в обратном порядке.


const array = [5, 12, 8, 130, 44];
const isLargeNumber = (element) => element > 100;
console.log(array.findLast(isLargeNumber));      // 130
console.log(array.findLastIndex(isLargeNumber)); // 3

Мнение: 3 из 5, хорошо, когда удаётся утилиты заменять на встроенные методы, так что мелочь, а приятно.

—

Array by Copy — методы toSorted(), toReversed(), toSpliced(), возвращающие новый массив без изменения оригинала.


const arr = [1, 2, 3];
const sorted = arr.toSorted();
const reversed = arr.toReversed();

Мнение: 3 из 5, это вот из разряда "теперь надо запомнить, что так делать можно", а то по привычке спредишь массив перед любой мутацией

—

Import Maps — декларативное управление импортами через JSON.


<script type="importmap">
{
  "imports": {
    "lodash": "/node_modules/lodash-es/lodash.js",
    "utils": "/src/utils.js"
  }
}
</script>

Мнение: 4 из 5, вот это, кстати, довольно важная непроходная фича, по сути позволяющая на ES-модулях построить проект без особой сборки, чтобы само собиралось в рантайме (но пригодно, на мой взгляд, в небольших проектах).

—

JavaScript Modules in Workers — использование ES-модулей в Web Workers с { type: "module" }.


// worker.js
import { processData } from './utils.js';
self.onmessage = (e) => {
  const result = processData(e.data);
  self.postMessage(result);
};

Мнение: 2 из 5, с одной стороны, да, появилась возможность импортировать ES-модули, с другой — в этом режиме они импортируются под CORS-ом, а в классических воркерах доступен и `no-cors`-режим; в общем годная тема, ещё больше можно вынести в воркер.

—

requestAnimationFrame() in Workers — анимации в Web Workers.


// worker.js
function animate() {
  // логика анимации
  requestAnimationFrame(animate);
}
animate();

Мнение: 2 из 5, тоже плюсом к предыдущему пункту, если работаете с воркерами, то можно более плавно встраивать результат вычисления обратно в основной поток.

—

Compression Streams — API для сжатия/распаковки данных в формате gzip или deflate.


const compressed = readableStream
  .pipeThrough(new CompressionStream('gzip'));

Мнение: 3 из 5, может быть полезно для сжатия пользовательских файлов или распаковки полученных сжатых файлов, приятно, что заехало прям в платформу, можно не использовать доп либы.

—

Constructed Stylesheets — программное создание стилей через CSSStyleSheet и их совместное использование через adoptedStyleSheets.


const sheet = new CSSStyleSheet();
sheet.replaceSync('.my-class { color: blue; }');
document.adoptedStyleSheets = [sheet];

Мнение: 2 из 5, более навороченный способ добавлять динамически новые стили, хз, может будет полезно авторам runtime-стилизационных библиотек.

продолжение следует...

#Пульс_веб_платформы

@web_platform | Поддержать платформу ⭐️