Современное введение в некоторые новые функции ES6 также известно как ECMAScript 6 и ECMAScript 2015.

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

ES2015 важная функция стрелки добавления синтаксиса. Функция стрелки обеспечивает короткий и лаконичный синтаксис для написания функций, а также упрощает поведение этого ключевого слова в javascript. Первым делом мы опускаем ключевое слово function. мы можем просто использовать круглые скобки, за которыми следует знак «больше» и стрелка вправо без пробелов. А в правой части мы написали фигурные скобки, а затем выполняем другие коды внутри этих фигурных скобок.

//Normal function
function sayHello(value) {
    return value;
}//Arrow function
const arrowFunction = (value) => {
    return value;
};

Класс

Чтобы определить класс, используйте ключевое слово class, поддерживаемое именем класса и фигурными скобками. Экземпляр, использующий ключевое слово new, приравнивается к новым объектам. Классы очень похожи на функции. То, что синтаксис класса не вводит новую объектную модель в javascript, это всего лишь синтаксический сахар существующего наследования на основе прототипов.

class Person {}
const p1 = new Person();

Строчная интерполяция

Литералы шаблона заключаются в обратную кавычку (``) вместо двойных или одинарных кавычек. Они обозначены знаком доллара и фигурными скобками (${expression}). Выражения и текст между обратными кавычками (``) передаются.

`string text ${1+2} string text`

Разрушение массива

Деструктурирующий массив состоит в том, чтобы разделить элементы массива. Возьмите элементы из массива и присвойте их отдельным переменным.

const person = ["Jobayer Hossain", 18, "male"];
const [name, age, gender] = person;
console.log(name, age, gender);
// Jobayer Hossain 18 male

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

const person = ["Jobayer Hossain", 18, "male"];
const [, , gender] = person;
console.log(gender);
// male

Разрушение объекта

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

const person = {
    name: "Jobayer Hossain",
    gender: "Male",
};let { name,gender} = person;
console.log(name, gender);
//Jobayer Hossain Male

Параметр по умолчанию в функциях

Параметры функции по умолчанию в ES2015. в Javascript, когда параметр не задерживается, возвращает неопределенное значение.

function sayHello(value) {
    return value;
}
const greetings = sayHello(); //undefined

Теперь в ES2015 мы можем установить параметры по умолчанию в скобках. Укажите значение по умолчанию для параметра с помощью оператора присваивания. Function со значением, которое будет записывать значение, если мы не вызываем его со значением, тогда он возвращает значение по умолчанию. Вот пример.

function sayHello(value = "Hi") {
    return value;
}
const greetings = sayHello(); 
//Hi
const greetings2 = sayHello("Hello Jon how are you?");
//Hello Jon how are you?

Оператор распространения

Спред нужно разделить. Оператор распространения указывается при вызове функции. Спред - это своего рода противоположность оператору rest. в то время как оператор rest принимает переменное количество параметров ar аргументов и помещает их в один массив. Оператор распространения берет массив и разбивает его на отдельные элементы.

function expenseList(...expenseItem) {
    const expensesList = [...expenseItem];
    console.log(expensesList);
}const expenseItem = ["Rent", "Car wash", "Recharge"];
expenseList(...expenseItem);
//[ 'Rent', 'Car wash', 'Recharge' ]

Остаточный параметр

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

function expenseList(...expenseItem) {
    const expenses = [...expenseItem];console.log(expenses);
}expenseList("Rent", "Car wash", "Recharge");
//[ 'Rent', 'Car wash', 'Recharge' ]

Позволять

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

let numb = 50;
function myFunck() {
    if (true) {
        const numb = 12;
        console.log(numb);
    }
}
myFunck(); //12
console.log(numb); //50

const

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

const numb = 50;
numb = 30;
console.log(numb); //Assignment to constant variable.

для .. из

Блок кода внутри цикла будет выполняться один раз для каждого свойства.

