Новая поза для объявления переменных

Используйте let вместо var

До ES6 мы использовали var для объявления переменной, но у него много недостатков:

• Поскольку области видимости на уровне блоков нет, можно легко объявить глобальные переменные.
• переменное продвижение
• можно повторить Помните этот вопрос интервью?

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10
a[7](); // 10
a[8](); // 10
a[9](); // 10

Итак, почему бы вам не использовать let сейчас?

Иногда const лучше, чем let

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

• Лучшая семантика кода, на первый взгляд, постоянна.
• Другая причина заключается в том, что компилятор JavaScript оптимизирует const лучше, чем let, и более широкое использование const полезно для повышения эффективности работы программы.
• Все функции должны быть установлены в константы.

динамическая строка

Не используйте «двойные кавычки», всегда используйте одинарные или обратные кавычки.

// low
const a = "foobar";
const b = 'foo' + a + 'bar';

// best
const a = 'foobar';
const b = `foo${a}bar`;
const c = 'foobar';

Трюки с деструктурированием присваивания

присвоение переменной

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

const arr = [1, 2, 3, 4];

// low
const first = arr[0];
const second = arr[1];

// good
const [first, second] = arr;

объект передачи функции

Если параметр функции является членом объекта, предпочтение отдается деструктурирующему присваиванию.

// low
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;
}

// good
function getFullName({ firstName, lastName }) {
}

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

// low
function processInput(input) {
  return [left, right, top, bottom];
}

// good
function processInput(input) {
  return { left, right, top, bottom };
}

const { left, right } = processInput(input);

Подробности об объекте

запятая

Объекты, определенные в одной строке, не заканчиваются запятой:

// low
const a = { k1: v1, k2: v2, };

// good
const a = { k1: v1, k2: v2 };

Объекты, определенные на нескольких строках, должны сохранять запятые:

// low
const b = {
  k1: v1,
  k2: v2
};

// good
const b = {
  k1: v1,
  k2: v2,
};

Однократная инициализация завершена

Не добавляйте новые свойства к объекту после его объявления:

// low
const a = {};
a.x = 3;

// good
const a = { x: null };
a.x = 3;

Если вы должны добавить его, используйте Object.assign:

const a = {};
Object.assign(a, { x: 3 });

Если имя свойства объекта является динамическим, вы можете использовать определение выражения свойства при создании объекта:

// low
const obj = {
  id: 5,
  name: 'San Francisco',
};
obj[getKey('enabled')] = true;

// good
const obj = {
  id: 5,
  name: 'San Francisco',
  [getKey('enabled')]: true,
};

немного более лаконично

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

var ref = 'some value';

// low
const atom = {
  ref: ref,

  value: 1,

  addValue: function (value) {
    return atom.value + value;
  },
};

// good
const atom = {
  ref,

  value: 1,

  addValue(value) {
    return atom.value + value;
  },
};

множество

...

Используйте оператор распространения (...) для копирования массива:

// 还在用for i 你就太low了
const len = items.length;
const itemsCopy = [];
let i;

for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i];
}

// cool !
const itemsCopy = [...items];

не упоминай мне массивы

Преобразуйте массивоподобный объект в массив с помощью метода Array.from:

const foo = document.querySelectorAll('.foo');
const nodes = Array.from(foo);

функция

функция стрелки =>

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

(() => {
  console.log('Welcome to the Internet.');
})();

Попробуйте написать стрелочные функции, чтобы ваш код выглядел лаконично и элегантно:

// low
[1, 2, 3].map(function (x) {
  return x * x;
});

// cool !
[1, 2, 3].map(x => x * x);

Не передавайте логические значения непосредственно в функции

// low
function divide(a, b, option = false ) {
}

// good
function divide(a, b, { option = false } = {}) {
}

Прекратите использовать аргументы (подобные массивам)!

Вместо этого используйте оператор rest (...), который предоставляет реальный массив.

// low
function concatenateAll() {
  const args = Array.prototype.slice.call(arguments);
  return args.join('');
}

// good
function concatenateAll(...args) {
  return args.join('');
}

Попробуйте установить значения по умолчанию при передаче параметров?

// low
function handleThings(opts) {
  opts = opts || {};
}

// good
function handleThings(opts = {}) {
  // ...
}

Объект? Карта!

Простая пара ключ-значение первая карта

Если это просто структура ключ: значение, то рекомендуется сначала использовать Map, потому что Map предоставляет удобный механизм обхода.

let map = new Map(arr);
// 遍历key值
for (let key of map.keys()) {
  console.log(key);
}
// 遍历value值
for (let value of map.values()) {
  console.log(value);
}
// 遍历key和value值
for (let item of map.entries()) {
  console.log(item[0], item[1]);
}

Более лаконичный и интуитивно понятный синтаксис класса

// low
function Queue(contents = []) {
  this._queue = [...contents];
}
Queue.prototype.pop = function() {
  const value = this._queue[0];
  this._queue.splice(0, 1);
  return value;
}

// good
class Queue {
  constructor(contents = []) {
    this._queue = [...contents];
  }
  pop() {
    const value = this._queue[0];
    this._queue.splice(0, 1);
    return value;
  }
}

модульный

модуль импорта

Используйте Import вместо Require, потому что Module — это стандартное написание модуля JavaScript.

// bad
const moduleA = require('moduleA');
const func1 = moduleA.func1;
const func2 = moduleA.func2;

// good
import { func1, func2 } from 'moduleA';

модуль вывода

Используйте выходную переменную экспорта, отклонив module.exports:

import React from 'react';

class Breadcrumbs extends React.Component {
  render() {
    return <nav />;
  }
};

export default Breadcrumbs;

• Чтобы вывести одно значение, используйтеexport default
• Чтобы вывести несколько значений, используйтеexport
• export defaultс обычнымexportНе используйте одновременно

Стандарты кодирования

• Модуль выводит функцию, первая буква должна быть строчной:

function getData() {
}

export default getData;

• Модуль выводит объект, первая буква должна быть заглавной

const Person = {
  someCode: {
  }
};

export default Person ;