Общий обзор ECMAScript 2015 (ES6)

obshhij obzor ecmascript 2015 es6

ES6 – это более новая стандартизация/версия Javascript, выпущенный в 2015 году. Важно изучить ES6, поскольку у него много новых функций, которые помогают разработчикам легче писать и понимать JavaScript. Современные фреймворки, такие как Angular и React, разрабатываются вместе с ES6. Его синтаксис тоже отличается от классического JavaScript.

Итак, что нового в ES6? Давай посмотрим.

1. let & const ключевые слова

ES6 предлагает два новых ключевых слова для объявления переменных: let и const.

Раньше мы имели только var ключевое слово в JavaScript для объявления переменных:

var name="Cem";

В ES6 мы используем let ключевое слово.

Почему ‘let’ вместо ‘var’?

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

var word = 'I am global';

if(true) {  
  var word = 'I am local'; 
}

console.log(word); // What do you expect here as result?

The console.log следует напечатать глобальный строка: 'I am global'. Потому что вторая декларация var word = 'I am local' это местный строка и console.log находится за пределами если блокировать:

cVxBMtGJhUv9UZBuGq4uZc2KSv3cskx-saW5
Как ни странно, локальная переменная отпечатана.

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

Попробуем еще раз с let:

let word = 'I am global';

if(true) {
  let word = 'I am local'; 
}

console.log(word); // This time what do you expect?
Dwd8aTI-M0eMOKLLrOB5en7-1SGdc9M2Jx0j
Результат использования ‘let’

В этот раз глобальный строка напечатана, как мы ожидали, let решили проблему-сферу.

Другая проблема оператора ‘var’

Мы оба можем повторно назначить переменные с помощью var и let. но, let не позволяет нам повторно заявить те же переменные:

var number = 1;
var number = 2;

console.log(number); // No errors here, 2 gets printed

Попробуем еще раз с разрешает:

let number = 1;
let number = 2;

console.log(number); // let doesn't allow redeclaration
VTuifL3QukwZgVbmITOH4rhI1LMpy5ojjfgD
Повторное объявление let вызывает ошибку:

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

Ключевое слово const

Давайте продолжим с const ключевое слово. const средства постоянный.

«Постоянное: то, что не меняется».

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

const birthYear = 1990;

birthYear = 2000; // You cannot re-assign a constant variable

Если вы попытаетесь изменить или повторно объявить a конст переменной, это выдаст ошибку:

xVbUNLdmjjbQJkrniCDmf-eyAl4JVuJgB4XV
Повторное назначение переменной const вызывает ошибку

Использование const улучшает качество кода. Используйте его только тогда, когда вы уверены, что ваша переменная не изменится позже.

2. Литералы шаблона

Литералы шаблона являются одними из новых синтаксис ES6, для создания строк и печати динамических переменных.

  • Для создания строки используйте задние тики ( « ) вместо одинарных или двойных кавычек:
let oldWay = 'A word';  // JS Way

let newWay = `A word`;  // ES6 Way
  • Используйте синтаксис интерполяции: ${ выражение } для упрощения конкатенации строк и создания динамических переменных

Давайте определим некоторые переменные и используем старые и новые методы печати:

let name="Cem";
let age = 28;
let profession = 'Software Developer';

Предыдущий способ JavaScript:

console.log("Hello, my name is " + name + ", I'm " + age + " years old and I'm a " + profession);
DmqlgNPaa7B74Bnqumk3t3CseyQPxmahquIy
Вывести со знаками +

Способ ES6:

console.log(`Hello, my name is ${name}, I'm ${age} years old and I'm a ${profession}.`);
Uzd - CtKLfVlzdQujxl8VbQCuMcVZfs-pHTP
Вывод с шаблонными литералами

Мы можем сделать гораздо больше с помощью шаблонных литералов, и вы можете проверить здесь, чтобы узнать больше.

3. Функции стрелки

Функции со стрелками используют жирную стрелку => а не function ключевое слово при определении функции:

Функция JavaScript:

var sum = function addition (firstNum, secondNum) {
    return firstNum + secondNum;
}

Функция ES6:

let sum = (firstNum, secondNum) => { return firstNum + secondNum };

Мы также можем опустить return ключевое слово, если наша функция не возвращает a кодовый блок

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

4. Операторы спреда и отдыха

Вы когда-нибудь видели три точки ... в программировании? Это называется распространенный синтаксис.

Оператор распространения – использование для массивов

У нас есть массив чисел: let numberArray = [1, 19, 21, 85, 42]

Мы можем использовать оператора распространения:

  • чтобы получить значение (числа) из массива:
console.log(...numberArray);
Z1e3qPXYxxSSKjLlMS6Q2Lv3yTPHzKK2YAsD
Числа теперь вне массива

Использование оператора распространения не влияет на сам массив.

  • чтобы объединить массив с другим массивом:
let charArray = ['a','b','c'];

charArray.push(...numberArray);

console.log(charArray);
bGTjyMyTgSrg82mgjGSEKGTmhWN3pNa0kq5g
значение в numberArray добавлено в charArray

В противном случае, numberArray будет добавлен как четвертый элемент, непосредственно внутри charArray:

P2vv2Sq1-oWKuRDrupnWS9N4XZgdHZZGXBgt
Массив в массиве, без оператора распространения

Rest Operator – использование для функций

Другое использование трех точек ... предназначены для параметров функции.

А параметр после трех точек превращается в an массив который будет содержать остальные параметры, которые называются оператор отдыха.

function count (...counter) { // parameter becomes an array
  console.log(counter.length);
}

count(); // 0
count(10); // 1
count(1, 10, 24, 99, 3); // 5

Поскольку ...counter теперь массив, мы можем получить его длину. Все параметры, которые предоставляются count() функции теперь являются значениями счетчик массив:

dCKC-Kbux4M-bU7BPbMqDx4MapabhlxwTGic
Количество параметров = длина массива

5. Импорт и экспорт

Еще одна новая функция ES6 состоит в том, что она позволяет нам импорт-экспорт наши классы, функции и даже переменные в другие части (файлы) нашего кода. Такой подход очень помогает нам программистам, когда мы хотим разбить код на более мелкие части. Это повышает читабельность и поддержку кода проекта в будущем.

Давайте посмотрим, как это работает:

Сначала мы создаем функцию ES6 и экспорт это с export ключевое слово.

export let myFunction = () => { console.log('I am exported!'); }

После этого для импорта myFunction в другой файл, нам нужно определить его путь к папке, имя файлаи import ключевое слово.

import { myFunction } from './yourFolderPath/fileName';

Наконец, вызовите функцию импортируемого файла и используйте ее.

myFunction();

Вот как мы можем разбить наш код на меньшие части с помощью экспорта и импорта. Мы также можем импортировать другие модули и услуги, например HttpService, маршрутизатор, Axios, и Bootstrap использовать их и в нашем коде, после установки их в нашем узлы_модули.

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

Спасибо, что читаете и за поддержку! 🙂

Добавить комментарий

Ваш адрес email не будет опубликован.