Освоение деструктуризации: самая мощная функция JavaScript

Представьте, что у вас есть пакет с фруктами, и вы хотите отделить апельсин от яблок. Обычно вам придется залезать в сумку и вытаскивать каждый фрукт один за другим, что может занять немного времени. Но что, если бы у вас была суперсила, которая позволяла бы вам волшебным образом отделять апельсин от яблок, не вынимая их из пакета по одному?

Эту сверхспособность можно рассматривать как деструктуризацию в javascript. Точно так же, как вы можете использовать свою сверхспособность, чтобы быстро и легко разделить яблоки и апельсины, вы можете использовать деструктурирование, чтобы быстро и легко извлекать определенные элементы или свойства из массива или объекта и назначать их переменным.

в JavaScript существует два основных типа деструктуризации: деструктуризация массива и деструктуризация объекта.

просмотрите все примеры, приведенные ниже, чтобы освоить эту концепцию, я попытался охватить все типы примеров с надлежащим объяснением

• В приведенном ниже примере у нас есть массив чисел с именем numbers. Мы используем деструктурирование, чтобы присвоить значения первого, второго и третьего индексов массива numbers отдельным переменным first, second и third соответственно.

const numbers = [1, 2, 3, 4, 5];

// Destructuring the array into separate variables i.e first , second, third
const [first, second, third] = numbers;

console.log(first); // Output: 1
console.log(second); // Output: 2
console.log(third); // Output: 3

• В приведенном ниже примере у нас есть объект с именем student с тремя свойствами: name, age и majors. Мы используем деструктурирование, чтобы присвоить значения свойств name, age и majors отдельным переменным name, age и majors соответственно.

const student = {
  name: "Biswajit",
  age: 24,
  majors: ["Computer Science", "Mathematics"]
};

// Destructuring the object into separate variables
const { name, age, majors } = student;

console.log(name); // Output: "Biswajit"
console.log(age); // Output: 24
console.log(majors); // Output: ["Computer Science", "Mathematics"]

• Цель деструктуризации — извлечь свойства объекта и присвоить их отдельным переменным с одинаковыми или разными именами. Итак, в вашем примере, если вы назначаете одинаковые имена, вы можете упростить свой код и уменьшить повторение имен свойств.
• Например, вместо того, чтобы обращаться к student.name каждый раз, когда вы хотите использовать имя, вы можете просто использовать переменную name после деструктуризации.
• В приведенном ниже примере у нас снова есть объект с именем student, но на этот раз он имеет вложенный объект с именем grades с двумя свойствами: midterm и final. Мы используем деструктурирование, чтобы присвоить значения свойств midterm и final отдельным переменным midterm и final соответственно.

const student = {
  name: "John",
  age: 20,
  grades: {
    midterm: 90,
    final: 95
  }
};

// Destructuring the nested object into separate variables
const {
  grades: { midterm, final }
} = student;

console.log(midterm); // Output: 90
console.log(final); // Output: 95

Я привожу здесь несколько примеров о нескольких способах деструктурирования массивов в JavaScript. запустите все примеры на своих машинах и поймите концепции, хотя я объяснил каждую строку с помощью комментариев

// Destructuring an array with rest syntax

const array = [1, 2, 3, 4]; 
// Initialize an array with four elements

const [a, b, ...rest] = array; 
// Destructure the array into three variables: a, b, and rest 
// rest is an array containing the remaining elements

console.log(a); // 1
console.log(b); // 2
console.log(rest); // [3, 4]
// Destructuring an array and skipping elements

const array = [1, 2, 3, 4]; 
// Initialize an array with four elements

const [, , c] = array; 
// Destructure the array, skipping the first two elements 
// extracting the third element into the variable c

console.log(c); // 3
// Destructuring an array and setting default values

const array = [1]; 
// Initialize an array with one element

const [a, b = 2] = array; 
// Destructure the array into two variables: a and b. 
// Set a default value of 2 for b if the array has fewer than two elements

console.log(a); // 1
console.log(b); // 2
// Destructuring nested arrays

const array = [1, [2, 3], 4]; 
// Initialize an array with three elements

const [a, [b, c], d] = array; 
// Destructure the array into four variables: a, b, c, and d

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3
console.log(d); // 4
// Destructuring nested objects
const obj = { a: 1, b: { c: 2, d: 3 } }; 
// Initialize an object with two properties: a and b

const { a, b: { c, d } } = obj; 
// Destructure the object and its nested property b into three variables: a, c, and d

console.log(a); // 1
console.log(c); // 2
console.log(d); // 3


