Деструктуриране, ES6: Изучаване на JavaScript

Деструктуриране, ES6: Изучаване на JavaScript

Подновявайки редовното си обучение по график, това е ден 8 от изучаването на JavaScript. Няма и осем дни, откакто започнах. Но това е 8-ми учебен ден. Започнах да научавам за ES6 и новите концепции, които идват с това.

ECMAScript 6

Това ще покрие някои от същите неща, които вече направих. Освен че тук използвам ES6, който има някои повече функции.

// Compare Scopes with Let and Var Keywords
function checkScope() {
  let i = 'function scope';
  if (true) {
    let i = 'block scope';
    console.log('Block scope i is: ', i);
  }
  console.log('Function scope i is: ', i);
  return i;
}

// Editing Arrays
const s = [5, 7, 2];
function editInPlace() {
  // Only change code below this line
  s[0] = 2
  s[1] = 5
  s[2] = 7
}
editInPlace();

// FREEZE!
function freezeObj() {
  const MATH_CONSTANTS = {
    PI: 3.14
  };
  // Only change code below this line
  Object.freeze(MATH_CONSTANTS)
 // Only change code above this line
  try {
    MATH_CONSTANTS.PI = 99;
  } catch(ex) {
    console.log(ex);
  }
  return MATH_CONSTANTS.PI;
}
const PI = freezeObj();

// Arrow Functions
const magic = () => new Date() ;

// Arrow Functions With Parameters
const myConcat = (arr1, arr2) => {
return arr1.concat(arr2)
};
console.log(myConcat([1, 2], [3, 4, 5]));

// Default Parameters
const increment = (number, value = 1) => number + value;

// Rest Parameters
const sum = (...args) => {
  return args.reduce((a, b) => a + b, 0);
}

// Spread Operator
const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];
let arr2;
arr2 = [...arr1];  // Change this line
console.log(arr2);

Успях да завърша този раздел с относителна лекота. Това беше завъртане на код, който вече знаех. Функциите със стрелки бяха единственият нов код, който научих. Следващото в курса беше деструктурирането. Нека се потопим направо в него!

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

Деструктурирането е нов начин за редактиране на стойности. Синтаксисът ме обърка. В един момент го разбрах.

// Extracting Values
const HIGH_TEMPERATURES = {
  yesterday: 75,
  today: 77,
  tomorrow: 80
};
const { today, tomorrow } = HIGH_TEMPERATURES;

// Assigning Object Variables
const HIGH_TEMPERATURES = {
  yesterday: 75,
  today: 77,
  tomorrow: 80
};
const { today: highToday, tomorrow: highTomorrow } = HIGH_TEMPERATURES;

// Nested Object Variables
const LOCAL_FORECAST = {
  yesterday: { low: 61, high: 75 },
  today: { low: 64, high: 77 },
  tomorrow: { low: 68, high: 80 }
}; 
const { today: { low: lowToday, high: highToday}} = LOCAL_FORECAST;

// Assigning Variables From Arrays
let a = 8, b = 6;
[a , b] = [b, a];

// Re-Assigning Array Elements
function removeFirstTwo(list) {
  const [a,b,...shorterList] = list;
  return shorterList;
}
const source = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const sourceWithoutFirstTwo = removeFirstTwo(source);

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