Краткое руководство по разработке ES6 - Часть 1

Область видимости, циклы, структуры данных и многое другое

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

ES9 обсуждается, но ES6 до сих пор полностью не поддерживается всеми браузерами. Вы можете ознакомиться с подробной таблицей совместимости на GitHub. ECMAScript (ES) - это стандарт, а JavaScript - самый популярный язык, используемый для реализации этого стандарта и построения на его основе.

Определение объема

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

Возьмем пример (ES5):

function myFunction() {
 var myValue = "I am value";
 if (1) {
   let myValue = "I am another value";
   console.log(myValue)
 }
 console.log(myValue)
}

Вывод:
Я другое значение
Я другое значение

Однако я не хочу, чтобы мой внешний оператор console.log (как в приведенном выше примере) печатал значение внутренней переменной. Обычно это нежелательное поведение.

В ES5 есть две области действия: глобальная и функциональная.

Объем

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

Например:

function myFunction(){
    var myValue = "Don't touch, I'm a value"
}
console.log(myValue)

Вывод:
ReferenceError: myValue не определено.

И это потому, что мы пытаемся получить доступ к значению переменной myValue вне ее области видимости. Хотя в ES5 этого можно было добиться, используя IIFE, это не так просто.

В ES6 введено ключевое слово let, имеющее локальную область видимости (да, в следующем разделе есть другое).

let не является заменой var, но считается хорошим стандартом программирования в ES6 и TypeScript, потому что он делает области переменных предсказуемыми и упрощает рассуждение.

Машинопись

Стандартный язык ES6, extension.ts

Давайте посмотрим, как это решит более раннюю проблему (ы) (ES6).

function myFunction() {
 var myValue = "I am value";
 if (1) {
   let myValue = "I am another value";
   console.log(myValue)
 }
 console.log(myValue)
}

Вывод:
Я другая ценность
Я ценность

Вы должны чувствовать себя успешным !! Теперь попробуйте цикл, используя let для себя.

const

Еще одно интересное дополнение - const. const обеспечивает механизм неизменности, что означает, что переменные не меняются с течением времени.

Например:

const myConst = "my const value";
myConst = "my another const value";
Output:
VM47:1 Uncaught SyntaxError: Identifier 'myConst' has already been declared
    at <anonymous>:1:1

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

Например:

const myConstObject = {};
myConstObject.constProp = "Const Value";
console.log(myConstObject)
		
Output:
	{constProp: "Const Value"}

Зацикливание

Если вы часто используете for…in foreach циклы, возможно, вы скептически относитесь к введению for…of, но поверьте мне, он вам понравится!

Итак, почему прибыл for…of? Определенно у for…of есть что-то лучше, чем for…in. Давай проверим.

Для… в (ES5)

var myCoins = [1,2,5,10];
for( let coin in myCoins){
	console.log(typeof(coin));
}
			
Output:
	string
	string
	string
	string

Да, вы правильно прочитали. for…in цикл возвращает числовой массив в виде строковых значений. Это, очевидно, может сбивать с толку и создавать ошибки, которые трудно отследить.

Для и для каждого (ES5)

Давайте посмотрим на базовый пример, чтобы показать, как работает forEach:

var myCoins = [1,2,5,10,20]
myCoins.forEach(function(value){
console.log(value);
});
Output:
1,2,5,10,20

Да, верно, здесь нет проблем с преобразованием числа в строку. Но есть проблема. Вы не можете выйти из цикла с помощью оператора break и перейти к следующей итерации с помощью оператора continue.

для… из

Представленный в ES6, for…of позволяет избежать проблем, связанных с циклом for…in, он работает с операторами break и continue и даже позволяет выполнить возврат из включающего блока.

var myCoins = [1,2,5,10];
for( let coin of myCoins){
	console.log(typeof(coin));
}
			
Output:
	number
	number
	number
	number

Структуры данных

Начнем с наиболее часто используемых, например Set и Map.

Установленный

Давайте быстро рассмотрим некоторые важные пункты, касающиеся Set.

• Вы не храните пары ключ-значение, как объекты в Set, только ключи.
• Никакие повторяющиеся значения не содержат отдельных элементов / объектов.

Пример:

let myCoinSet = new Set();
myCoinSet.add('foo');
myCointSet.size
// 1
myCoinSet.add('foo');
myCoinSet.size
//1

Set получает на вход итерационные параметры. Пример:

let myCoinSet = new Set([1, 2, 3]) - correct
let myCoinSet = new Set(1,2,3) -wrong

Или вы можете сделать что-то вроде:

Let myCoinSet = new Set();
myCoinset.add(1) -correct
myCoinSet.add(1,2,4) -wrong
myCoinSet.add([1,4,5]) -wrong

Set не поддерживает доступ к элементам в произвольном порядке, как это делают массивы. Например:

console.log(myCoinSet[1]) -wrong

Некоторые общие операции Set:

• Удалить элемент: myCoinSet.delete(2).
• Очистите набор: myCoinSet.clear();

Перебрать Set довольно просто. Например:

let myCoinSet = new Set([1, 2, 5, 10])		
for (let coin in myCoinSet){
console.log(coin)
}
Output:
	1, 2, 5, 10

карта

Давайте быстро рассмотрим некоторые из важных пунктов на карте.

• Карта - это пара "ключ-значение".
• Порядок поддерживается по мере их сохранения, поэтому, когда мы помещаем цикл, он печатается в том же порядке.

Давайте проделаем несколько основных операций, используя Map.

Создание Map:

let myMap = new Map();

Добавление пар:

let myMap = new Map();
myMap.set("Name", "Carlos")
myMap.set("Occupation", "Engineer" )

Другой способ добавления:

let myMap = new Map([
 [ "Name", "Alex" ],
 [ "Occupation", "Test Engineer" ],
 [ "Company", "Modus Create" ]
]);

Получить элемент по ключу:

map.get("Name")
// Carlos

Проверка наличия ключа:

map.has(“Name”)
//true

Удаление по ключу:

map.delete(“Name”)

Проверка размера:

map.size()

Очистить всю карту:

map.clear()

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

let m = new Map([
 ["Name", "Chris"],
 ["Occupation", "Technical Manager"],
 ["Company", "Modus Create"],
 ["Country", "USA"]
]);
1-	for(let keys of m.keys()){
	console.log(keys)
	}

Выход:

значение: Имя Ключ: Крис
значение: Профессия Ключ: Технический менеджер
значение: Ключ компании: Способ создания
значение: Ключ страны: США

Чем объекты отличаются от карты

В объектах вы обязаны использовать простые ключи в виде строк, чисел или символов, но в Map вы можете использовать даже массивы и объекты.

Карта - это экземпляр объекта, а не наоборот.

Функции как значения невозможны в Map, но в Object это возможно. Пример:

var person = {
 name: "Carlos",
 workingDays() {
   console.log("25 days average")
 }
}

Использование объектов предпочтительнее Map, если в вашем приложении много операций с JSON.

Каков ваш опыт использования объектов и Maps? Поделитесь своими сценариями, в которых один из них более эффективен, чем другой. Какую проблему нельзя было решить одним, а другим - нет?

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

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