// The code initializes an object obj with two properties: a and b. 
// Then, it uses destructuring syntax to extract the values of a, c, 
// and d from the object and its nested property b.
// the object destructuring syntax is used to 
// extract the values of the a and b properties from the obj object, 
// and assign them to variables with the same name. 
// The value of the b property is also destructured, 
// so that the values of its c and d properties are assigned to variables c and d, respectively.
// Destructuring arrays and objects in function parameters

function foo([a, b, c]) 
{ 

  console.log(a, b, c);
}

// Destructure the first argument of the function 
// into three variables: a, b, and c
foo([1, 2, 3]); // 1 2 3


function bar({ a, b, c }) 
{ 

  console.log(a, b, c);
}
// Destructure the first argument of the function into 
// three variables: a, b, and c
bar({ a: 1, b: 2, c: 3 });  // 1 2 3

Вот пример деструктуризации в JavaScript с использованием простой HTML-формы:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

<style>
    /* Some basic styling for the form */
/* Some basic styling for the form */
form {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}

label {
  display: block;
  margin-bottom: 0.5em;
}

input[type="text"], input[type="number"] {
  width: 80%;
  padding: 0.5em;
  font-size: 1em;
  border: 1px solid #ccc;
}

button[type="submit"] {
  margin-top: 1em;
  padding: 0.75em 1.5em;
  font-size: 1em;
  color: white;
  background-color: #007bff;
  border: none;
  border-radius: 0.25em;
}

button[type="submit"]:hover {
  background-color: #0069d9;
  cursor: pointer;
}


</style>    
</head>
<body>
    <form id="form">
        <label for="name">Name:</label><br>
        <input type="text" id="name" name="name"><br>
        <label for="email">Email:</label><br>
        <input type="text" id="email" name="email"><br>
        <label for="age">Age:</label><br>
        <input type="number" id="age" name="age"><br>
        <button type="submit">Submit</button>
      </form>


<script>
const form = document.getElementById('form');

form.addEventListener('submit', (event) => {
  // Prevent the form from actually submitting
  event.preventDefault();

  // Destructure the form data from the event object
  const { name, email, age } = event.target.elements;

  // Print the form data to the console
  console.log(`Name: ${name.value}`);
  console.log(`Email: ${email.value}`);
  console.log(`Age: ${age.value}`);
});


</script>      
</body>
</html>

Этот код использует метод addEventListener для присоединения прослушивателя событий к элементу формы. Прослушиватель событий — это функция, которая будет вызываться при возникновении в форме события submit.

Функция получает в качестве аргумента объект event, который представляет собой объект, представляющий произошедшее событие. В данном случае событием является отправка формы.

Функция использует метод preventDefault объекта event, чтобы предотвратить стандартное поведение отправки формы, которое заключается в перезагрузке страницы.

Затем функция деструктурирует элементы формы name, email и age из объекта event.target.elements. Это объект, представляющий элементы формы, и каждый элемент формы имеет свойство name, соответствующее его атрибуту name.

event.target относится к элементу, на котором произошло событие. В данном случае событие — это событие submit элемента формы, поэтому event.target — это элемент формы.

Свойство elements элемента формы — это объект, представляющий элементы формы. Это коллекция всех элементов формы, содержащихся в форме, и каждый элемент формы является свойством объекта elements. Имя каждого свойства — это атрибут name элемента формы, а значением свойства является сам элемент формы.

Например, если форма имеет текстовый ввод с атрибутом name «электронная почта», то объект elements будет иметь свойство с именем «электронная почта», значение которого является элементом текстового ввода.

Деструктурируя элементы формы name, email и age из объекта event.target.elements, код получает прямой доступ к элементам формы и их значениям, без необходимости запрашивать их у DOM.

Наконец, функция записывает значения элементов формы name, email и age в консоль.

операторы console.log используют интерполяцию строк для записи данных формы в консоль. Синтаксис ${name.value}, ${email.value} и ${age.value} используется для вставки значений переменных name, email и age в строку.

Вот как это работает:

1. Строка заключена в обратные кавычки (`). Это позволяет нам использовать интерполяцию строк, что означает, что мы можем включать выражения внутри строки, заключая их в ${ }.
2. Внутри фигурных скобок у нас есть выражение name.value. Это выражение оценивается, и его результат преобразуется в строку, которая затем вставляется в строку вместо выражения.
3. Тот же процесс повторяется для выражений email.value и age.value.

Вот код, переписанный без интерполяции строк. Вы также можете написать так:

const form = document.getElementById('form');

form.addEventListener('submit', (event) => {
  // Prevent the form from actually submitting
  event.preventDefault();

  // Destructure the form data from the event object
  const { name, email, age } = event.target.elements;

  // Print the form data to the console
  console.log('Name: ' + name.value);
  console.log('Email: ' + email.value);
  console.log('Age: ' + age.value);
});