Деструктуризация в JavaScript
Деструктуризация - это мощный способ создания переменных из значений в массивах и объектах, и вы должны его использовать. Это упростит ваш код!
Имейте в виду, что деструктуризация является частью спецификации ES2015 (также известной как ES6) и совместима не со всеми браузерами. Я рекомендую использовать Babel, Typescript или что-нибудь, что скомпилирует ваш код в ES5, чтобы обеспечить полную совместимость для каждого пользователя.
Деструктуризация массива
Если вы хотите присвоить значения массива отдельным переменным, вы можете воспользоваться деструктуризацией, чтобы достичь своей цели простым и понятным способом. Нет необходимости использовать индексы или циклы!
Если вы хотите присвоить эти четыре значения четырем переменным, вы можете использовать деструктуризацию массива следующим образом:
Обратите внимание, что здесь важно расположение переменных и значений. Первая новая переменная всегда наследует первое значение массива.
Но что, если мне нужны только первые 2 значения как переменные, а остальные как массив? Это очень просто:
Вы также можете установить значения по умолчанию, если хотите! Таким образом, даже если в переданном массиве недостаточно значений, все ваши переменные будут иметь определенное значение!
Общие варианты использования
Возможно, вы прямо сейчас почесываете голову, задаваясь вопросом, когда вы собираетесь использовать это. Я имею в виду… есть ли очевидные случаи использования деструктуризации массива?
На самом деле их много! Например, предположим, что у вас есть сообщения в блоге в массиве, но вы хотите управлять первым сообщением иначе, чем всеми остальными, вы можете использовать деструктурирование, чтобы разделить первое сообщение и остальные на две разные переменные.
const [starPost, ...otherPosts] = blogPosts;
Или, скажем, вам просто нужны первые три сообщения массива, вы можете просто объявить три переменные, а остальные будут проигнорированы.
const [post1, post2, post3] = blogPosts;
Деструктуризация объекта
Мы также можем использовать синтаксис деструктурирующего присваивания, чтобы присвоить переменным значения объекта. Вы обнаружите, что это очень похоже на то, что мы сделали с массивами.
Как видно из приведенного выше примера, мы использовали те же имена для переменных, что и для ключей объекта. Однако мы можем определять переменные с именами, которые отличаются от ключей:
Как и в случае с массивами, мы также можем установить значения по умолчанию.
Общие варианты использования
Если вам нужно только одно или несколько значений из объекта и вы не хотите получать доступ к этим значениям с использованием синтаксиса objectWithALongNameName.keyName, вы можете просто использовать простую деструктуризацию для создания новых переменных (что сохранит ваш код кратким).
Но лучшее применение деструктуризации объекта - это обработка параметров.
Предположим, у вас есть функция, которая обрабатывает параметры со значениями по умолчанию. Вот как вы можете легко с этим справиться:
Как видите, записывая options = {} в качестве аргумента, мы указываем, что если ничего не передается, по умолчанию мы будем использовать пустой объект в качестве переданных параметров.
После этого мы используем деструктуризацию, чтобы заменить параметры по умолчанию переданными, и все готово. Затем мы можем просто использовать cannons вместо options.cannons в нашей функции, и это было очень просто настроить!
Поделитесь своим использованием деструктуризации!
Вы использовали деструктуризацию в своих проектах в крутых способах, которыми хотели бы поделиться? Помогите своим коллегам-разработчикам, оставив фрагмент в комментариях ниже!
Продолжайте кодировать!
