Рубрики
Без рубрики

JavaScript ES6: еще больше новых абстракций для улучшения вашего кода

Используйте мощные функции ES6 для написания лучшего, элегантного и более предсказуемого J … Теги с WebDev, JavaScript, ES6, Es6indepth.

Используйте мощные функции ES6 для написания лучшего, элегантного и более предсказуемого JavaScript.

JavaScript ES6, также известный как ECMAScript 2015, имеет ряд действительно прохладных новых функций, которые могут улучшить качество вашего кода. Вчера, рад покрыл пять новых функций в ES6, что, вероятно, улучшит код, который вы пишете.

Поэтому я понял, почему бы не покрыть еще пять?

Для тех из вас, снимающих, здесь они в форме списка:

  1. Пусть +. Конститут
  2. Для … цикла
  3. Распространение
  4. Карта
  5. Обещания

1. Пусть +. Конститут

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

let foo = 10;
let bar = 5;

if (true) {
    let bar = foo * 2;
    console.log( bar ); // 20
}

console.log( bar ); // 5

Const позволяет устанавливать значение переменной, которая останется прежним в течение всего жизненного цикла приложения.

const foo = 20;

2. Для … петлей

С помощью ES6 новый способ переоценить каждый из значений в массиве, был введен под названием «Для … для петель».

Это также облегчает итерацию через элементы коллекции.

let colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];

for(var color of colors){
  console.log(color);
}

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

3. Распространение

Оператор распространения, который также известен как … Оператор … Оператор был введен в ES6. Это делает работу с объектами намного проще, так как он помогает с двумя вещами:

  1. Распространение массива или объекта в другой массив или объект,
  2. Присоединение нескольких параметров в массив.

Чтобы распространить массив или объект в другое:

let arr1 = [1, 2 , 3];
let arr2 = [0, ...arr1, 4, 5, 6];
console.log(arr2); // 0,1,2,3,4,5,6

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

function user(name, age)
{
  console.log(`My name is ${name}, I am ${age} years old.`);
}

let person = ['Brian Willer', 38];

user(...person); //My name is Brian Willer, I am 38 years old.

4. Карта

Карты – аналогичные массивы. Они держат пару клавише, но позволяют указать свой собственный индекс, и этот указанный индекс уникален.

var greetings = new Map();

greetings.set("hello", "Bless");
greetings.set(name, "panda");

greetings.get(name); // panda
greetings.get("hello"); // Bless

greetings.size; // 2

Карты в действии

Примечание: Чтобы использовать карты по многим браузере, вам понадобится многобированные, так как не браузеры не будут реализованы.

5. Обещания

Обещания дают нам способ обрабатывать асинхронные операции и процессы в синхронном виде. С этим мы можем легко писать независимый код.

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

var welcomeMessage =  new Promise(function(resolve, reject) {
  setTimeout(resolve, 1000)
}).then(function() {
  console.log('Welcome User!')
})

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

Заключение

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

Если вы хотите проверить больше этих функций, создал Люк Хобан ES6Features REPO, который имеет список всех крутых функций ES6.

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

Ваше здоровье!!!

Plug: Logrocket, DVR для веб-приложений

https://logrocket.com/signup/

Logrocket Это инструмент для ведения журнала Frontend, который позволяет вам повторить проблемы, как если бы они произошли в вашем браузере. Вместо того, чтобы угадать, почему случаются ошибки, или просят пользователей на скриншоты и журнал свалки, Lognocket позволяет воспроизвести сеанс, чтобы быстро понять, что пошло не так. Он отлично работает с любым приложением, независимо от основ и имеет плагины для регистрации дополнительного контекста из Redux, Vuex и @ Ngrx/Store.

В дополнение к регистрации действий и состояния Redux, Lognocket Records Console Logs, ошибки JavaScript, Stacktraces, Networks/Ответы с заголовками + тел, метаданные браузера и пользовательские журналы. Он также привлекает инструменты DOM для записи HTML и CSS на странице, воссоздая Pixel-Perfect видео даже самых сложных приложений для одной страницы.

Попробуйте бесплатно.

Пост JavaScript ES6: еще больше новых абстракций для улучшения вашего кода появился первым на Logocket blog Отказ

Оригинал: “https://dev.to/bnevilleoneill/javascript-es6-even-more-new-abstractions-to-improve-your-code-3khg”

Читайте ещё по теме: