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

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

Это отличная экономия кода, когда вы хотите написать оператор if..else всего в одну строку.

Длинный метод:

const x = 20;
let answer;
if (x > 10) {
    answer = "greater than 10";
} else {
    answer =  "less than 10";
}

Ярлык:

const answer = x > 10 ? "greater than 10" : "less than 10";
//OR you can also nest if statement like this
const answer = x > 10 ? "greater than 10" : x < 5 ? "less than 5" : "between 5 and 10";

Сокращение оценки короткого замыкания

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

Длинный метод:

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
     let variable2 = variable1;
}

Ярлык:

const variable2 = variable1  || 'new';

Сокращенное объявление переменных

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

Длинный метод:

let x;
let y;
let z = 3;

Ярлык:

let x, y, z=3;

Сокращение JavaScript для цикла

Этот небольшой совет действительно полезен, если вам нужен простой JavaScript и вы не хотите полагаться на внешние библиотеки.

Длинный метод:

const fruits = ['mango', 'peach', 'banana'];
for (let i = 0; i < fruits.length; i++)

Ярлык:

for (let fruit of fruits)

Если вы просто хотели получить доступ к индексу, выполните:

for (let index in fruits)

Это также работает, если вы хотите получить доступ к ключам в буквальном объекте:

const obj = {continent: 'Africa', country: 'Kenya', city: 'Nairobi'}
for (let key in obj)
  console.log(key) // output: continent, country, city

Оценка короткого замыкания

Вместо написания шести строк кода для присвоения значения по умолчанию, если предполагаемый параметр имеет значение null или не определено, мы можем просто использовать логический оператор короткого замыкания и выполнить то же самое с помощью всего одной строки кода.

Длинный метод:

let dbHost;
if (process.env.DB_HOST) {
  dbHost = process.env.DB_HOST;
} else {
  dbHost = 'localhost';
}

Ярлык:

const dbHost = process.env.DB_HOST || 'localhost';

Сокращение свойства объекта

Определение литералов объектов в JavaScript значительно упрощает жизнь. ES6 предоставляет еще более простой способ назначения свойств объектам. Если имя переменной совпадает с ключом объекта, вы можете воспользоваться сокращенной записью.

Длинный метод:

const x = 1920, y = 1080;
const obj = { x:x, y:y };

Ярлык:

const obj = { x, y };

Сокращенная запись стрелочных функций

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

Длинный метод:

function sayHello(name) {
  console.log('Hello', name);
}
setTimeout(function() {
  console.log('Loaded')
}, 2000);
list.forEach(function(item) {
  console.log(item);
});

Ярлык:

sayHello = name => console.log('Hello', name);
setTimeout(() => console.log('Loaded'), 2000);
list.forEach(item => console.log(item));

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

Сокращенная форма неявного возврата

Возврат — это ключевое слово, которое мы часто используем для возврата конечного результата функции. Стрелочная функция с одним оператором неявно возвращает результат своей оценки (функция должна опустить фигурные скобки ({}), чтобы опустить ключевое слово return).

Чтобы вернуть многострочный оператор, необходимо использовать () вместо {} для переноса тела функции. Это гарантирует, что код оценивается как один оператор.

Длинный метод:

function calcCircumference(diameter) {
  return Math.PI * diameter
}

Ярлык:

calcCircumference = diameter => (
  Math.PI * diameter;
)

Литералы шаблонов

Все, что вам нужно сделать, это использовать обратную кавычку и ${} для включения ваших переменных.

Длинный метод:

const welcome = 'You have logged in as ' + first + ' ' + last + '.'
const db = 'http://' + host + ':' + port + '/' + database;

Ярлык:

const welcome = `You have logged in as ${first} ${last}`;
const db = `http://${host}:${port}/${database}`;

Сокращенная запись деструктурирования присваивания

Если вы работаете с какой-либо популярной веб-платформой (ReactJs, Angular и т. д.), высока вероятность того, что вы будете использовать массивы или данные в виде литералов объектов для передачи информации между компонентами и API. Как только объект данных достигает компонента, вам нужно его распаковать.

Длинный метод:

const observable = require('mobx/observable');
const action = require('mobx/action');
const runInAction = require('mobx/runInAction');
const store = this.props.store;
const form = this.props.form;
const loading = this.props.loading;
const errors = this.props.errors;
const entity = this.props.entity;

Ярлык:

import { observable, action, runInAction } from 'mobx';
const { store, form, loading, errors, entity } = this.props;

Вы даже можете назначить свои собственные имена переменных:

const { store, form, loading, errors, entity:contact } = this.props;

Сокращение оператора спреда

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

Длинный метод:

// joining arrays
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);
// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = arr.slice()

Ярлык:

// joining arrays
const odd = [1, 3, 5 ];
const nums = [2 ,4 , 6, ...odd];
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]
// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = [...arr];

В отличие от функции concat(), вы можете использовать оператор расширения для вставки массива в любое место внутри другого массива.

const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6];

Вы также можете комбинировать оператор распространения с нотацией деструктурирования ES6:

const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a) // 1
console.log(b) // 2
console.log(z) // { c: 3, d: 4 }

Array.find Сокращение

Если бы вам когда-либо приходилось писать функцию поиска на простом JavaScript, вы, вероятно, использовали бы цикл for. В ES6 была введена новая функция массива с именем find().

Длинный метод:

const pets = [
  { type: 'Dog', name: 'Max'},
  { type: 'Cat', name: 'Karl'},
  { type: 'Dog', name: 'Tommy'},
]
function findDog(name) {
  for(let i = 0; i<pets.length; ++i) {
    if(pets[i].type === 'Dog' && pets[i].name === name) {
      return pets[i];
    }
  }
}

Ярлык:

pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
console.log(pet); // { type: 'Dog', name: 'Tommy' }

Двойное побитовое НЕ Сокращение

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

Однако существует очень практичный вариант использования оператора двойного побитового НЕ. Вы можете использовать его как замену Math.floor(). Преимущество оператора двойного побитового НЕ состоит в том, что он выполняет ту же операцию гораздо быстрее.

Длинный метод:

Math.floor(4.9) === 4  //true

Ярлык:

~~4.9 === 4  //true

Побитовый Индекс Сокращения

При выполнении поиска с использованием массива функция indexOf() используется для получения позиции искомого элемента. Если элемент не найден, возвращается значение -1. В JavaScript 0 считается «ложным», а числа больше или меньше 0 считаются «истинными». В результате нужно написать правильный код, подобный этому.

Длинный метод:

if(arr.indexOf(item) > -1) { // Confirm item IS found
}
if(arr.indexOf(item) === -1) { // Confirm item IS NOT found
}

Ярлык:

if(~arr.indexOf(item)) { // Confirm item IS found
}
if(!~arr.indexOf(item)) { // Confirm item IS NOT found
}

Оператор bitwise(~) вернет истинное значение для всего, кроме -1. Отрицать это так же просто, как сделать !~. В качестве альтернативы мы также можем использовать функцию includes():

if(arr.includes(item)) { // Returns true if the item exists, false if it doesn't
}

Предложить один?

Я сохранил много строк кода и хотел бы сохранить больше, поэтому, пожалуйста, оставьте комментарий, если вы знаете о такой!