//For of
const friends = ["Jon", "Hols", "nidi"];
for (let i of friends) {
    console.log(i);
}
// Jon
// Hols
// nidi
// For in 
const friends = ["Jon", "Hols", "nidi"];
for (let i in friends) {
    console.log(friends[i]);
}
let person = {
    fname: "John",
    lname: "Doe",
    age: 25
};
for (let i in person) {
    console.log(person.age);
}
//25

Экспорт и импорт

Модули могут загружать друг друга и использовать специальные директивы export и import для пересечения функций, вызывать функции одного модуля из другого: поскольку модули поддерживают специальные ключевые слова и функции, мы должны сообщить браузеру, что сценарий следует рассматривать как модуль, используя атрибут <script type="module">.

  • export ключевое слово обозначает переменные и функции, которые должны быть доступны извне текущего модуля.
  • import позволяет импортировать функции из других модулей.
// 📁 sayHi.js
export function sayHi(user) {
  alert(`Hello, ${user}!`);
}
// 📁 main.js
import {sayHi} from './sayHi.js';

alert(sayHi); // function...
sayHi('John'); // Hello, John!

Ref

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

Функция Установить позволяет вводить только уникальные значения.

const set = new Set();
set.add("Mango");
set.add("Mango");
set.add("Banana");
set.add("Banana");
for (let item of set) {
    console.log(item);
}
// Mango
// Banana

карта

Функция map () в своем цикле генерирует все элементы массива и возвращает новый массив на основе преобразования с каждым элементом.

let numsArray = [1, 2, 3, 4];const singleValue = numsArray.map((num) => num + 1);console.log(singleValue);//[ 2, 3, 4, 5 ]

Работа с безымянными параметрами,

До ES2015 мы работали с неизвестными параметрами таким образом. объявить цикл for и бросить цикл для аргументов, а затем вернуть ожидаемый результат. Но возникают некоторые проблемы, когда мы переходим к получению конкретного параметра, на этот раз это первый цикл в аргументах, после которого он возвращается. После выпуска ES2015 в Javascript появился оператор rest, который упрощает задачу.

function expenseList() {
    const expenses = [];
    for (i in arguments) {
        expenses.push(arguments[i]);
    }
    console.log(expenses);
}expenseList("Rent", "Car wash", "Recharge");
//[ 'Rent', 'Car wash', 'Recharge' ]

Подъем

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

getAge(12); //12 Years old
function getAge(age) {
    console.log(age, "Years old");
}function getAddress(address) {
    var city;
    if (address) {
        city = address;
        console.log(city);
    }
}
getAddress("Dhaka"); //Dhaka

Область действия блока

Локальное находится внутри функции, а глобальное - где угодно внутри скрипта. Доступ к глобальной переменной можно получить внутри функций. Это то, что они представили в ES6. Все, что было бы в фигурных скобках, - это блок.

function myFunck() {
    if (true) {
        const numb = 12;
        console.log(numb);
    }
}
myFunck(); //12function myFunck() {
    if (true) {
        const numb = 12;
    }
    console.log(numb);
}
myFunck(); // numb is not defined

Метод класса

В ES2015 тело класса может содержать только методы, но не свойства. Есть 3 типа методов:

  • Конструктор Метод
  • Статический метод
  • Метод прототипа

Конструктор Метод

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

class Person {
    constructor(name) {
        this.name = name;
        console.log(this.name + "In constructor");
    }
}const p1 = new Person("Jobayer");
//JobayerIn constructor

Статический метод

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

class Person {
    constructor(name) {
        this.name = name;
        console.log(this.name + "In constructor");
    }
    static staticMethod() {
        console.log("This is inside static method");
    }
}const p1 = new Person("Jobayer");
//JobayerIn constructor
Person.staticMethod();
//This is inside static method

Метод прототипа

Этот метод можно вызывать с каждым объектом.

class Person {
    constructor(name) {
        this.name = name;
    }getName() {
        console.log(this.name);
    }
}const p1 = new Person("Jobayer");
p1.getName(); //Jobayer