Вы когда-нибудь получали данные о времени, которые выглядят так?

Хотя есть люди, которые живут и умирают в 24-часовом формате, многие пользователи по-прежнему предпочитают видеть время в более традиционном формате. Хм, 12 часов. Итак, как нам перейти от этого… к чему-то подобному?

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

var breakfast = ['🥑','🥚','☕'];
var [avocado, egg, coffee] = breakfast;

console.log(avocado); // 🥑
console.log(egg); // 🥚
console.log(coffee); // ☕

В этом примере «завтрак» объявлен как массив, содержащий 3 символа. В следующей строке мы деструктурируем массив, чтобы присвоить этим символам некоторые переменные. Кроме того, при работе с массивами мы можем опустить значение, добавив запятую без имени переменной, чтобы пропустить индекс.

var breakfast = ['🥑','🥚','☕'];
var [avocado,, coffee] = breakfast;

console.log(avocado); // 🥑
console.log(egg); // egg is not defined
console.log(coffee); // ☕

С помощью наших новых инструментов давайте взглянем на функцию, которая преобразует строку в формате «ЧЧ:ММ:СС» и возвращает отформатированное время. Используя метод «split()» для возврата массива, мы можем установить значения для переменных «hourString» и «minute». Теперь, когда у нас есть эти значения, мы можем отформатировать время в 12-часовом формате.

Если вам интересно, что происходит в строке 4, взгляните на эту ссылку.

function formatTime(time){ // => 7:00PM
  var [hourStr, minute] = time.split(":");
  var Hour = +hourStr % 24;
  return (Hour % 12 || 12) + ":" + minute + (hour < 12 ? "AM" : "PM"); 
}

formatTime("19:00:00");

Вложенные объекты

Мы только начали исследовать использование деструктурирования. Как упоминалось ранее, мы также можем использовать это для присвоения значений объектам и даже их вложенным объектам. В этом примере мы можем увидеть, как мы достигаем дочернего узла «имя» двумя разными способами: обходя объект и используя деструктурирование.

var blog = { 
  id: '007', 
  title: 'My first blog!', 
  writer: {
    name: 'Frederick'
  }
};

var { 
  id: blogId, 
  title: blogTitle, 
  writer: { 
    name: writerName 
  } 
} = blog;

console.log(blogId); // 001
console.log(blogTitle); // My first blog!
console.log(blog.writer.name) // Frederick
console.log(writerName); // Frederick