После прохождения подготовительного этапа учебного курса по кодированию Flatiron School я довольно много узнал о темах JavaScript, включая массивы/объекты, и самая важная часть массивов и объектов была упомянута в последнем модуле сразу после лаборатории Object Ball. По моему мнению, деструктуризация могла бы предшествовать лаборатории, потому что это была очень мощная техника, которая позволила мне быстро пройти через то, что в противном случае было бы очень утомительным и трудным лабораторным. Это будет моя первая попытка объяснить техническую тему, связанную с кодом JavaScript, и я пишу это, чтобы внести ясность в эту технику, которую я включил в свою лабораторию Object Ball и свой проект API. Деструктуризация — это метод присваивания, который имеет дело с массивами и объектами. Впервые он был представлен в синтаксисе JavaScript в версии ES6 JavaScript.
Деструктуризация позволяет вам обойти необходимость использования точечной или квадратной нотации для объектов, например, для этого объекта:
const exampleObj = {
name: "Jamaal"
address: "2450 Thomas Ave"
если вы хотите получить доступ к свойству имени внутри объекта, вы можете использовать традиционный синтаксис и сохранить свойство в переменной, как показано ниже.
const exampleName = exampleObj.name const objName = exampleObj['name']
с деструктурированием вы можете просто создать переменную для каждого свойства в объекте, ссылаясь на ключи в объекте и делая их переменными.
const {name, address} = exampleObj
console.log(`Hello, my name is ${name} and I live on ${address}.`
// Hello, my name is Jamaal and I live on 2450 Thomas Ave.
Сила деструктурирования объектов становится очевидной при работе с вложенными объектами, такими как тот, с которым я столкнулся в своей лаборатории Object Ball.
С вышеприведенным объектом у нас есть объект player всех игроков и их статистика, но они вложены в объекты дома и на выезде для каждой команды соответственно. Чтобы получить доступ к статистике очков домашнего игрока «Алан Андерсон» без деструктуризации, вам нужно будет использовать следующий синтаксис.
gameObject().home.players["Alan Anderson"].points
С помощью деструктуризации мы можем сегментировать подобъект игроков для домашнего объекта, установив переменную для объекта игроков с деструктурированием.
const { home: {players}= gameObject()
players["Alan Anderson"].points
вам нужно поместить игроков в скобки {}, чтобы мы могли выполнить вложенную деструктуризацию, но здесь есть проблема, и домашний объект, и удаленный объект имеют один и тот же ключ игроков, и поскольку мы используем const для установки переменных с помощью наша техника деструктурирования, казалось бы, не позволит нам нацеливаться на объекты игроков как дома, так и вдали. С этим можно обойти, мы просто назначаем новое имя для ключа игроков как для домашних, так и для выездных объектов.
const { home: { players: homePlayers }, away: { players: awayPlayers } } = gameObject()
Этот метод очень удобен при работе с похожими ключами вложенных объектов.
Это еще один метод, который очень эффективен при деструктуризации, и это возможность использовать переменную использования для деструктуризации внутри функции. Я использовал эту технику в своем проекте для получения API. Допустим, у вас есть данные JSON, которые представляют собой объект данных, который вы можете использовать для заполнения веб-страницы путем манипулирования DOM.
fetch(`https://api.polygon.io/v2/snapshot/locale/us/markets/stocks/tickers/${tickerSymb}?apiKey=HRJaobcNSX77koktspcX6RhjjQ1aw4W5`)
.then(response => response.json())
.then(data => {
const { ticker: {day}} = data
renderStockTable(tickerSymb,day)
Мы можем взять данные из JSON и деструктурировать их, чтобы иметь легкий доступ к содержащимся в них компонентам. Данные, которые я извлекаю, — это данные биржевого тикера, а объект дня имеет ключи, которые представляют колебания цены для символа тикера, который я передаю через событие отправки для своего приложения. Я хочу взять каждый из этих ключей c: для цены при закрытии рынка, h: для максимальной цены, l: для минимальной цены, o: цены при открытии рынка, v: для объема сделок, vw для средневзвешенной цены и поместить их в таблице как табличные данные. В функции renderStockTable я передаю переменную дня в функцию, которая представляет объект
"request_id": "4070d186a2380f9385b5904cec5fd1a6",
"status": "DELAYED",
"ticker": {
"day": {
"c": 137.35,
"h": 141.66,
"l": 136.6,
"o": 139.88,
"v": 136077468,
"vw": 138.6621
},
"min": {
"av": 136077468,
"c": 138.3,
"h": 138.3,
"l": 138.22,
"o": 138.22,
"v": 3481,
"vw": 138.2578
},
"prevDay": {
"c": 140.82,
"h": 147.3601,
"l": 139.9,
"o": 146.85,
"v": 109742890,
"vw": 142.6901
},
"ticker": "AAPL",
"todaysChange": -2.52,
"todaysChangePerc": -1.79,
"updated": 1653004800000000000
}
}
Затем я деструктурирую этот объект с помощью функции renderStockTable в глобальной области видимости и передаю каждую из этих переменных в качестве аргументов. Затем я присваиваю каждой из этих переменных текстовое содержимое для каждого из элементов данных таблицы, которые я создаю для добавления в свою таблицу с идентификатором «stock-table».
function renderStockTable(ticker,{c, h, l, o, v, vw}) {
const table = document.getElementById('stock-table')
const tableRow = document.createElement("tr")
tableRow.classList.add('style-new-row')
const tableHead = document.createElement('th')
const tableBody = document.createElement('tb')
const closingPrice = document.createElement('td')
const priceHigh = document.createElement('td')
const priceLow = document.createElement('td')
const openPrice = document.createElement('td')
const tradingVol = document.createElement('td')
const deleteRow = document.createElement('td')
const weightAveragePrice = document.createElement('td')
const deleteBtn = document.createElement('button')
deleteBtn.type = "button"
tableHead.textContent = `${ticker}`
closingPrice.textContent = `${c}`
priceHigh.textContent = `${h}`
priceLow.textContent = `${l}`
openPrice.textContent = `${o}`
tradingVol.textContent = `${v}`
weightAveragePrice.textContent = `${vw}`
tableRow.append(tableHead, closingPrice, priceHigh, priceLow, openPrice, tradingVol, weightAveragePrice, deleteRow)
table.append(tableRow)
deleteRow.append(deleteBtn)
deleteBtn.innerText = "Delete"
deleteBtn.addEventListener('click', (e) => e.target.parentNode.parentNode.remove())
}
В своих исследованиях я читал во многих частях Интернета, что деструктурирование аргумента функции является обычным явлением в таких средах, как REACT. быть частью 2 серии. Я надеюсь, что внес некоторую ясность в деструктурирование объектов и его множество удобных применений, и увидимся во второй части.
