Неважно, новичок вы или профессионал, вы должны это прочитать!

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

1. Получите последние элементы массива с помощью метода Slice.

Я никогда не знал, что метод среза принимает отрицательные целые числа. Это отличный способ получить последние элементы массива. Просто введите желаемое количество элементов из конца массива в качестве отрицательного аргумента функции среза, и готово!

let array = [0, 1, 2, 3 ,4 , 5 , 6 , 7 , 8 , 9];
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]

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

2. Установите ключ объекта динамически, используя квадратные скобки.

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

Сделать это можно с помощью квадратных скобок!

const dynamic = "model";
const item = {
  brand: "Porsche",
  [dynamic]: "Panamera"
}
console.log(item);
// { brand: "Porsche", model: "Panamera" }

Просто установите строку для переменной, и вы сможете динамически устанавливать ее внутри вашего нового объекта.

3. Повысьте производительность пользовательского курсора с помощью translate3d.

В настоящее время многие веб-сайты используют настраиваемые курсоры.

Сейчас ведутся огромные споры о том, следует ли вам это делать или нет, но если вы ДОЛЖНЫ это делать, воспользуйтесь этим простым приемом, чтобы улучшить свои результаты.

Вы должны преобразовать положение курсора с помощью translate3d вместо использования его свойств top и left.

// Slow :(
customCursor.style.top = "100px"; 
customCursor.style.left = "50px";
// Better! :D 
customCursor.style.transform = translate3d(${xPosition}, ${yPosition}, 0);

Почему?

2 причины.

Во-первых, обновление свойства top / right / bottom / left элемента DOM вызовет перерисовку слоя макета. Избегать этого было бы здорово для производительности!

Во-вторых, использование translate3d вместо обычного translate приведет к аппаратному ускорению анимации. Это ускорит производительность и сделает анимацию / переход более плавными.

4. Установите переменную по умолчанию, используя «||»

«||» Оператор будет, как и внутри оператора if, работать как оператор ИЛИ.

Это означает, что он проверит, является ли первое значение истинным, а если нет, он будет использовать второе введенное значение.

doSomethingVeryCool = (coolParameter) => {
   const coolThing = coolParameter || "This is not so cool"
   console.log(coolThing);
}
doSomethingVeryCool("This is super cool") 
// Result: "This is super cool"
doSomethingVeryCool() 
// Result: "This is not so cool"

В приведенном выше примере он проверит, является ли «coolParameter» истинным значением, а если нет, он установит строку «Это не так круто» в константу «coolThing».

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

5. Получите среднее значение массива с помощью метода «уменьшить».

Метод reduce - отличный способ перебрать массив и получить один вывод, основанный на значениях внутри массива.

Один из способов использования метода reduce - получить среднее значение по массиву.

let values = [13, 2, 27, 90, 8, 57, 34]; 
let sum = values.reduce((previous, current) => current += previous); let avg = sum / values.length; 
// avg = 33

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

6. Преобразуйте истинные / ложные значения в логические.

JavaScript может быть слишком запутанным, когда дело доходит до значений true / false / true / falsy.

Отличный простой трюк, чтобы узнать, является ли значение истинным / ложным, - это использовать символ «!!» оператор.

Выше приведены несколько примеров для начала, но вы можете использовать знак «!!» с любым значением (строка / целое число / массив / объект), которое вам нравится!

Это все!

Спасибо за чтение, посмотрите, сколько вы узнали 😄

Хотите получить максимальную отдачу от своего веб-сайта? Посмотрите мою электронную книгу Ваш сайт - отстой и скачайте главу бесплатно!

Хотите еще больше улучшить свои навыки JS? Прочтите мою другую статью 5 советов и приемов, которые необходимо знать о Javascript, чтобы стать еще лучше в JS 💪