Деструктуризация объектов и массивов в JavaScript
Если вы новичок в javascript, вы можете подумать, что нет необходимости деструктурировать объекты или массивы, но деструктуризация имеет большое значение в javascript из-за его способности извлекать элементы из массива или объектов, а также может помочь вам переименовать этот объект а также дать этому элементу значение по умолчанию на тот случай, если существование элементов ложно.
Деструктуризация объектов в javascript:
Если мы хотим получить элемент из объекта, мы обычно просто ссылаемся на объект, а затем указываем на нужный нам элемент из этого объекта следующим образом. пример 1:
const objectExample1 = {
firstItmOne = elementOne,
firstItmTwo = elementTwo,
firstItmThree = elementThree
}
console.log(`this is the first element ${objectExample1.firstItmOne}, the second ${objectExample1.firstItmTwo}, and the third ${objectExample2.firstItmThree}
При деструктурировании объекта в javascript нам нужно учитывать положение объекта, если объект находится внутри другого объекта, нам также необходимо учитывать имена элементов, которые мы хотим деструктурировать из объекта, и мы деструктурируем элемент объекта следующим образом.
пример 2:
const objectExample2 = {
secondItmOne = secondElementOne,
secondItmTwo = secondElementTwo,
secondItmThree = secondElementThree
const {secondItmOne, secondItmTwo, secondItmThree} = objectExample2
console.log(`this is the first element ${secondItmOne}, the second ${secondItmTwo}, and the third ${secondItmThree}).
Вы также можете переименовать элементы объекта по своему усмотрению при деструктурировании.
пример 2.1:
const {secondItmOne: itemOne, second ItmTwo: itemTwo, thirdItmThree} = objectExample2
console.log(`this is the first element ${itemOne}, the second ${ItemTwo}, and the third ${secondItmThree}) .
В примере 2.1 выше я переименовал первый и второй элемент объекта, а третий оставил прежним. мы также можем установить значение по умолчанию, если существование элементов ложно, и мы делаем это следующим образом.
пример 2..2:
const {secondItmOne: itemOne="noFirstItem", second ItmTwo: itemTwo, thirdItmThree="noThirdItem"}) = objectExample2
console.log(`this is the first element ${itemOne}, the second ${ItemTwo}, and the third ${secondItmThree}) .
Например, 2.2 выше, если бы первый и третий элементы объекта не существовали, то в консоль было бы записано значение по умолчанию, так что деструктуризация работает в объекте именно так.
Деструктуризация массивов в javascript:
Если мы хотим получить элемент из массива, мы обычно просто ссылаемся на массив, а затем указываем индекс элемента, который нам нужен из этого массива, следующим образом. пример 3:
const ArrayExample3 = [thirdElementOne,thirdelementTwo,thirdelementThree]
console.log(`this is the first element ${arrayExample3[0]}, the second ${arrayExample3[1]}, and the third ${arrayExample3[2]})
При деструктуризации массива в javascript нам нужно учитывать положение элементов, нам также необходимо учитывать индекс элемента, который мы хотим деструктурировать из массива, если элемент идет первым вторым или третьим, и мы деструктурируем элемент массива следующим образом.
пример 4:
const arrayExample4 =[arrayElementOne,arrayElementTwo,arrayElementThree ]
const {firstArray,secondArray , thirdArray} = arrayExample4
console.log(`this is the first element ${firstArray}, the second ${secondArray}, and the third ${thirdArray}).
мы также можем установить значение по умолчанию, если существование элементов ложно, и мы делаем это следующим образом.
пример 4.1:
const {firstArray = 'noFirstItem', secondArray, thirdArray = 'noThirdItem'}) = arrayExample4
console.log(`this is the first element ${firstArray}, the second ${secondArray}, and the third ${thirdArray}) .
В приведенном выше примере 4.1, если бы первый и третий элементы массива не существовали, то значение по умолчанию было бы записано в консоль, поэтому деструктурирование работает именно так в массиве.