Scraper Обновлено: 3 October, 2019

Важные функции ECMAScript 6 (функции let, const и arrow)

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

Некоторые из важных функций, представленных в ES6:позволять,Constа такжефункция стрелкикоторый может быть использован для объявления переменных и функций соответственно. В этой статьевар,позволятьа такжеConstбудет обсуждаться в отношении их объема, использования и подъема. Также обсудимфункция стрелкиэто преимущество перед обычной JavaScript-функцией и ее широкое применение в современной разработке кода.

JavaScript позволяет:

Ключевое слово let позволяет нам объявлять переменную с областью видимости блока. Основное различие междувара такжепозволятьявляется то, что вместо того, чтобы быть функцией области,позволятьнаходится в области блока. Это означает, что переменная, созданная спозволятьключевое слово доступно внутриблокЧто он был создан как и любойвложенные блоки, Здесь «блок» означает все, что окружено фигурной скобкой{},напримервпетляили любойУсловный оператор, Давайте разберемся с этим на примере.

let greeting = "Hi from global scope";
let counter = 2;

   if (counter > 1) {
        let greetMsg = "Hello from inside block";
        console.log(greetMsg);//"Hello from inside block"
    }
   console.log(greetMsg) // greetMsg is not defined

Здесь, используяgreetMsgвне его блока (фигурные скобки, где он был определен) возвращает ошибку. Это потому, что переменные, созданные спозволятьимеют ограниченную область видимости.

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

let greetMsg = "Hello World";
greetMsg = "Hello World again";// works fine

пока это вернет ошибку:

let greetMsg = "Hello World";
let greetMsg = "Hello World again";//error: Identifier 'greetMsg' has already been declared

Какие именно различия междупозволятьа такжевар?

Давайте обсудим их один за другим:

Скоринг правила:, Переменные, объявленныеварключевые слова попадают в область непосредственного тела функции (т.е.сфера действия) где как, переменные объявленыпозволятьрассчитаны на непосредственноевшитаблок обозначен{}(то естьобъем блока). Причина введенияпозволятьключевое слово, потому что область действия функции сбивала с толку и была причиной основных ошибок в JavaScript.
Подъемно:Переменные, определенные сварявляютсяводрузилик вершине их функциональной / локальной области (если объявлено внутри функции) или к вершине их глобальной области (если объявлено вне функции). Свар,переменная может быть использована до того, как она объявлена. Переменные, определенные спозволятьне подняты наверх. С помощьюпозволятьпеременная до ее объявления приведет кОшибка ссылки, Переменная находится в «временной мертвой зоне» от начала блока до его объявления.
Создание глобального свойства объекта:В отличие отвар,позволятьне создает свойства для глобального объекта.
Повторное заявление:В строгом режиме, свармы можем повторно объявить ту же переменную в той же области, в то время какпозволятьподнимаетСинтаксическая ошибка,

JavaScript const:

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

const shoeSize = 30; 

shoeSize = 36; // SyntaxError
shoeSize++; // again a SyntaxError

Мы не можем объявитьConstне придав этому значения.Constпеременным должно быть присвоено значение, когда они объявлены:

const newShoeSize; 
newShoeSize = 37;// SyntaxError

Объявление переменной сConstпохож напозволятькогда дело доходит доБлок Сфера,

var num = 10; // num is 10
{
 const num= 2;// num is 2 (block-scope)
}
// Here num is 10, as const is not globally available

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

For Primitive type:
const PI = 3.141592653589793;
PI = 3.14;      // This will give an error
PI = PI + 10;   // This will also give an errorFor constant object:
// We can create a const object:
const car = {type:"Fiat", model:"500", color:"white"};

// We can change a property:
car.color = "red";

// We can add a property:
car.owner = "Johnson";

Но мы не можем переназначить постоянный объект:


const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"};    // ERROR

Точно так же мы можем изменить элементыпостоянный массив, Пока мы не можем переназначить константный массив.

Какпозволять,Constобъявления поднимаются наверх, но не инициализируются.вар,позволятьа такжеConstвсе подняты до предела своей области, но покаварпеременные инициализируются сне определено,позволятьа такжеConstпеременныене инициализирован,

В то время каквара такжепозволятьможет быть объявлено без инициализации,Constдолжен быть инициализирован во время объявления.

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

Функции стрелки, также называемые «жирной стрелкой», были введены в ES6 как новый синтаксис для написания функций JavaScript. Функция стрелки - более краткий синтаксис для написания выражений функций. Они используют новый токен,=>, который выглядит как толстая стрела.

//arrow function with no parameters
var a1 = () => 1;//arrow with multiple parameters requires parentheses
var a4 = (x, y) => 1;

Функции стрелок возвращают значение по умолчанию. Им не нужно ничего возвращать, но когда функция не должна считаться недействительной (т.е. ожидается возвращаемое значение), рекомендуется возвращать какое-то значение по умолчанию.

hello = () => “Hello World!”;

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

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

nums.forEach(v => {
if (v % 5 === 0) 
fives.push(v) 
})

эта привязка:

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

var self = this;
element.onclick = function() {
  self.doSomething();
};

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

element.onclick = () => this.doSomething()

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

//ES6 with arrow function
arr.map(item => item * 5);//ES5 with regular function
arr.map(function(item) {
  return item * 5;
}

Вывод

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