Share This
Связаться со мной
Крути в низ
Categories
//5 крутых функций JavaScript, о которых не знает большинство разработчиков

5 крутых функций JavaScript, о которых не знает большинство разработчиков

С помощью JavaScript можно делать одно и то же разными способами. С выпуском каждой новой спецификации ECMAScript, добавляя новые методы и операторы, чтобы сделать код короче и где-то более читабельным.

5 krutyh funkcij javascript o kotoryh ne znaet bolshinstvo razrabotchikov 69c1088 - 5 крутых функций JavaScript, о которых не знает большинство разработчиков

Перевод публикуется с сокращениями, автор оригинальной статьи Haseeb Anwar.

5 krutyh funkcij javascript o kotoryh ne znaet bolshinstvo razrabotchikov 4a48975 - 5 крутых функций JavaScript, о которых не знает большинство разработчиков

1. Object.entries

Большинство разработчиков используют метод Object.keys для итерации по объекту. Этот метод возвращает только массив ключей объекта, а не значения. Можно использовать Object.entries для получения как ключа, так и значения.

         const person = {   name: 'John',   age: 20 }; Object.keys(person); // ['name', 'age'] Object.entries(data); // [['name', 'John'], ['age', 20]]     

Чтобы выполнить итерацию по объекту, можем сделать следующее:

         Object.keys(person).forEach((key) => {   console.log(`${key} is ${person[key]}`); }); // использование записей для получения ключа и значения Object.entries(person).forEach(([key, value]) => {   console.log(`${key} is ${value}`); }); // ожидаемый результат: // имя Джон // 20 лет      

Оба подхода, описанные выше, возвращают один и тот же результат, но Object.entries позволяет легко получить пару ключ-значение.

2. Метод replaceAll

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

         const str = 'Red-Green-Blue';  // заменяет только первое вхождение  str.replace('-', ' '); // Red Green-Blue  // используйте регулярное выражение для замены всех вхождений  str.replace(/-/g, ' '); // Red Green Blue     

Но в ES12 в String.prototype добавлен новый метод replaceAll, который заменяет все вхождения строки другим строковым значением:

         str.replaceAll('-', ' '); // Red Green Blue     

3. Числовой разделитель

Можно использовать символ подчеркивания «_» в качестве числового разделителя, для упрощения подсчета количества нулей в числе.

         // трудно читается const billion = 1000000000; // в здесь легче const readableBillion = 1000_000_000; console.log(readableBillion) // вернется 1000000000     

Разделитель также можно использовать с числами BigInt, как в следующем примере:

         const trillion = 1000_000_000_000n; console.log(trillion); // 1000000000000     

Это делает число более читабельным.

4. document.designMode

Связанный с интерфейсным JavaScript, designMode позволяет редактировать любой контент на странице. Просто откройте консоль браузера и введите следующее:

         document.designMode = 'on';     

5 krutyh funkcij javascript o kotoryh ne znaet bolshinstvo razrabotchikov d46ef82 - 5 крутых функций JavaScript, о которых не знает большинство разработчиков

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

5. Оператор логического присваивания

Операторы логического присваивания представляют собой комбинацию логических операторов &&, ||, ?? и оператор присваивания =.

         const a = 1; const b = 2; a &&= b; console.log(a); // returns 2 // приведенное выше утверждение эквивалентно a && (a = b); // OR другой подход if (a) {   a = b }     

Здесь проверяется, соответствует ли значение a true, если да – обновляем его значение. То же самое можно сделать с логическим оператором OR ||.

         const a = null; const b = 3; a ||= b; console.log(a); // returns 3 // приведенное выше утверждение эквивалентно a || (a = b);     

А еще при помощи оператора ??:

         const a = null; const b = 3; a ??= b; console.log(a); // returns 3 // приведенное выше утверждение эквивалентно if (a === null || a === undefined) {   a = b; }     

Оператор ?? проверяет только наличие нулевых или неопределенных значений.

Обратите внимание, что операторы логического присваивания добавились, начиная с ES 12/ES 2021.

Заключение

Рассмотренные трюки и фичи способны ускорить работу разработчика, а их использование не только необходимо, но и полезно. Продолжайте познавать скрытые возможности языка, изучать всевозможные трюки и повышать свой скилл, а Библиотека программиста поможет новым чтивом. Удачи!

Дополнительные материалы:

  • 4 базовых функции для работы с файлами в Node.js
  • Подборка бесплатных ресурсов для изучения Node.js
  • 7 советов изучающему Vue.js новичку
  • Больше JS, чем React: как фреймворк использует возможности языка
  • JS-гайд: основные концепции JavaScript с примерами кода

  • 0 views
  • 0 Comment

Leave a Reply

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Свежие комментарии

    Рубрики

    About Author 01.

    blank
    Roman Spiridonov

    Моя специальность - Back-end Developer, Software Engineer Python. Мне 39 лет, я работаю в области информационных технологий более 5 лет. Опыт программирования на Python более 3 лет. На Django более 2 лет.

    Categories 05.

    © Speccy 2022 / All rights reserved

    Связаться со мной
    Close