BabelJS - Transpile ES6 функций в ES5

В этой главе мы увидим функции, добавленные в ES6. Мы также узнаем, как скомпилировать функции для ES5 с помощью BabelJS.

Ниже приведены различные функции ES6, которые мы обсудим в этой главе.

  • Пусть + Const
  • Стрелочные функции
  • Classes
  • Promises
  • Generators
  • Destructuring
  • Iterators
  • Шаблон Literalst
  • Улучшенный объект
  • Свойства по умолчанию, отдыха и спреда

Пусть + Const

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

пример

let a = 1;
if (a == 1) {
   let a = 2;
   console.log(a);
}
console.log(a);

Выход

2
1

Причина, по которой первая консоль печатает 2, состоит в том, что a объявляется снова с использованием let и будет доступен только в ifблок. Любая переменная, объявленная с помощью let, доступна только в объявленном блоке. Мы дважды объявляли переменную a, используя let, но она не перезаписывает значение a.

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

Если переменная объявлена ​​с помощью let, переменная доступна в области видимости блока. Если он объявлен внутри оператора if, он будет доступен только внутри блока if. То же самое относится к switch, for-loop и т. Д.

Теперь мы увидим преобразование кода в ES5 с помощью babeljs.

Давайте запустим следующую команду, чтобы преобразовать код -

npx babel let.js --out-file let_es5.js

Вывод от es6 до es5 для ключевого слова let выглядит следующим образом:

Пусть использует ES6

let a = 1;
if (a == 1) {
   let a = 2;
   console.log(a);
}
console.log(a);

Транспортировано с помощью babel в ES5

"use strict";

var a = 1;
if (a == 1) {
   var _a = 2;
   console.log(_a);
}
console.log(a);

Если вы видите код ES5, ключевое слово let заменяется на varключевое слово. Также переменная внутри блока if переименована в_a иметь тот же эффект, что и при объявлении с let ключевое слово.

Const

В этом разделе мы узнаем о работе ключевого слова const в ES6 и ES5. Ключевое слово Const также доступно в области видимости; а если снаружи, выдаст ошибку. Значение объявленной переменной const нельзя изменить после назначения. Давайте рассмотрим следующий пример, чтобы понять, как используется ключевое слово const.

пример

let a =1;
if (a == 1) {
   const age = 10;
}
console.log(age);

Выход

Uncaught ReferenceError: age is not defined at :5:13

Приведенный выше вывод вызывает ошибку, поскольку возраст константы определяется внутри блока if и доступен в блоке if.

Разберемся с переходом на ES5 с помощью BabelJS.

ES6

let a =1;
if (a == 1) {
   const age = 10;
}
console.log(age);

Команда

npx babel const.js --out-file const_es5.js

Транспортировано на ES6 с помощью BabelJS

"use strict";

var a = 1;
if (a == 1) {
   var _age = 10;
}
console.log(age);

В случае ES5 ключевое слово const заменяется ключевым словом var, как показано выше.

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

Функция стрелки имеет более короткий синтаксис по сравнению с выражением переменной. ее также называют функцией жирной стрелки или лямбда-функцией. У функции нет собственного свойства this. В этой функции ключевое слово function опущено.

пример

var add = (x,y) => {
   return x+y;
}

var k = add(3,6);
console.log(k);

Выход

9

Используя BabelJS, мы перенесем приведенный выше код в ES5.

ES6 - функция стрелки

var add = (x,y) => {
   return x+y;
}

var k = add(3,6);
console.log(k);

Команда

npx babel arrowfunction.js --out-file arrowfunction_es5.js

BabelJS - ES5

Используя Babel, стрелочная функция преобразуется в функцию выражения переменной, как показано ниже.

"use strict";

var add = function add(x, y) {
   return x + y;
};

var k = add(3, 6);
console.log(k);

Классы

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

пример

class Person {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname +"-"+this.lname;
   }
}
var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;

Выход

Siya-Kapoor

ES6 - Классы

