Оригинальное название: 5 интересных способов деструктурирования в JavaScript.
Оригинальная ссылка:Рисовая поездка avlutin.com/5-interest i…
Регулярно просматривая код JS, который я пишу, я везде вижу операции деструктурирования. Получение свойств объекта и доступ к содержимому массива — обычные операции. Операция деструктуризации делает эти операции очень простыми и понятными. В этой статье я объясню пять методов использования деструктуризации JS, которые отличаются от обычного использования.
1. Поменять местами переменные
Распространенный способ взаимодействия значений двух переменных требует помощи дополнительной переменной, см. простой пример:
let a = 1;
let b = 2;
let temp;
temp = a;
a = b;
b = temp;
a; // => 2
b; // => 1
tempявляется временной переменной, в примере переменная хранитсяaзначение ,bЗначение присваиваетсяa, наконец, положитьtempЗначение присваиваетсяb.
Операция деструктуризации позволяет очень легко поменять местами значения переменных, не прибегая к третьей временной переменной:
let a = 1;
let b = 2;
[a, b] = [b, a];
a; // => 2
b; // => 1
[a, b] = [b, a]является деструктурирующей операцией. Справа от знака равенства создается массив[b, a], соответствующее значение равно[2, 1]. первое значение массива2уничтожается и назначаетсяa, второй раздел1уничтожается и назначаетсяb.
Несмотря на то, что это по-прежнему создает временный массив, деструктурирующее присваивание по-прежнему является очень эффективным и простым способом поменять местами значения переменных.
На этом пути нет никаких ограничений. Вы также можете взаимодействовать с большим количеством переменных значений одновременно, например:
let zero = 2;
let one = 1;
let two = 0;
[zero, one, two] = [two, one, zero];
zero; //=> 0
one; //=> 1
two; //=> 2
Вы можете поменять местами любое количество значений переменных, просто чаще встречается обмен двумя значениями переменных.
2. Доступ к массиву
Есть массив, и этот массив может быть пустым. Необходимо получить доступ к элементу массива в любой позиции и вернуть значение по умолчанию, если позиция пуста.
Обычно некоторые люди могут использовать массивlengthАтрибут судьи:
const colors = [];
let firstColor = "white";
if (colors.length > 0) {
firstColor = colors[0];
}
firstColor; //=> "white"
К счастью, деструктуризация массива позволяет добиться того же эффекта быстрее и эффективнее:
const colors = [];
const [firstColor = "white"] = colors;
firstColor; //=> "white"
const [firstColor = "white"] = colors;БудуcolorsПервый элемент массива присваивается переменнойfirstColor. Если в позиции, где нижний индекс этого массива равен 0, нет элемента (Примечание: когда он не определен, он считается пустым),whiteбудет присвоено значение по умолчанию дляfirstColor.
Деструктуризация массива очень гибкая, если вы хотите получить доступ только ко второму элементу массива, метод выглядит так:
const colors = [];
const [, secondColor = "black"] = colors;
secondColor; //=> "black"
Напишите запятую слева от выражения деструктурирования: означает, что первый элемент массива игнорируется.colorsЭлементы индекса массива 1 деконструируются для присвоения переменнойsecondColor.
3. Неизменяемые операции
С тех пор, как я начал использовать React, а затем и Redux, я был вынужден начать писать код, следуя принципу неизменности. Сначала было немного неудобно, но потом я понял преимущества такого подхода: он упрощает работу с односторонним потоком данных. Принцип неизменности запрещает изменение объектов. К счастью, деструктуризация может помочь вам сделать это, соблюдая принцип неизменности. Используйте деструктурирование в сочетании с оператором rest, чтобы удалить первый элемент массива:
const numbers = [1,2,3];
const [, ...fooNumbers] = numbers;
fooNumbers; //=> [2, 3]
numbers; //=> [1,2,3]
Эта деструктивная операция[, ...fooNumbers] = numbersсоздал новый массивfooNumbers, этот массив содержитnumbersОстальные элементы, кроме первого элемента.numbersМассив не изменяется, таким образом следует принципу неизменности.
Кроме того, вы также можете использовать тот же метод для удаления свойства объекта, следуя принципу неизменности. Как показано ниже, удалитеbigобъектfooАтрибуты:
const big = {
foo: "value foo",
bar: "value bar",
}
const { foo, ...small } = big;
small; //=> { bar: "value bar" }
big; //=>{ foo: "value foo", bar: "value bar" }
Вышеупомянутый метод использует деструктурирование в сочетании с оператором расширения объекта для создания нового объекта.small, этот новый объект содержитbigобъект кромеfooВсе свойства, кроме свойств.
4. Разрушение итерируемых значений
В предыдущих разделах это все разрушенные массивы. На самом деле деструктурирование доступно для всех итераций.
Многие примитивные примитивные типы и объекты являются итерируемыми, например массивы, подобные массивам, строки,setсбор иmapсобирать.
Например, вы можете разбить строку на отдельные символы:
const str = "cheese";
const [firstChar = ""] = str;
firstChar; //=> 'c'
Конечно, деструктурирование не ограничивается типами, которые изначально являются итерируемыми. Деструктурирование можно использовать для всех объектов, реализующих итерируемый протокол.
Следующим образом,moviesСодержит список кинообъектов. мы хотим деконструироватьmoviesКогда объект, вы можете получить фильмtitleэта строка. Чтобы реализовать эту операцию, вам сначала нужно настроить итератор:
const movies = {
list: [
{ title: "Heat" },
{ title: "Interstellar" },
],
[Symbol.iterator]() {
let index = 0;
return {
next: () => {
if (index < this.list.length) {
const value = this.list[index++].title;
return { value, done: false };
}
return { done: true }
}
}
}
}
const [firstMovieTitle] = movies;
console.log(firstMovieTitle); //=> 'Heat'
moviesобъект по определениюSymbol.iteratorМетод реализует итератор. Этот итератор может перебирать все фильмыtitleАтрибуты.
мы вmoviesРеализация итеративного интерфейса выполняется на объекте, таким образом реализуя деструктурирование.moviesЧтобы получить заголовок, например, мы получаем название первого фильма:const [firstMovieTitle] = movies;.
Верхний предел использования деструктурирования заключается в том, что верхнего предела нет.
5. Разрушение динамических свойств
По моему опыту, деструктуризация свойств объекта — это гораздо больше, чем деструктуризация массива. Деструктуризация объекта выглядит очень просто:
const movie = { title: "Heat" };
const { title } = movie;
title; //=> Heat
const { title } = movie;создал переменнуюtitle, затем поставьтеmovie.titleЭтой переменной присваивается значение.
Одна из вещей, которая меня удивила, когда я впервые узнал о деструктуризации объектов, заключается в том, что вам не нужно заранее знать статические имена свойств. Вы можете деконструировать объект с динамическими именами свойств.
Чтобы понять, как работает динамическая деструктуризация, давайте в качестве примера напишем функцию приветствия:
function greet( obj, nameProp ) {
const { [nameProp]: name="Unknow" } = obj;
return `Hello, ${name}!`;
}
greet({ name: "Batman" }, "name"); //=> Hello, Batman!
greet( {}, "name" ); //=> Hello, Unknow!
greet()При вызове ему необходимо передать два параметра: один — объект, а другой — имя свойства.
существуетgreet()Внутренние функции, деструктурирующие выраженияconst { [nameProp]: name="Unknow" } = obj;Используйте скобки[nameProp]Прочитайте имя динамического свойства.nameПеременная получает значение динамического свойства.
Еще лучше, вы можете указать значение по умолчаниюUnknowв случае, если свойство не существует.
6. Резюме
Деструктуризация может упростить и ускорить доступ к свойствам объекта и элементам массива. В дополнение к основному использованию деструктуризация массива также может легко обмениваться переменными, получать доступ к элементам массива и выполнять некоторые операции, которые следуют принципу неизменности. JavaScript предлагает больше возможностей, потому что вы можете реализовать пользовательскую логику деструктурирования, расширив итераторы.