В JavaScript, как и в любом другом языке программирования, есть множество удобных приемов, которые позволяют нам легче писать наши программы. В этой статье мы рассмотрим, как разложить свойства объекта и элементы массива на отдельные переменные, объединить несколько объектов в один и управлять URL-адресами с помощью объекта URL.
Разобрать свойства объекта и элементы массива
С ES6 мы можем использовать ярлыки для присвоения значений объекта его собственной переменной, а также назначать отдельные записи массива в их собственные переменные. Благодаря синтаксису деструктурирующего присваивания мы можем сделать это без явного извлечения пары ключ-значение объекта или записи массива явно по его индексу.
Самый простой способ использовать его на объектах - написать что-то вроде:
const {
a,
b
} = {
a: 1,
b: 2
};
С помощью приведенного выше кода интерпретатор JavaScript сопоставит имя ключа справа с именем переменной справа. Таким образом, он может присвоить 1 a и 2 b. Мы также можем присвоить значение справа переменной с другим именем слева. Для этого мы можем написать следующий код:
const {
a: foo,
b: bar
} = {
a: 1,
b: 2
};
Приведенный выше код сначала сопоставляет имя ключа справа с именем ключа слева, а затем он будет направлять значение, которое соответствует этим ключам, в переменную справа от двоеточия с левой стороны.
Это означает, что клавиша a справа будет соответствовать клавише a слева. Это означает, что значение для a справа, равное 1, будет присвоено имени переменной, являющейся значением ключа a, то есть foo.
Аналогично, клавиша b справа будет соответствовать клавише b слева, а значение клавиши b справа будет присвоено имени переменной, которое соответствует клавише b слева. В итоге мы получаем, что переменная foo равна 1, а переменная bar равна 2.
Мы можем присвоить значения по умолчанию для переменных с левой стороны, чтобы нам не нужно было беспокоиться о том, что они будут undefined после операции присваивания деструктуризации.
Для этого мы пишем следующее, чтобы установить значение по умолчанию для переменных в левой части с помощью оператора =, как при обычных операциях присваивания. Например, мы можем установить значения по умолчанию для переменных слева, как в следующем коде:
const {
a = 0,
b = 0
} = {
a: 1
};
console.log(a, b);
Если мы регистрируем значения a и b, как мы делали выше, мы должны получить 1 для a и 0 для b, поскольку мы не присвоили никакого значения для b с левой стороны, поэтому значение по умолчанию 0, которое мы указали, автоматически присвоено значение b, как мы его указали.
Точно так же мы можем использовать синтаксис деструктурирующего присваивания с массивами. Мы можем использовать его, как в следующем коде:
const [a, b] = [1, 2];
С массивами интерпретатор JavaScript сопоставляет позицию переменной с записью массива в позиции, в которой находятся имена переменных. Таким образом, первой записи массива справа будет присвоено имя первой переменной слева, а второму массиву запись справа будет присвоена имени второй переменной слева и так далее. Мы также можем использовать его для обмена значениями переменных, как в следующем коде:
let a = 1, b = 2; [a, b] = [b, a];
Если мы запустим console.log на a и b после назначения деструктуризации, мы получим, что a равно 2, а b равно 1. Это очень удобно, поскольку нам не нужно назначать наши переменные временной переменной, чтобы поменять местами значения переменных.
Мы также можем назначать значения по умолчанию для переменных, которые находятся в массивах, когда мы используем их в синтаксисе деструктуризации, чтобы нам не приходилось беспокоиться о том, что переменные будут undefined после присвоения им значений с помощью синтаксиса деструктуризации. Например, мы можем написать:
let a,b; ([a=1,b=2] = [0])
Это допустимый синтаксис. В приведенном выше коде мы получаем, что a равно 0, потому что мы присвоили ему 0. b равно 2, потому что мы ничего ему не присвоили.
Объединение нескольких объектов в один
С помощью оператора распространения мы можем использовать его для объединения нескольких объектов в один. До того, как у нас появился оператор распространения, мы должны перебрать ключи каждого объекта, а затем вручную поместить пары ключ-значение каждого объекта с нашим собственным кодом в новый объект, и мы должны сделать это для всех объектов, которые мы хочу слиться вместе.
Это была настоящая боль. Но теперь, с синтаксисом оператора распространения, мы можем просто применить оператор распространения к каждому объекту в новом объекте, а затем мы получим новый объект со всеми ключами нового объекта. Например, если у нас есть эти объекты:
const obj1 = {
a: 1,
b: 2
};
const obj2 = {
c: 3,
d: 4
};
const obj3 = {
e: 5,
f: 6
};
const obj4 = {
g: 7,
h: 8
};
const obj5 = {
i: 9,
j: 10
};
Затем мы можем использовать оператор распространения, чтобы объединить их вместе, как в следующем коде:
const obj1 = {
a: 1,
b: 2
};
const obj2 = {
c: 3,
d: 4
};
const obj3 = {
e: 5,
f: 6
};
const obj4 = {
g: 7,
h: 8
};
const obj5 = {
i: 9,
j: 10
};
const mergedObj = {
...obj1,
...obj2,
...obj3,
...obj4,
...obj5
};
Затем, когда мы регистрируем значение mergedObj, мы получаем:
{
"a": 1,
"b": 2,
"c": 3,
"d": 4,
"e": 5,
"f": 6,
"g": 7,
"h": 8,
"i": 9,
"j": 10
}
Если у нас есть объекты с некоторыми или всеми ключами, которые совпадают друг с другом, то значение перекрывающегося ключа, объединенного позже, перезапишет тот, который был объединен ранее. Например, если у нас есть:
const obj1 = {
a: 1,
b: 2
};
const obj2 = {
a: 3,
d: 4
};
const obj3 = {
a: 5,
f: 6
};
const obj4 = {
g: 7,
h: 8
};
const obj5 = {
i: 9,
j: 10
};
const mergedObj = {
...obj1,
...obj2,
...obj3,
...obj4,
...obj5
};
Затем, когда мы регистрируем значение mergedObj, мы получаем:
{
"a": 5,
"b": 2,
"d": 4,
"f": 6,
"g": 7,
"h": 8,
"i": 9,
"j": 10
}
Как мы видим, значение свойства a равно 5. Это потому, что мы сначала слили obj1 со значением a, равным 1, затем мы слились с obj2, у которого значение a равно 3, что перезаписало исходное значение 1, то после того, как мы объединились с obj3, у которого значение a равно 5, это перезаписало значение 3, которое было объединено ранее. Таким образом, мы получаем окончательное значение 5 для a.
Управление URL-адресами
С помощью объекта URL-адреса мы можем передать строку URL-адреса, извлечь и установить различные части URL-адреса и получить новый URL-адрес. Мы можем создать объект URL с помощью конструктора.
Конструктор принимает до 2 аргументов. Либо у нас есть один аргумент, являющийся полной строкой URL-адреса, либо мы можем передать относительную строку URL-адреса, которая является частью полного URL-адреса, в качестве первого аргумента и первой части полной строки URL-адреса, либо имя хоста в качестве второго аргумента. Например, мы можем написать:
new URL('http://medium.com');
or
new URL('/@hohanga', 'http://medium.com');
С помощью объекта URL-адреса мы можем получать и устанавливать различные свойства для получения части URL-адреса, а также устанавливать части URL-адреса для создания нового URL-адреса. С помощью свойства hash мы можем установить хеш-часть URL-адреса, то есть часть URL-адреса после знака решетки (#). Например, мы можем написать что-то вроде следующего кода:
const url = new URL('http://example.com/#hash');
console.log(url.hash);
url.hash = 'newHash';
console.log(url.toString());
Если мы запустим код, то увидим, что первая console.log инструкция записывает '#hash'. Затем мы присвоили значение 'newHash' свойству url hash. Затем, когда мы запускаем метод toString() для объекта url и метод console.log для значения, возвращаемого toString(), мы получаем 'http://example.com/#newHash', которое является новым значением URL-адреса с новым хешем.
Точно так же мы можем изменить имя хоста, которое является первой частью URL-адреса, установив свойство host. Как и свойство hash, свойство host также имеет функцию получения для получения имени хоста URL. Например, мы можем написать что-то вроде следующего кода:
const url = new URL('http://example.com/#hash');
console.log(url.host);
url.host = 'newExample.com';
console.log(url.toString());
Если мы запустим код, то увидим, что первый оператор console.log регистрирует '#hash'. Затем мы присвоили значение 'example.com' свойству url hash. Затем, когда мы запускаем метод toString() для объекта url и запускаем метод console.log для значения, возвращаемого toString(), мы получаем ‘http://newexample.com/#hash’, которое является новым значением URL с новым хешем.
В объекте URL есть другие свойства. Следите за новостями в следующей части, где мы исследуем другие части объекта URL.
В JavaScript, как и в любых других языках программирования, есть много удобных приемов, которые позволяют нам легче писать наши программы. В этой статье мы рассмотрели, как разложить свойства объекта и элементы массива на отдельные переменные, объединить несколько объектов в один и управлять URL-адресами с помощью объекта URL. С помощью этих уловок мы сокращаем усилия, которые мы вкладываем в написание нашего кода, облегчая нашу жизнь.