class Person {
   constructor(fname, lname, age, address) {
      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   get fullname() {
      return this.fname +"-"+this.lname;
   }
}
var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;

Команда

npx babel class.js --out-file class_es5.js

BabelJS - ES5

С использованием babeljs добавлен дополнительный код, чтобы функциональность классов работала так же, как в ES5 .abelJs гарантирует, что функциональность работает так же, как и в ES6.

"use strict";

var _createClass = function () {
   function defineProperties(target, props) {
      for (var i = 0; i < props.length; i++) {
         var descriptor = props[i];
         descriptor.enumerable = descriptor.enumerable || false;
         descriptor.configurable = true;
         if ("value" in descriptor) descriptor.writable = true;
         Object.defineProperty(target, descriptor.key, descriptor);
      }
   }
   return function (Constructor, protoProps, staticProps) {
      if (protoProps) defineProperties(Constructor.prototype, protoProps);
      if (staticProps) defineProperties(Constructor, staticProps);
      return Constructor;
   };
}();

function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
      throw new TypeError("Cannot call a class as a function");
   }
}

var Person = function () {
   function Person(fname, lname, age, address) {
      _classCallCheck(this, Person);

      this.fname = fname;
      this.lname = lname;
      this.age = age;
      this.address = address;
   }

   _createClass(Person, [{
      key: "fullname",
      get: function get() {
         return this.fname + "-" + this.lname;
      }
   }]);

   return Person;
}();

var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;

Обещания

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

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

Обещания бывают в трех состояниях -

  • в ожидании (начальное состояние)
  • решено (выполнено успешно)
  • rejected(failed)

new Promise()используется для создания обещания. Конструктор обещания имеет один аргумент, который является функцией обратного вызова. Функция обратного вызова имеет два аргумента - разрешить и отклонить;

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

Если задача, выполненная в функции обратного вызова, является успешной, то вызывается функция разрешения; в противном случае вызывается функция отклонения с подробностями об ошибке.

Следующая строка кода показывает вызов структуры обещания -

var _promise = new Promise (function(resolve, reject) {
   var success = true;
   if (success) {
      resolve("success");
   } else {
      reject("failure");
   }
});
_promise.then(function(value) {
   //once function resolve gets called it comes over here with the value passed in resolve
   console.log(value); //success
}).catch(function(value) {
   //once function reject gets called it comes over here with the value passed in reject
   console.log(value); // failure.
});

Пример обещания ES6

let timingpromise = new Promise((resolve, reject) => {
   setTimeout(function() {
      resolve("Promise is resolved!");
   }, 1000);
});

timingpromise.then((msg) => {
   console.log(msg);
});

Выход

Promise is resolved!

ES6 - Обещания

let timingpromise = new Promise((resolve, reject) => {
   setTimeout(function() {
      resolve("Promise is resolved!");
   }, 1000);
});

timingpromise.then((msg) => {
   console.log(msg);
});

Команда

npx babel promise.js --out-file promise_es5.js

BabelJS - ES5

"use strict";

var timingpromise = new Promise(function (resolve, reject) {
   setTimeout(function () {
      resolve("Promise is resolved!");
   }, 1000);
});

timingpromise.then(function (msg) {
   console.log(msg);
});

Для обещаний код не меняется при переносе. Нам нужно использовать babel-polyfill, чтобы он работал в старых браузерах. Подробности о babel-polyfill объясняются в главе babel - poyfill.

Генераторы

Функция генератора как обычно function. Функция имеет специальный синтаксис: функция * с * для функции и ключевое слово yield, которое будет использоваться внутри функции. Это означает, что при необходимости можно приостановить или запустить функцию. Обычные функции не могут быть остановлены в промежутке после начала выполнения. Он либо выполнит полную функцию, либо остановится, когда встретит оператор return. Генератор здесь работает по-другому, вы можете остановить функцию с помощью ключевого слова yield и запустить ее, снова вызвав генератор при необходимости.

пример

function* generatorfunction(a) {
   yield a;
   yield a +1 ;
}

