BabelJS — функции Transpile ES6 для ES5

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

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

• Let + Const
• Функции стрелок
• Классы
• обещания
• Генераторы
• деструктурирующие
• итераторы
• Шаблон Literalst
• Улучшенный объект
• Свойства по умолчанию, Rest & Spread

Let + Const

Пусть объявляет локальную переменную области видимости в 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. То же самое относится к переключателю, циклу for и т. Д.

Теперь мы увидим преобразование кода в 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, как показано выше.

Функции стрелок

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

пример

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. BabelJs гарантирует, что функциональность работает так же, как и в 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. По умолчанию при создании обещания состояние обещания находится в состоянии ожидания.

Обещания приходят в трех штатах —

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

new Promise () используется для создания обещания. Конструктор 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 Promise Пример

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-polyfills объясняются в главе babel — poyfill.

Генераторы

Функция генератора похожа на нормальную функцию . Функция имеет специальную синтаксическую функцию * с * для функции и ключевого слова 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 () дает следующее значение из массива и выполняется как ложное. Значение done будет true только тогда, когда элементы из массива будут готовы. Мы можем использовать это для перебора массивов. Доступно больше опций, таких как цикл for-of, который используется следующим образом:

пример

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

Выход

4
7
3
10

Когда цикл for-of использует ключ, он дает подробную информацию о значениях массива, как показано выше. Мы проверим обе комбинации и посмотрим, как 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;
      }
   }
}

В es5 добавлены изменения для цикла for-of . Но 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);

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

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

пример

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"

Свойства по умолчанию, 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));

Остальное

Параметр Rest начинается с трех точек (…), как показано в примере ниже —

пример

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, мы должны полагаться на объект аргументов, чтобы получить детали аргументов. С ES6, rest помогает определить аргументы с тремя точками, как показано выше, и мы можем пройти по нему и получить сумму чисел.

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

пример

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 является объектом или может быть другим прокси-элементом.

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

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 —