Деструктуризация — аморфная идея, потому что она может сделать так много разными способами. Сначала я возился с этой идеей, пока не понял, что вы, по сути, создаете зеркало через переменную.
Массивы проще всего понять, потому что вы делаете именно это. Создайте переменную и присвойте ее массиву. Затем назначьте переменные в массиве и сделайте их равными этому исходному массиву. Он назначит переменные в зеркальном массиве переменным в деструктурированном массиве.
let foo = ["this", "is", "foo", "bar"] let [that, was, faz, baz] = foo
Как вы можете видеть выше, новые переменные во второй строке указывают на зеркальные значения в первой строке. Таким образом, это будет присвоено строке «это», а было присвоено «есть». Деструктурируя, вы создаете зеркало через переменную и можете получить доступ к этой «Вселенной» через нее.
ES6 был реализован с целью сделать язык лучше. Это означает, что вы можете предсказать, что произойдет. Если вы не помните, что происходит при деструктурировании, вы можете догадаться и, возможно, будете правы.
var [first, second, third] = someArray;
Я не знаю, что такое «someArray», но мне это и не нужно. Я все еще могу сказать вам, что first теперь является значением первого элемента в «someArray».
Деструктуризация объектов немного отличается, но все еще интуитивно понятна. Если вы знаете ключ к паре ключ:значение, вы можете получить доступ непосредственно к значению через ключ.
let obj = {
year: 1,
"two years": "Two",
foo: { foo: "bar" }
}
let foo = obj
Вышеуказанный foo теперь будет напрямую присвоен значению, содержащемуся в объекте. Вместо использования obj.foo для извлечения значения {foo: «bar»} вы можете просто использовать foo. Теперь это будет {foo: «bar»}. Опять идея зеркала через переменную стоит. Здесь переменная — это сам объект. Теперь JavaScript будет знать, что нужно заглянуть внутрь obj и вытащить ключ foo, дающий вам переменную.
Есть несколько других трюков, о которых вам нужно подумать позже. Например, при деструктуризации массива вы можете пропустить ненужные значения с помощью пробела и запятой.
let someArray = [1,2,3] let [first, , third] = someArray;
Теперь второй элемент в массиве будет пропущен. первым будет 1, а третьим будет 3. Вы можете перейти на MDN и получить все подробности, если у вас есть вопросы.
Помимо того, что все работает, крайне важно иметь глубокое понимание того, что делает код и почему. На этом сайте freecodecamp есть отличная статья на эту тему.
Это дает вам отличное понимание того, что делает код. Итак, теперь я могу понять, хочу ли я деструктурировать объект, мне нужно создать пустой объектный литерал {} для представления деструктурируемого объекта. Затем мне буквально нужно только поместить ключ в этот пустой объект и назначить его деструктурирующему объекту. Javascript ES6 просмотрит объект, найдет ключ и присвоит значение переменной простого слова.
const record = { payPerHour: 100,
job: 'developer' }
const { payPerHour } = record
payPerHour
//=> 100
Теперь вы можете получить значение payPerHour, просто введя его, несмотря на то, что оно находится внутри объекта записи. Без деструктуризации вам нужно использовать record.payPerHour для доступа к значению.