let g = generatorfunction(8);
console.log(g.next());
console.log(g.next());

Выход

{value: 8, done: false}
{value: 9, done: false}

ES6 - Генератор

function* generatorfunction(a) {
   yield a;
   yield a +1 ;
}

let g = generatorfunction(8);
console.log(g.next());
console.log(g.next());

Команда

npx babel generator.js --out-file generator_es5.js

BabelJS - ES5

"use strict";

var _marked = /*#__PURE__*/regeneratorRuntime.mark(generatorfunction);

function generatorfunction(a) {
   return regeneratorRuntime.wrap(function generatorfunction$(_context) {
      while (1) {
         switch (_context.prev = _context.next) {
            case 0:
               _context.next = 2;
               return a;

            case 2:
               _context.next = 4;
               return a + 1;
               
            case 4:
            case "end":
               return _context.stop();
         }
      }
   }, _marked, this);
}

var g = generatorfunction(8);
console.log(g.next());
console.log(g.next());

Итераторы

Итератор в JavaScript возвращает объект JavaScript, у которого есть значение. У объекта также есть флаг с именем done, который имеет значение true / false. Выдает false, если это не конец итератора. Рассмотрим пример и посмотрим, как работает итератор на массиве.

пример

let numbers = [4, 7, 3, 10];
let a = numbers[Symbol.iterator]();
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());

В приведенном выше примере мы использовали массив чисел и вызвали функцию этого массива, используя Symbol.iterator в качестве индекса.

Результат, который мы получаем с помощью функции next () в массиве, выглядит следующим образом:

{value: 4, done: false}
{value: 7, done: false}
{value: 3, done: false}
{value: 10, done: false}
{value: undefined, done: true}

Вывод дает объект со значением и выполняется как свойства. Каждыеnext()вызов метода дает следующее значение из массива и выполняется как false. Значение done будет истинным только тогда, когда элементы из массива готовы. Мы можем использовать это для перебора массивов. Доступны другие варианты, напримерfor-of цикл, который используется следующим образом -

пример

let numbers = [4, 7, 3, 10];
for (let n of numbers) {
   console.log(n);
}

Выход

4
7
3
10

Когда for-of loopиспользует ключ, он дает подробную информацию о значениях массива, как показано выше. Мы проверим обе комбинации и посмотрим, как babeljs переносит их в es5.

пример

let numbers = [4, 7, 3, 10];
let a = numbers[Symbol.iterator]();
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());

let _array = [4, 7, 3, 10];
for (let n of _array) {
   console.log(n);
}

команда

npx babel iterator.js --out-file iterator_es5.js

Выход

"use strict";

var numbers = [4, 7, 3, 10];
var a = numbers[Symbol.iterator]();
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());
console.log(a.next());

var _array = [4, 7, 3, 10];
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;

try {
   for (var _iterator = _array[Symbol.iterator](),
      _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done);
      _iteratorNormalCompletion = true) {
      var n = _step.value;

      console.log(n);
   }
} catch (err) {
   _didIteratorError = true;
   _iteratorError = err;
} finally {
   try {
      if (!_iteratorNormalCompletion && _iterator.return) {
         _iterator.return();
      }
   } finally {
      if (_didIteratorError) {
         throw _iteratorError;
      }
   }
}

Добавлены изменения for-ofцикл в es5. Но iterator.next остается как есть. Нам нужно использоватьbabel-polyfillчтобы он работал в старых браузерах. Babel-polyfill устанавливается вместе с babel, и то же самое можно использовать из node_modules, как показано ниже -

пример

<html>
   <head>
      <script type="text/javascript" src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>
      <script type="text/javascript" src="iterator_es5.js"></script>
   </head>
   <body>
      <h1>Iterators</h1>
   </body>
</html>

Выход

Разрушение

Свойство деструктурирования ведет себя как выражение JavaScript, которое распаковывает значения из массивов, объектов.

Следующий пример объяснит работу синтаксиса деструктуризации.

пример

