<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Что нового в EcmaScript 6?

Что нового в EcmaScript 6?

Всем привет! Сегодня мы рассмотрим некоторые новые возможности и изменение старых в EcmaScript6 в сравнении с EcmaScript5.

Определения методов

В EcmaScript5 методы - свойства, значениями которых является функция.

var obj = {
  method: function() {

  }
};

В EcmaScript6 методы также являются функциями, однако вы можете объявлять их более компактно

let obj {
  method() {

  }
};

Геттеры и Сеттеры продолжают работать, как они работали в EcmaScript 5

let obj = {
  get foo() {
   console.log('GET foo');
   return 123;
  },
  set bar(value) {
   console.log('SET bar to '+value);
   // возвращаемое значение игнорируется
  }
};

Давайте использовать объект

> obj.foo
GET foo
123
> obj.bar = true
SET bar to true
true

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

let obj = {
  * myGeneratorMethod() {

  }
};

Этот код равен этому

let obj = {
  myGeneratorMethod: function* () {

  }
};

Сокращения значений свойств

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

let x = 4; let y = 1; let obj = { x, y };

Последняя строчка равна этой

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

Сокращения значений свойств прекрасно работают с деструктором

let obj = { x: 4, y: 1 };
let {x,y} = obj;
console.log(x); // 4
console.log(y); // 1

Вычисленные ключи свойств

Существует 2 способа определить ключ для свойства.

  • через определенное имя: obj.foo = true
  • через выражение: obj['b'+'ar'] = 123

В литерале объекта вы можете использовать только первый способ в ES5. В ES6 добавили и второй способ

let propKey = 'foo';
  let obj = {
  [propKey]: true,
  ['b'+'ar']: 123
};

Этот новый синтаксис может быть совмещен с объявлением метода

let obj = {
  ['h'+'ello']() {
   return 'hi';
  }
};
console.log(obj.hello()); // hi

Новые методы для объектов

Object.assign(target, source_1, source_2, ...)

Этот метод соединяет sources в target. Это изменяет target, во-первых, копирует все перечислимые собственные свойства source_1 в target, затем то же самое с source_2. В конце возвращается target.

let obj = { foo: 123 };
Object.assign(obj, { bar: true });
console.log(JSON.stringify(obj));
// {"foo":123,"bar":true}

Object.getOwnPropertySymbols(obj)

В ES6 ключ свойства может быть либо строкой, либо символом. Теперь есть 5 методов, которые извлекают ключи объекта

  • Object.keys(obj) - извлекает все строковые перечисляемые ключи свойств
  • Object.getOwnPropertyNames(obj) - извлекает все строковые ключи свойств
  • Object.getOwnPropertySymbols(obj) - возвращает все символьные ключи свойств
  • Reflect.ownKeys(obj) - извлекает все ключи всех собственных свойств
  • Reflect.enumerate(obj) - извлекает все строчные значения ключей всех перечисляемых свойств

Object.is(value1, value2)

Строгий оператор эквивалентности рассматривает два значения иначе, чем можно было ожидать

Первое: NaN не равен самому себе. Это очень печально, потому что это часто мешает нам обнаружить NaN

[0,NaN,2].indexOf(NaN) -1

Второе: в javascript 2 нуля, но строгое сравнение относится к них одинаково

-0 === +0
true

Object.is() предоставляет возможность сравнения значений чуть более точно, чем обычное строго сравнение.

Object.is(NaN, NaN)
true
Object.is(-0, +0)
false

Все другое сравнивается так же, как и строгое сравнение.

Если мы совместим Object.is() с новым ES6 методом массивов findIndex(), то получим NaN.

[0,NaN,2].findIndex(x => Object.is(x, NaN))
1

Object.setPrototypeOf(obj, proto)

Этот метод устанавливает прототип proto для объекта obj. В ES5 мы должны были делать это через Object.create(), теперь же мы можем делать это через удобный метод.

На этом я заканчиваю эту статью. Если у кого-то, возможно, возник вопрос, что такое let, то можете почитать здесь про это здесь Спасибо за внимание и удачи!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.