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

Автор оригинала: Cem Eygi.

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

Так что же новое в ES6? Давайте посмотрим.

1. Пусть и const ключевые слова

ES6 приносит два новых ключевых слова для переменной декларации: Пусть и Const Отказ

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

var name = 'Cem';

В ES6 мы используем Пусть ключевое слово вместо этого.

Почему «пусть» вместо «var»?

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

var word = 'I am global';

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

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

console.log должен распечатать глобальный Строка: «Я глобальный» Отказ Потому что второе декларация var это Местный строка и console.log за пределами Если блок :

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

Давайте попробуем еще раз с Пусть :

let word = 'I am global';

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

console.log(word); // This time what do you expect?

На этот раз глобальный Строка напечатала, как мы ожидали, Пусть Решил проблему сферы применения.

Еще одна проблема заявления «VAR»

Мы можем повторно назначать переменные с помощью var и Пусть Отказ Но Пусть не позволяет нам Redeclare Те же переменные:

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

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

Const ключевое слово

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

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

const birthYear = 1990;

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

Если вы попытаетесь изменить или Redeclare A Const Переменная, она даст ошибку:

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

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

Шаблонные литералы – один из новых синтаксисы ES6, Для создания строк и печати динамических переменных.

Чтобы создать строку, используйте Back Tics (“) вместо одиночных или двойных кавычек:

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);

ES6 Way:

console.log(`Hello, my name is ${name}, I'm ${age} years old and I'm a ${profession}.`);

Мы можем сделать гораздо больше с шаблонными литералами, и вы можете проверить здесь Больше подробностей.

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

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

Функция JavaScript:

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

ES6 Функция:

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

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

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

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

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

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

У нас есть массив номеров: Пусть NoMaRRay = [1, 19, 21, 85, 42]

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

Чтобы получить значения (цифры) из массива:

console.log(...numberArray);

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

Чтобы объединить массив с другим массивом:

let charArray = ['a','b','c'];

charArray.push(...numberArray);

console.log(charArray);

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

Оператор отдыха – Использование для функций

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

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

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

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

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

5. Импорт Экспорт

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

Посмотрим, как это работает:

Во-первых, мы создаем функцию ES6 и экспорт Это с экспорт ключевое слово.

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

После этого, чтобы импортировать Myфункция в другой файл, нам нужно определить его Путь папки, имя файла и Импорт ключевое слово.

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

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

myFunction();

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

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

Спасибо за чтение и для вашей поддержки!:)

Оригинал: “https://www.freecodecamp.org/news/a-general-review-of-ecmascript-2015-es6-f524d5f8c095/”