let x, y, rem;
[x, y] = [10, 20];

console.log(x);
console.log(y);
[x, y, ...rem] = [10, 20, 30, 40, 50];
console.log(rem);

let z = 0;
({ x, y } = (z) ? { x: 10, y: 20 } : { x: 1, y: 2 });
console.log(x);
console.log(y);

Выход

10
20
[30, 40, 50]
1
2

В приведенной выше строке кода показано, как значения присваиваются с правой стороны массива переменным с левой стороны. Переменная с...rem получает все оставшиеся значения из массива.

Мы также можем присвоить значения из объекта слева, используя условный оператор, как показано ниже -

({ x, y } = (z) ? { x: 10, y: 20 } : { x: 1, y: 2 });
console.log(x); // 1
console.log(y); // 2

Давайте сконвертируем то же самое в ES5 с помощью babeljs -

команда

npx babel destructm.js --out-file destruct_es5.js

destruct_es5.js

"use strict";

var x = void 0,
   y = void 0,
   rem = void 0;
x = 10;
y = 20;

console.log(x);
console.log(y);
x = 10;
y = 20;
rem = [30, 40, 50];

console.log(rem);

var z = 0;

var _ref = z ? { x: 10, y: 20 } : { x: 1, y: 2 };

x = _ref.x;
y = _ref.y;

console.log(x);
console.log(y);

Шаблонные литералы

Литерал шаблона - это строковый литерал, в котором разрешены выражения. Вместо одинарных или двойных кавычек используется обратная кавычка (``). Когда мы говорим выражение внутри строки, это означает, что мы можем использовать переменные, вызывать функцию и т. Д. Внутри строки.

пример

let a = 5;
let b = 10;
console.log(`Using Template literal : Value is ${a + b}.`);
console.log("Using normal way : Value is " + (a + b));

Выход

Using Template literal : Value is 15.
Using normal way : Value is 15

ES6 - шаблонный литерал

let a = 5;
let b = 10;
console.log(`Using Template literal : Value is ${a + b}.`);
console.log("Using normal way : Value is " + (a + b));

команда

npx babel templateliteral.js --out-file templateliteral_es5.js

BabelJS - ES5

"use strict";

var a = 5;
var b = 10;
console.log("Using Template literal : Value is " + (a + b) + ".");

console.log("Using normal way : Value is " + (a + b));

Расширенные объектные литералы

В es6 новые функции, добавленные к объектным литералам, очень хороши и полезны. Мы рассмотрим несколько примеров литерала объекта в ES5 и ES6 -

пример

ES5
var red = 1, green = 2, blue = 3;
var rgbes5 = {
   red: red,
   green: green,
   blue: blue
};
console.log(rgbes5); // {red: 1, green: 2, blue: 3}

ES6
let rgbes6 = {
   red,
   green,
   blue
};
console.log(rgbes6); // {red: 1, green: 2, blue: 3}

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

Давайте посмотрим на компиляцию для ES5 с использованием babel.

ES6-расширенный литерал объекта

const red = 1, green = 2, blue = 3;
let rgbes5 = {
   red: red,
   green: green,
   blue: blue
};
console.log(rgbes5);

let rgbes6 = {
   red,
   green,
   blue
};
console.log(rgbes6);

let brand = "carbrand";
const cars = {
   [brand]: "BMW"
}
console.log(cars.carbrand);  //"BMW"

команда

npx babel enhancedobjliteral.js --out-file enhancedobjliteral_es5.js

BabelJS - ES5

"use strict";

function _defineProperty(obj, key, value) {
   if (key in obj) {
      Object.defineProperty(obj, key, {
         value: value, enumerable: true, configurable: true, writable: true
      });
   } else { obj[key] = value; } return obj;
}

var red = 1,
   green = 2,
   blue = 3;
var rgbes5 = {
   red: red,
   green: green,
   blue: blue
};
console.log(rgbes5);

var rgbes6 = {
   red: red,
   green: green,
   blue: blue
};
console.log(rgbes6);

