ES6 Удивительность (Часть I)

Автор оригинала: Johnson Ogwuru.

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

Для этой части мы смотрели на следующие концепции и синтаксис:

1. Шаблонные строки
2. Пусть и константы
3. Для …
4. Функции стрелки
5. Распространение оператора

1. Шаблонные строки: ES6 имеет два новых вида литералов: Шаблонные литералы и Тегированные шаблонные литералы Отказ Шаблон литерал Позволяет использовать несколько строк строк и выражения. `

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

Прилагаются задней галочкой вместо двойных или одиночных кавычек, а выражения могут быть указаны знаком доллара и фигурными скобками $ {..}. Ниже приведены примеры шаблонных литералов на работе;

const firstname = 'johnson';
console.log(`Hello ${firstname},
How are you?`);

Приведенный выше код эквивалентен следующему стандартному коду ES5;

var firstname = "Johnson";
console.log('Hello '+firstname+', \n How are you?');

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

const currentYear = 2018; let DOB = 1980; console.log(`Subtracting your DOB ${DOB} from the current year, your are ${currentYear-DOB}years old`);

Помеченные шаблонные литералы;

let a = 1;
let b = 2; let yourString = function(strArray, ...val){ console.log(strArray); console.log(val);
} yourString `Hello ${a},${b} world man ${a+b}`;

Помеченный шаблон литерал , является более продвинутой формой шаблонных литералов. С ними вы можете изменить вывод шаблонных литералов с использованием функции. Первый аргумент содержит массив строковых литералов («Hello», «Мир», «Человек» и «» в приведенном выше примере). Второй и каждый аргумент после первого, являются значениями обработанных (или иногда называемых приготовленных) выражений замещения («1», «2», «3») в конце вашей функции возвращает вашу манипулируемую строку.

Некоторые другие строковые функции в ES6 есть, включить , Startswith , Эндонсвит Я бы объяснил их только с примерами того, как они используются, поэтому вы могли бы лично скопировать и запустить их на вашей консоли.

var stringWord = "Hello World";
stringWord.startsWith("Hell"); var stringWord = "Hello world";
stringWord.endsWith("rld");

Запуск вышеуказанных разных кодов Возвращает логическое значение правда Отказ

var anyArray = [1,2,4];
anyArray.includes(1);

2. Пусть и константы:

Пусть: Пусть Заявление объявляет локальную переменную блокируйте локальную переменную, а не функциональный уровень областей, как var Отказ

let year = 2018;
let dob = 1970; function calcAge(){ let age = year-dob; if (age > 19){ let age = "You re young"; console.log(age); } console.log(age);
} calcAge();

Redeclaring Одинаковая переменная в пределах одной и той же функции или блоки схватывает A SyntaxError , а также вы не можете использовать переменную вне его объема; Как сказать, пытаясь получить доступ к возраст за пределами Смысл Функция вернет бы Ненаследованная переменная ошибка Отказ

Константы:

Const Работает как Пусть , но переменная, которую вы объявляете, должны быть немедленно инициализированы, со значением, которое не может быть изменено впоследствии. Const Декларация создает ссылку только на чтение на значение. Помните, что значение константы не может изменить повторное назначение, и он не может быть переписан.

Наличие Const.14 пытаясь переназначить PI, скажем PI.12 вернет Ошибка неисследованного типа Отказ Так же, как Пусть , Const Доступ к доступу за пределы его объема, давайте возьмем пример, чтобы проиллюстрировать это и, пожалуйста, попробуйте запустить этот код, чтобы лучше понять.

const PI = 3.14; function fun(){ const PI = 3.121; if(true){ const PI = 3.416; console.log(PI) } console.log(PI); } console.log(PI); fun();

3. for..of: для Это новый цикл в ES6, который заменяет как для-в и foreach () и поддерживает новый протокол итерации. Синтаксис выделен ниже;

for(variable of iterable){ statement
}

Итерация на массиве;

let values = [1,34,20];
for (let value of values){ console.log(value);
}

Итерация по строке;

let color = "red";
for(let item of color){ console.log(item);
}

4. Функция стрелки:

Функции стрелки всегда анонимны. Примеры ниже:

Функция без каких-либо параметров:

var intro = () => "Welcome";

Приведенный выше код эквивалентен ниже:

var intro = function(){ return "welcome";
}

Функция с 1 параметром:

var multiplyBy2 = value1 => value1 * 2;
console.log(multiplyBy2(4));

Приведенный выше код эквивалентен ниже:

var multiplyBy2 = function(value1){ return value1 * 2;
}
console.log(multiplyBy2(4));

Функция с более чем 1 параметром:

var addBy = (value1,value2) => value1 + value2;
console.log(addBy(10,30));

5. Распространение оператора: Ожидается, что Spread Syntax позволяет увеличить выражение в местах, где ожидаются несколько аргументов (для вызовов функций) или несколько переменных (для деструктивных заданий).

Пример: Общее использование массива в качестве аргументов к функции, как показано ниже:

function myFunctions(x,y,z){ console.log(x); console.log(y); console.log(z);
}
var args = [0,1,2];
myFunctions(args);

С ES6 распространяется Теперь вы можете написать выше как:

function myFunctions(x,y,z){ console.log(x); console.log(y); console.log(z);
} myFunctions(...args);

Это за сегодня парни.