7 лучших особенностей ES6 в Javascript


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" }
Войти в полноэкранный режим Выход из полноэкранного режима

Надеюсь, это будет полезно для вас, ребята. Счастливого кодинга. С уважением.

Оцените статью
Procodings.ru
Добавить комментарий