1.ключевые слова let и const
Оба ключевых слова позволяют пользователю определять переменные, с одной стороны, ключевое слово let похоже на слово var и может быть изменено во всем коде.
let a = 10;
console.log(a) //10
С другой стороны, ключевое слово const позволяет пользователю определить константу. В отличие от let и var, вы не можете изменить или переназначить эту переменную.
const PI = 3.14;
console.log(PI); //3.14
В случае объектов или массивов
const obj1 = {name : "John", city:"NewYork"};
obj1.name = "Mike"; //this is valid
obj1 = {name : "Mike", city: "NewYork"} //this is not valid
const arr1 = [1,2,3];
arr1.push(4); //valid
arr1.pop(); //valid
arr1 = [1,2] //not valid
Просто помните, что вы не можете переназначать.
Оба метода блочные, допустим, вы определяете одну переменную в блоке if, используя ‘var’, она будет действительна во всей функции. Но если вы определите переменную с помощью ‘let’ или ‘const’, она будет действительна только в этом конкретном блоке if.
function something() {
if(true) {
var a = 10;
}
console.log(a); //prints 10
}
something();
Если вы используете const или let
function something() {
if(true) {
let a = 10;
}
console.log(a); //Reference Error
}
something();
2.Arrow Function
Она обеспечивает более лаконичный синтаксис для написания выражений функций, удаляя ключевые слова ‘function’ и ‘return’.
Стрелочные функции определяются с помощью обозначения жирной стрелки ( => ).
//Arrow function
let sum = (a,b) => a+b;
console.log(sum(5,10)); //prints 15
Но если в теле функции несколько выражений, их нужно заключить в фигурные скобки. Также нужно использовать оператор ‘return’, чтобы вернуть нужное значение.
3.Параметры по умолчанию
В ES6 пользователи могут указывать значения по умолчанию прямо в сигнатуре функций. Но в ES5 для этого нужно было использовать оператор OR.
//In ES6
let calculateArea = (height = 100, width = 50) => {
//logic
}
//In ES5
var calculateArea = function(height,width) {
height = height || 50;
width = width || 100;
//logic
}
4.Шаблонные литералы
ES6 вводит очень простые шаблоны строк вместе с держателями для переменных. Синтаксис для использования строки-шаблона – ${ВАША_ПЕРЕМЕННАЯ}, и она должна использоваться внутри строки с обратным тиком.
const firstName = "John";
const lastName = "Doe";
let name = `My name is ${firstName} ${lastName}
5.Расширенные литералы объектов
ES6 предоставляет расширенные объектные литералы, которые позволяют быстро создавать объекты со свойствами внутри фигурных скобок. Это применимо, когда имя переменной и ключевое свойство объекта совпадают.
function getName(firstName,lastName) {
return {
firstName,
lastName
}
}
console.log(getName("John", "Doe")); //Outputs {firstName :"John", lastName: "Doe" }
6.Деструктуризация присваивания
Деструктуризация – одна из самых популярных функций ES6. Она может применяться только в непервичных типах данных (т.е. объектах и массивах). Как и в случае с расширенными объектными литералами, вы можете использовать ключ свойства объекта в качестве переменной.
//Object - mapped through keys
let Person = {id : 1, name:"Peter", age: 24}
let {name,age} = Person
console.log(name) //Outputs "Peter"
console.log(age) //Outputs 24
//Array - mapped through index
let apps = ["Netflix", "Amazon", "Whatsapp"];
let [a,b] = apps;
console.log(a); //Outputs "Netflix"
console.log(b); //Outputs "Amazon"
let [,c,d] = apps;
console.log(c); //Outputs "Amazon"
console.log(d); //Outputs "Whatsapp"
Вы можете использовать псевдонимы, например, если вы хотите, чтобы имя конкретной деструктурированной переменной имело другое имя, вы можете использовать псевдонимы. Сейчас я объясню на примере.
//Object
let obj1 = {name1 : "Mike", name2:"Smith"};
let {name1 : firstName, name2 : lastName} = obj1;
console.log(firstName); //Outputs "Mike"
console.log(lastName); //Outputs "Smith"
//I am pretty sure you won't face this problem but in case
let obj2 = {"first Name" : "Mike", "last Name":"Smith"}; //this is valid in JS objects
let {"first Name" : firstName, "last Name" : lastName} = obj2;
console.log(firstName); //Outputs "Mike"
console.log(lastName); //Outputs "Smith"
7.Оператор разворота
Это также одна из наиболее используемых функций ES6. Оператор распространения (…) javascript позволяет быстро скопировать весь существующий массив или объект или его часть в другой массив или объект.
//Array
const oddNumbers = [1,3,5,7];
const evenNumbers = [2,4,6,8];
const numbersCombined = [...oddNumbers, ...evenNumbers]; //Outputs [1,3,5,7,2,4,6,8]
//Objects
const name = {
firstName : "Terry",
lastName : "Brown"
}
const details = {
age : 42,
city : "New Jersey"
}
const fullDetails = {...name, ...details};
console.log(fullDetails); //Outputs { firstName : "Terry", lastName : "Brown", age : 42,city : "New Jersey" }
Оператор spread часто используется в сочетании с деструктуризацией.
//Array
const numbers = [1,2,3,4,5,6,7,8];
const [one, two, ...remainNumber] = numbers;
console.log(remainNumbers); //[3,4,5,6,7,8]
//Object
const Person = {id : 1, name : "Terry", age: 42, city: "New Jersey" };
const {id, ...rest} = Person;
console.log(rest); //Outputs { firstName : "Terry", lastName : "Brown", age : 42,city : "New Jersey" }
Надеюсь, это будет полезно для вас, ребята. Счастливого кодинга. С уважением.