var brand = "carbrand";
var cars = _defineProperty({}, brand, "BMW");

console.log(cars.carbrand); //"BMW"

Свойства по умолчанию, отдыха и спреда

В этом разделе мы обсудим свойства default, rest и spread.

По умолчанию

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

пример

let add = (a, b = 3) => {
   return a + b;
}

console.log(add(10, 20));  // 30
console.log(add(10));      // 13

Давайте перенесем приведенный выше код в ES5 с помощью babel.

команда

npx babel default.js --out-file default_es5.js

BabelJS - ES5

"use strict";

var add = function add(a) {
   var b = arguments.length > 1 >> arguments[1] !== undefined ? arguments[1] : 3;
   return a + b;
};

console.log(add(10, 20));
console.log(add(10));

Отдых

Параметр отдыха начинается с трех точек (...), как показано в примере ниже -

пример

let add = (...args) => {
   let sum = 0;
   args.forEach(function (n) {
      sum += n;
   });
   return sum;
};

console.log(add(1, 2));    // 3
console.log(add(1, 2, 5, 6, 6, 7));   //27

В приведенной выше функции мы передаем n параметров функции add. Чтобы добавить все эти параметры, если это было в ES5, мы должны полагаться на объект arguments, чтобы получить детали аргументов. С ES6,rest it помогает определить аргументы с помощью трех точек, как показано выше, и мы можем перебрать его и получить сумму чисел.

Note - Мы не можем использовать дополнительные аргументы при использовании трех точек, то есть отдыха.

пример

let add = (...args, value) => {    //syntax error
   let sum = 0;
   args.forEach(function (n) {
      sum += n;
   });
   return sum;
};

Приведенный выше код даст синтаксическую ошибку.

Компиляция для es5 выглядит следующим образом -

команда

npx babel rest.js --out-file rest_es5.js

Вавилон-ES5

"use strict";

var add = function add() {
   for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
   }

   var sum = 0;
   args.forEach(function (n) {
      sum += n;
   });
   return sum;
};

console.log(add(1, 2));
console.log(add(1, 2, 5, 6, 6, 7));

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

Свойство Spread также имеет три точки, как и остальные. Ниже приведен рабочий пример, показывающий, как использовать свойство распространения.

пример

let add = (a, b, c) => {
   return a + b + c;
}
let arr = [11, 23, 3];
console.log(add(...arr));   //37

Давайте теперь посмотрим, как приведенный выше код передается с помощью babel -

команда

npx babel spread.js --out-file spread_es5.js

Бабель-ES5

"use strict";

var add = function add(a, b, c) {
   return a + b + c;
};
var arr = [11, 23, 3];
console.log(add.apply(undefined, arr));

Прокси

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

Синтаксис

var a = new Proxy(target, handler);

И цель, и обработчик являются объектами.

  • target - это объект или может быть другим прокси-элементом.

  • обработчик будет объектом со своими свойствами как функциями, которые будут давать поведение при вызове.

Давайте попробуем разобраться в этих функциях на примере -

пример

let handler = {
   get: function (target, name) {
      return name in target ? target[name] : "invalid key";
   }
};

let o = {
   name: 'Siya Kapoor',
   addr: 'Mumbai'
}

let a = new Proxy(o, handler);
console.log(a.name);
console.log(a.addr);
console.log(a.age);

В приведенном выше примере мы определили цель и обработчик и использовали их с прокси. Прокси возвращает объект с парами "ключ-значение".

Выход

Siya Kapoor
Mumbai
invalid key

Давайте теперь посмотрим, как перенести приведенный выше код в ES5 с помощью babel -

команда

npx babel proxy.js --out-file proxy_es5.js

Бабель-ES5

'use strict';

var handler = {
   get: function get(target, name) {
      return name in target ? target[name] : "invalid key";
   }
};

var o = {
   name: 'Siya Kapoor',
   addr: 'Mumbai'
};

var a = new Proxy(o, handler);
console.log(a.name);
console.log(a.addr);
console.log(a.age);