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

  • Размяна на променливи
  • Оператор за разпространение
  • Изчислени свойства
  • Генератори
  • Деструктуриране на обекти и масиви

Размяна на променливи

Сега е много лесно да размените две променливи.

var a = 10, b =20;

[a. b] = [b, a];

console.log(a, b);
// output 20, 10

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

Синтаксисът на разпространението позволява итерируем елемент като израз на масив или низ да бъде разширен на места, където се очакват нула или повече аргументи (за извиквания на функция) или елементи (за литерали на масив), или израз на обект да бъде разширен на места, където нула или очакват се повече двойки ключ-стойност (за обектни литерали).

Разпространение в извиквания на функции

Сега няма нужда да анализирате аргументите един по един

function func(x, y, z) { }
var args = [0, 1, 2];
func(...args);

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

Създаването на нови масиви чрез копиране или свързване е много по-лесно

var nums = ['100', '200']; 
var newNums = ['10', ...nums, '300', '400']; 
// ["10", "100", "200", "300", "400"]
// create a copy of array
var array = [1,2,3,4,5]
var copy = [..array]
// [1,2,3,4,5]

// concatenate arrays
var arr1 = [1,2,3]
var arr2 = [4,5,6]

var newArray = [...arr1, ...arr2]
// [1,2,3,4,5,6]

Разпространение в обектни литерали

Плитко клониране (с изключение на прототип) или сливане на обекти вече е възможно с помощта на по-кратък синтаксис от Object.assign().

var obj1 = {a:10, b: 20}
var obj2 = {x: 30, y:40}

var newCopy = {...obj1}
// {a:10, b: 20}


var newObj = {...obj1, ...obj2}
// {a:10, b: 20, x: 30, y:40}

Изчислени свойства

Сега можем да изчислим свойствата на обекта въз основа на условията по-долу

// Shorthand property names
var a = 'foo', b = 42, c = {};
var o = {a, b, c};
// {foo: 'foo', b: 'b', c: {}}

// Computed property names (ES2015)
var prop = 'foo';
var o = {
  [prop]: 'hey',
  ['b' + 'ar']: 'there'
};
// {'bar': "there"}


var o = {
  [(x => x % 2 === 0  ? 'even' : 'odd')(5)]: 5
}
// {odd: 5}

Генератори

Генераторите са функции, чието изпълнение може да се постави на пауза и да се възобнови по-късно. Техният контекст (свързване на променливи) ще бъде запазен при повторни влизания. Генераторите са много полезни, когато става дума за обещания. Сега можем да избегнем Callback Hell, запазвайки асинхронния начин и кодът изглежда като синхронен.

Извикването на генераторна функция не изпълнява веднага нейното тяло; вместо това се връща обект на итератор за функцията. Когато се извика методът next() на итератора, тялото на генераторната функция се изпълнява до първия израз за добив, който указва стойността, която трябва да бъде върната от итератора, или с yield* делегира на друга генераторна функция. Методът next() връща обект със свойство стойност, съдържащо получената стойност и свойство done, което показва дали генераторът е дал последната си стойност като булево. Извикването на метода next() с аргумент ще възобнови изпълнението на функцията генератор, заменяйки израза за добив, където изпълнението е било поставено на пауза, с аргумента от next().

Когато изпълнението приключи, ще върне генераторен обект с done, зададен на true и резултат, зададен на value. Изпълнението ще приключи, ако хвърли някакви грешки в тялото. Грешките трябва да се обработват вътре в тялото. в противен случай ще върне обект като {value: undefined, done: true}.

function* increment() {
  var i = 0;
  while (i < i+1)
    yield i++;
}

var gen = increment();
console.log(increment.next()) // {value: 0, done: false}
console.log(increment.next()) // {value: 1, done: false}
console.log(increment.next()) // {value: 1, done: false}


// calculate fibonacci numbers
var fibonacci = function*(){
  let pre = 0, cur = 1;
   while (pre < 1000) {
     // Here we destruct the former state
     [pre, cur] = [cur, pre + cur];
     // and yield (return) each step
     yield pre;
   }
}();

for (var n of fibonacci) {
  console.log(n);
}

Деструктуриране

Синтаксисът за деструктуриране на присвояване е JavaScript израз, който прави възможно разопаковането на стойности от масиви или свойства от обекти в отделни променливи като по-долу.

Деструктуриране на масив

var [a, b] = [10, 20]
// a = 10, b = 20

// reset of the values to a another variable
var [a, b, ...c] = [10, 20, 30, 40]
// a = 10, b = 20, c = [30, 40]

var [a] = [10, 20, 30]
// a = 10

// with default values
var [a = 1, b = 2, c = 3] = [10, 20]
// a = 10, b = 20, c = 3

// ignore the values
var [a, ,b] = [10, 20, 30]
// a = 10, b = 30

// return value from a function
var func = () => [1,2,3,4]
var [a, b] = func()
// a = 1, b = 2

Деструктуриране на обект

Достъп със същите ключове

var obj = {a: 10, b:20}
var {a, b} = obj;
// a = 10, b = 20

Присвояване на нови ключове

var obj = {a: 10, b:20}
var {a: x, b: y} = obj;
// x = 10, y = 20

Можем да предоставим стойности по подразбиране, както при масивите

var obj = {a: 10}
var {a = 1, b = 2} = obj;
// a = 10, b = 2

Присвояване на нови ключове със стойности по подразбиране

var obj = {a: 10}
var {a:x = 1, y:b = 2} = obj;
// x = 10, y = 2

Вложени масиви и деструктуриране на обекти

Ето как унищожавате дълбоките свойства

var oo = {
  users: [
    { imgs: [{url: "http://example.com"}],
      username: "Ajantha"
    }
  ],
  pages: {numOfPages: 1, limit: 5}
}

var {users:[{imgs:[{url: imgUrl}]}], pages: {limit}} = oo

// imgUrl = "http://example.com", limit = 5

Предаване на деструктуриращ обект към функция

var PrintUserName = ({user: {username}}) => console.log(username)
PrintUserName({user: {username: "Ajantha", password: ""}});
// "Ajantha"

Използване на деструктуриране в for цикъл

var users = [
  {imgs: [{url: "http://example.com"}],
    username: "Ajantha"
  }
]

for (var {imgs: [{url}], username:un} of users) {
  console.log(url, un);
}
// "http://example.com"  "Ajantha"

Това е всичко, което ще разгледам. Надяваме се да ви предоставим още интересни статии в бъдеще. Ако смятате, че това е полезно, пляскайте го и го споделете.