15 советов для совершенствования в качестве разработчика Javascript

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

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

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

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;

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

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. Использование RegExp

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

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

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

• https://regexr.com/

• https://regex101.com/

6. charAt() сокращение

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

"string".charAt(0);

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

"string"[0]; // Returns 's'

7. Силы основания 10

Это просто более точная нотация для экспоненциальных чисел Base-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. Например, ниже приведена функция sum:

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;
})

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

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

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

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

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

13. Фильтр

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

Как это сделать с помощью обычного JS?

let smallAnimals = [];

for (let i = 0; i < animals.length; i ++) {
    if (animals[i].size === "small") {
       smallAnimals.push(animals[i])
    }
}

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

let smallAnimals = animais.filter((animal) => {
    return animal.size === "small"
})

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

14. Уменьшить

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

let totalWeight = 0;

for (let i = 0; i < animals.length; i++) {
    totalWeight += animals[i].weight;
}

Но с помощью reduce мы можем сделать следующее:

let totalWeight = animals.reduce((total, animal) => {
    return total += animal.weight;
}, 0)

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

• Первый — текущее значение переменной accumulator (в конце всех итераций она будет содержать конечное значение).

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

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

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

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

Заключение

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

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