Нативный javascript: 6 функций, о которых вы не знаете

От автора: JavaScript — это язык, который быстро развивается; по этой причине иногда трудно уследить за всеми все его функциями и возможностями. В этой короткой статье мы рассмотрим некоторые нативные функции, о которых вы, возможно, не знали.

Получение параметров строки запроса

URLSearchParams это интерфейс, который позволяет обрабатывать параметры строки запроса, он существует уже несколько лет, но вас может удивить, что он не так популярен среди разработчиков, давайте посмотрим, как его использовать:

// to get the query strings from the current url use window.location.search
const queryStrings = new URLSearchParams('?browser=chrome&action=redirect');
queryStrings.get('browser');queryStrings.has('action');

Достаточно просто, здесь вы найдете больше информации, если хотите узнать обо всех функциях API.

Создание списка уникальных элементов, используя объект Set

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

const list = [1, 2, 3, 5, 2, 5, 7]; const uniqueList = [...new Set(list)];

Мы передаем массив примитивных значений объекту Set; он создает набор уникальных значений, которые затем преобразуются в список с использованием синтаксиса оператора распространения и литералов массива.

Привести список значений примитивов к другому типу

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

const naiveList = ['1500', '1350', '4580'];

Мы хотим найти сумму всех элементов в массиве, в JavaScript, если вы «суммируете» две строки, как ’1′ + ’2′ они будут объединяться, обычно для решения этой проблемы мы использовали бы функцию parseInt, но есть другой способ; мы можем привести элементы в массиве к типу примитива, который нам нужен:

const castedList = naiveList.map(Number);

Теперь castedList содержит значения с правильным типом Number.

Сглаживание значений вложенного массива

С расширением архитектуры одностраничных приложений, таких как Redux, и таких концепций, как нормализация данных front-end, часть этой тенденции «нормализации данных» иногда подразумевает перечисление всех идентификаторов элементов на одном уровне.

Допустим, у нас есть следующий список, и мы хотим сгладить его:

const nestedList = [133, 235, 515, [513, 15]]; const flattenList = nestedList.flat();

и вот так просто наш массив идентификаторов теперь сглажен.

Предотвращение мутаций объекта с помощью Object.freeze

Когда речь идет о функциональном коде, одна из вещей, о которых меня чаще всего спрашивают — это, как предотвратить мутацию объектов. Ответ на этот вопрос всегда одинаков — Заморозить их:

const immutableObject = { name: 'Enmascript', url: 'https://enmascript.com'
}; Object.freeze(immutableObject);
immutableObject.twitter = 'https://twitter.com/duranenmanuel';
immutableObject.name = 'Another name'; // immutableObject is still { name: "Enmascript", url: "https://enmascript.com" }

Созданные Контролируемые объекты с помощью Object.seal

Делает то же самое, но Object.freeze позволяет изменять значения свойств, которые уже были определены в объекте, это позволит вам контролировать свойства, объявленные в объекте, но не определения:

const controlledObject = { name: 'Barry Allen'
}; Object.seal(controlledObject);
controlledObject.name = 'Clark Kent';
controlledObject.hero = 'Superman'; // controlledObject will return { name: "Clark Kent" }

Знаете ли вы о каких-либо других функциях JavaScript, которые могут быть не популярны, но полезны? Поделитесь ими с нами.

Автор: Enmanuel Durán

Источник: https://enmascript.com

Редакция: Команда webformyself.