4 новых синтаксиса в JavaScript 6

Версия JS ES6 широко поддерживалась основными браузерами, и многие фронтальные рамки также использовали ES6, и Babel можно использовать для совместимости, поэтому ES6 вступил в стадию приложения.

Если вы не знакомы с ES6, вот 4 простых основных использования, которые могут помочь вам быстро понять ES6

1. Объявите переменные, используя let и const

В традиционном коде ES5 существует две основные проблемы с переменными объявлениями

(1) Отсутствие поддержки для блоков

(2) Константы не могут быть объявлены

В ES6 эти две проблемы были решены, добавив два новых ключевых слова: пусть и const

Используйте пусть для блока

 var a = 1; if (true) {var b = 2;} console.log (a); // 1 -anconsole.log (b); // 2

В ES5 переменная B, объявленная в блоке, можно получить за пределами блока.

 // в es6let a = 1; if (true) {let b = 2;} console.log (a); // 1 -anconsole.log (b); // referenceerror: b не определено

В ES6 переменная B объявлена с использованием let In, если блок не может быть доступен за пределами блока

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

 var a = []; for (var i = 0; i <5; i ++) {a.push (function () {console.log (i);});} a.foreach (function (value) {value ();});

Результаты прогона: 5, 5, 5, 5, 5

Используйте пусть, чтобы объявить переменную I в цикле

 var b = []; for (let i = 0; i <5; i ++) {b.push (function () {console.log (i);});} b.foreach (function (value) {value ();});

Результаты прогона: 0, 1, 2, 3, 4

Определить константы, используя const

 // in es5var my_constant = true; my_constant = false;

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

 // в es6const my_constant = true; my_constant = false; // uncaught typeerror: назначение постоянной переменной

Постоянно объявлено в ES6 не может быть изменено

2. Шаблон строка

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

var url = 'http: // www.' + domain + '.com/' + path + '?' + Queryparams;

ES6 обеспечивает краткое использование

let url = `http: //www.$ {domain} .com/$ {path}? $ {Queryparams}`;

3. Новый набор и объекты карты

В ES5 мы часто используем массивы для хранения динамических данных, например,

 var collection = []; collection.push (1, 2, 1); console.log (collection); // [1, 2, 1]

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

 Функция addTocollection (collection, value) {if (collection.indexof (value) <0) {collection.push (value)}}}}

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

 let collection = new Set (); collection.add (1); collection.add (2); collection.add (1); console.log (collection); // set {1, 2}

SET также может удобно пройти набор и обработать данные в наборе.

ES5 обычно используется для хранения данных пары ключей, например,

 var collection = {}; collection.a = 'abc'; collection.b = 'xyz';

ES6 имеет карту, поэтому его можно использовать

 let collection = new Map (); collection.set ('a', 'abc'); collection.set ('b', 'xyz');

Триверс также очень прост

 collection.foreach (function (value, key) {console.log (key + ":" + value);}); console.log (collection.size);

4. Функциональные параметры

Есть две новые функции для параметров функций в ES6

значение по умолчанию

 Функция Dosomething (someObject) {console.log (someObject);}

Здесь может быть ошибка во время выполнения, и параметры необходимо проверить.

 Функция dosomhething (ofomeObject) {if (someObject === undefined) {someObject = {}; } console.log (someObject);}

Этот тип кода проверки очень распространен. Вы можете установить значения по умолчанию для параметров в ES6, что намного проще.

 Функция dosomething (ofomeObject = {}) {console.log (ofomeObject);}

Разрушение объекта

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

 Функция DoSomhething (ofomeObject) {var One = someObject.propone; console.log (один); var two = cheepobject.proptwo; console.log (два); var three = someObject.propthree; console.log (три);}

ES6 позволяет нам деконструировать параметры объекта непосредственно в параметрах

 функция dosomething ({propone, proptwo, propthree}) {console.log (propone); console.log (proptwo); console.log (propthree);}

Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.