Вы когда-нибудь получали данные о времени, которые выглядят так?
Хотя есть люди, которые живут и умирают в 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