В этой статье я покажу вам 15 отличных советов по освоению языка JavaScript. Мы изучим ярлыки кода, функции, которые мало кто знает, и некоторые «хитрости», которые могут быть очень полезны для JS-программистов в целом.

Предупреждение: Не все советы понравятся всем. Намерение состоит в том, чтобы показать интересные возможности, но знать, когда лучше всего использовать каждую из них, зависит от программиста (принимая во внимание, например, читабельность кода).

Сегодняшние советы усложняются, поэтому, если какой-то совет покажется вам слишком простым, продолжайте читать, и он станет сложнее (или нет, возможно, вы уже освоили то, чему я научу сегодня 😅).

фото [Artem Maltsev](https://unsplash.com/@art_maltsev?utm_source=medium&utm_medium=referral) на [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)


1. Нулевая и неопределенная оценка

Одна из вещей, которую мы скоро узнаем в JavaScript, заключается в том, что не все является тем, чем кажется, и что есть много способов, которыми переменная может вызвать у вас проблемы в таком динамическом языке, как этот. Очень распространенный тест, который можно выполнить, — это проверить, является ли переменная нулевой, неопределенной или даже «пустой», как в примере ниже:

let username;
if (name !== null || name !== undefined || name !== '') {
   userName = name;
} else {
   userName = "";
Войти в полноэкранный режим

Выйти из полноэкранного режима

Более простой способ сделать ту же оценку:

let userName = name || "";
Войти в полноэкранный режим

Выйти из полноэкранного режима

Если вы не верите, пожалуйста, проверьте это!


2. Определение массива

Итак, вам нужно создать объект Array, а затем заполнить его элементами, верно? Ваш код, вероятно, будет выглядеть примерно так:

let a = new Array(); 
a[0] = "s1"; 
a[1] = "s2"; 
a[2] = "s3";
Войти в полноэкранный режим

Выйти из полноэкранного режима

Как насчет того, чтобы сделать то же самое только в одной строке?

let a = ["s1", "s2", "s3"]
Войти в полноэкранный режим

Выйти из полноэкранного режима

Довольно мило, а!

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


3. Тернарный оператор

Знаменитый однострочный тернарный оператор if/else уже давно знаком многим программистам C-подобных языков, таких как Java и C#. Он существует и в JS и может легко преобразовывать такие блоки кода:

let big;
if (x > 10) {
    big = true;
}
else {
    big = false;
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

В этом:

let big = x > 10 ? true : false;
Войти в полноэкранный режим

Выйти из полноэкранного режима

Или еще проще:

let big = x > 10;
Войти в полноэкранный режим

Выйти из полноэкранного режима

Но работает ли он и с вызовами функций? Если у меня есть две разные функции, и я хочу вызвать одну в случае, если если верно, и одну в случае, если если ложно, обычно вы должны сделать что-то вроде этого:

function x() { console.log('x') };
function y() { console.log('y') };

let z = 3;
if (z == 3) {
    x();
} else {
    y();
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Но держитесь за свой стул… вы можете сделать тот же вызов функции, используя тернарный код:

function x() { console.log('x') };
function y() { console.log('y') };

let z = 3;
(z==3 ? x : y)(); // Shortcut
Войти в полноэкранный режим

Выйти из полноэкранного режима

Также стоит упомянуть операторы if, которые проверяют, является ли переменная истинной, хотя некоторые программисты до сих пор делают это так:

if (likeJs === true)
Войти в полноэкранный режим

Выйти из полноэкранного режима

Когда они могут просто сделать это так:

if (likeJs)
Войти в полноэкранный режим

Выйти из полноэкранного режима


4. Объявление переменных

Да, даже в объявлении переменных есть свои особенности. Хотя это не совсем секрет, вы все еще видите много программистов, делающих подобные заявления:

let x;
let y;
let z = 3;
Войти в полноэкранный режим

Выйти из полноэкранного режима

Когда они могли это сделать:

let x, y, z = 3;
Войти в полноэкранный режим

Выйти из полноэкранного режима


5. Использование регулярных выражений

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

Вы можете узнать больше о том, как использовать регулярные выражения по этим ссылкам:


6. ярлык charAt()

Итак, вы хотите выбрать только один символ из строки в определенной позиции, верно? Бьюсь об заклад, первое, что приходит вам в голову, это использовать функцию charAt, как показано ниже:

"string".charAt(0);
Войти в полноэкранный режим

Выйти из полноэкранного режима

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

"string"[0]; // Returns 's'
Войти в полноэкранный режим

Выйти из полноэкранного режима


7. Степени основания 10

Это просто упрощенная запись экспоненциальных чисел с основанием 10 или знаменитая числа полные нулей. Для тех из вас, кто близок к математике, вы не будете слишком удивлены, увидев один из них, но число 10 000 можно легко заменить в JS на 1e4, то есть 1, за которой следуют 4 нуля, как показано ниже:

for (let i = 0; i < 1e4; i++) {
Войти в полноэкранный режим

Выйти из полноэкранного режима


8. Шаблонные литералы

Эта семантическая функция уникальна для ECMAScript версии 6 или выше и значительно упрощает чтение конкатенаций строк в наборах переменных. Например, конкатенация ниже:

const question = “My number is “ + number + “, ok?”
Войти в полноэкранный режим

Выйти из полноэкранного режима

Это просто, и вы, вероятно, делали конкатенации хуже. Начиная с ES6, мы можем сделать эту конкатенацию, используя литералы шаблонов:

const question = `My number is ${number}, ok?`
Войти в полноэкранный режим

Выйти из полноэкранного режима


9. Стрелочные функции

Стрелочные функции — это сокращенные способы объявления функций. Да, больше способов сделать то же самое, что работало со времен первой версии JavaScript. Например, ниже приведена функция суммы:

function sum(n1,n2){
   return n1 + n2;
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Мы также можем объявить эту функцию следующим образом:

const sum = function(n1,n2){
   return n1+n2;
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Но используя функции стрелок:

const sum = (n1,n2) => n1 + n2;
Войти в полноэкранный режим

Выйти из полноэкранного режима


10. Деструктуризация аргументов

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

Пока нет проблем, в конце концов, кто никогда не сталкивался с этим? Проблема заключается в том, чтобы продолжать обращаться к объекту, который был передан параметром, за которым следует каждое свойство, которое мы хотим прочитать, верно? Как это:

function init(config){
   const s = config.s;
   const t = config.t;
   return s + t;// or config.s + config.t
}

init({s: "1", t: "2"});
Войти в полноэкранный режим

Выйти из полноэкранного режима

Функция деструктуризации аргумента служит именно для того, чтобы упростить это и в то же время улучшить читаемость кода, заменив предыдущую инструкцию на эту:

function init({s, t}){
   return s + t;
}

init({s: 1, t: 2});
Войти в полноэкранный режим

Выйти из полноэкранного режима

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

function init({s = 10, t = 20}){
   return s + t;
}

init({s: 1});
Войти в полноэкранный режим

Выйти из полноэкранного режима

Таким образом, значение s будет равно 1, но значение t по умолчанию будет равно этому свойству, которое будет равно 20.


11. Имена ключ-значение

Очень захватывающей функцией является сокращенный способ присвоения свойств объектам. Представьте, что у вас есть объект person со свойством name, которое будет присвоено через переменную name. Это будет выглядеть так:

const name = "Joseph"
const person = { name: name }

// { name: "Joseph" }
Войти в полноэкранный режим

Выйти из полноэкранного режима

Пока можно сделать так:

const name = "Joseph"
const person = { name }

// { name: "Joseph" }
Войти в полноэкранный режим

Выйти из полноэкранного режима

То есть, если ваша переменная имеет то же имя, что и свойство, вам не нужно ее вызывать, просто передайте переменную. То же самое верно для нескольких свойств:

const name = "Joseph"
const canCode = true
const person = { name, canCode }
// { name: "Joseph", canCode: true }
Войти в полноэкранный режим

Выйти из полноэкранного режима


12. Карта

Рассмотрим следующий массив объектов:

const animals = [
    {
        "name": "cat",
        "size": "small",
        "weight": 5
    },
    {
        "name": "dog",
        "size": "small",
        "weight": 10
    },
    {
        "name": "lion",
        "size": "medium",
        "weight": 150
    },
    {
        "name": "elefante",
        "size": "large",
        "weight": 5000
    }
]
Войти в полноэкранный режим

Выйти из полноэкранного режима

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

let animalNames = [];

for (let i = 0; i < animals.length; i++) {
    animalNames.push(animals[i].name);
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Но с Map мы можем сделать это:

let animalNames = animais.map((animal) => {
    return animal.nome;
})
Войти в полноэкранный режим

Выйти из полноэкранного режима

Обратите внимание, что карта ожидает функцию по параметру не более чем с тремя аргументами:

  • Первый — это текущий объект (как в foreach)

  • Второй — индекс текущей итерации

  • Третий — весь массив

Очевидно, что эта функция будет вызываться один раз для каждого объекта в массиве животных.


13. Фильтр

Что, если мы хотим перебрать тот же массив объектов-животных, что и в предыдущем совете, но на этот раз возвращая только те, чей размер «маленький»?

Как бы мы сделали это с обычным JS?

let smallAnimals = [];

for (let i = 0; i < animals.length; i ++) {
    if (animals[i].size === "small") {
       smallAnimals.push(animals[i])
    }
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

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

let smallAnimals = animais.filter((animal) => {
    return animal.size === "small"
})
Войти в полноэкранный режим

Выйти из полноэкранного режима

Фильтр ожидает функцию по параметру с аргументом, который является объектом текущей итерации (как в foreach), и он должен возвращать логическое значение, указывающее, будет ли этот объект частью возвращаемого массива или нет (true указывает, что он прошел тест и будет его частью).


14. Уменьшить

Еще одна важная особенность Javascript — это уменьшать. Это позволяет нам выполнять группировку и вычисления поверх коллекций очень простым и мощным способом. Например, если бы мы хотели сложить вес всех животных в нашем массиве объектов-животных, как бы мы это сделали?

let totalWeight = 0;

for (let i = 0; i < animals.length; i++) {
    totalWeight += animals[i].weight;
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

Но с помощью сокращения мы можем сделать это вместо этого:

let totalWeight = animals.reduce((total, animal) => {
    return total += animal.weight;
}, 0)
Войти в полноэкранный режим

Выйти из полноэкранного режима

Reduce ожидает функцию по параметру со следующими аргументами:

  • Во-первых, это текущее значение аккумулятор переменная (в конце всех итераций она будет содержать окончательное значение)

  • Второй аргумент – это объект текущей итерации

  • Третий аргумент – это индекс текущей итерации

  • Четвертый аргумент – это массив со всеми объектами, которые будут повторяться

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


Вывод

А вы? Есть ли у вас какие-либо другие советы, чтобы добавить в список? Оставь это в комментариях!

Спасибо за чтение! Следуйте за мной на этой платформе, чтобы узнать больше о разработке. Хорошего дня, скоро увидимся! 👋