Первоисточник:Michael WanyoikeИсточник перевода:Управление Грейп Сити

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

Цель этой статьи — помочь вам стать более опытным в использовании языка JavaScript для разработки.

Статья будет разделена на две части: начальную и продвинутую, которые будут представлены отдельно.

Новички

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

Вот хороший пример полного оператора if, сокращенного до одной строки кода.

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';

2. Оператор цикла

Следующее сокращение может быть очень полезным при работе с чистым JavaScript (без использования внешних библиотек, таких как jQuery или lodash).

for (let i = 0; i< allImgs.length; i++)

Сокращенно:

for (let index of allImgs)

Вот сокращенный пример forEach, который выполняет итерацию по массиву:

function logArrayElements(element, index, array) {
    console.log("a[" + index + "] = " + element);
}
[2, 5, 9].forEach(logArrayElements);
# logs:
    # a[0] = 2
    # a[1] = 5
    # a[2] = 9

3. Объявить переменные

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

let x;
let y;
let z = 3;

Можно сократить как:

let x, y, z=3;

4. если заявление

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

if (likeJavaScript === true)

Сокращенно:

if (likeJavaScript)

5. Десятичные числа

Вместо больших чисел можно использовать научное обозначение, например, 10000000 можно сократить до 1e7.

for (let i = 0; i<10000;i++){}

Сокращенно:

for (let i = 0; i<1e7; i++) { }

6. Многострочные строки

Если вам нужно написать в коде многострочную строку, например:

const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t'
    + 'adipisicing elit, sed do eiusmod tempor incididunt\n\t'
    + 'ut labore et dolore magna aliqua. Ut enim ad minim\n\t'
    + 'veniam, quis nostrud exercitation ullamco laboris\n\t'
    + 'nisi ut aliquip ex ea commodo consequat. Duis aute\n\t'
    + 'irure dolor in reprehenderit in voluptate velit esse.\n\t'

Но есть более простой способ, просто используя кавычки:

const lorem = `Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse.`

Передовой

1. Назначение переменной

При присвоении значения одной переменной другой сначала необходимо убедиться, что исходное значение не равно null, undefined или null.

Этого можно достичь, написав оператор предиката с несколькими условиями:

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

Или сокращенно:

const variable2 = variable1  || 'new';

Вы можете вставить следующий код в es6console и протестировать его самостоятельно:

let variable1;
let variable2 = variable1  || '';
console.log(variable2 === ''); // prints true
variable1 = 'foo';
variable2 = variable1  || '';
console.log(variable2); #  prints foo

2. Назначение значения по умолчанию

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

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

Сокращенно:

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

3. Свойства объекта

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

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

Сокращенно:

const obj = { x, y };

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

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

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

5. Неявное возвращаемое значение

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

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

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

Сокращенно:

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

6. Значения параметров по умолчанию

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

function volume(l, w, h) {
    if (w === undefined)
    w = 3;
if (h === undefined)
     h = 4;
return l * w * h;

}

Сокращенно:

volume = (l, w = 3, h = 4 ) => (l * w * h);
volume(2) //output: 24

7. Строки шаблона

В прошлом мы использовали «+» для преобразования нескольких переменных в строки, но есть ли более простой способ?

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

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

8. Деструктивное назначение

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

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

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;

9. Оператор спреда

Оператор распространения был представлен в 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 }

10. Обязательные параметры

По умолчанию JavaScript устанавливает для параметров функции значение undefined, если им не передается значение. Другие языки будут выдавать предупреждения или ошибки. Чтобы выполнить назначение параметров, вы можете использовать оператор if, чтобы вызвать неопределенную ошибку, или вы можете воспользоваться «обязательными параметрами».

function foo(bar) {
    if(bar === undefined) {
    throw new Error('Missing parameter!');
}
return bar;
}

Сокращенно:

mandatory = ( ) => {
    throw new Error('Missing parameter!');
}
foo = (bar = mandatory( )) => {
    return bar;
}

11. Array.find

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

const pets = [
    { type: 'Dog', name: 'Max'},
    { type: 'Cat', name: 'Karl'},
    { type: 'Dog', name: 'Tommy'},
]
function findDog(name) {
    for(let i = 0; ii) {
    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' }

12. Object [key]

function validate(values) {
if(!values.first)
    return false;
if(!values.last)
    return false;
 return true;
}
console.log(validate({first:'Bruce',last:'Wayne'})); // true

# object validation rules
const schema = {
first: {
    required:true
},
    last: {
    required:true
}
}

universal validation function

const validate = (schema, values) => {
for(field in schema) {
    if(schema[field].required) {
    if(!values[field]) {
        return false;
    }
    }
}
return true;
}
console.log(validate(schema, {first:'Bruce'})); // false
console.log(validate(schema, {first:'Bruce',last:'Wayne'})); // true

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

~~4.9 === 4  //true