Деструктуризация в JavaScript означает копирование значений массива или свойств объекта в переменную.
Деструктуризация не означает разрушения. Это не так, потому что массив или объект, из которого вы можете скопировать значения, не изменяется.
Это выражение JavaScript появилось в ECMAScript 2015/16.
В этой статье вы узнаете, как деструктурировать значения в массиве, свойства объекта и другие способы деструктуризации.
Базовая деструктуризация в массивах
Деструктуризация упрощает доступ к значениям массива.
Например,
Если вы хотите получить доступ к значениям в массиве без деструктуризации,
const array = ["deer","greet","heyy"]; const arr = array[0]; const arr1 = array[1]; console.log(arr); //deer console.log(arr1); //greet
В этом примере вы присвоили значения, используя их индекс. А вот с деструктуризацией так и будет.
const array = ["deer","greet","heyy"]; const [arr,arr1,arr2] = array; console.log(arr); //deer console.log(arr1); //greet
Таким образом, вы можете одновременно присваивать значения переменной array новым переменным.
Обмен значениями
В массивах вы можете поменять местами значения в переменной, поменяв местами. Обычно для этого вам понадобится третья переменная.
Вот пример:
let arr = "deer"; let arr1 = "greet"; console.log(arr); //deer console.log(arr1); //greet let newArr = arr1; //assigning the value "greet" to a new variable "newArr" console.log(newArr); //greet arr1 = arr; //assigning the value "deer" to the variable "arr1" arr = newArr; //assigning the value "greet" to the variable "arr" console.log(arr1); //deer console.log(arr); //greet
Но с деструктурированием вы можете сделать это без третьей переменной.
const array = ["deer","greet","heyy"]; let [arr,arr1,arr2] = array; console.log(arr); //deer console.log(arr1); //greet [arr,arr1] = [arr1,arr]; //using destructuring to swap the values console.log(arr); //greet console.log(arr1); //deer
Пропуск значений
Вы также можете пропустить значения при присвоении значений переменной. Вы делаете это, добавляя дополнительную запятую к массиву, в который вы деструктурируете значения. Запятая указывает индекс значения.
В этом примере запятая в начале присваивания указывает на первое значение массива.
const array = ["deer","greet","heyy"]; const [,arr1,arr2] = array; //skipping the first value and using only the second and third console.log(arr1); //greet console.log(arr2); //heyy
Использование деструктуризации массива с итераторами
Деструктуризация массива работает со всеми итерируемыми значениями. Вы можете деструктурировать массив любого итерируемого значения. Примерами таких итерируемых объектов являются строки, наборы и т. д.
Например, используя деструктурирование массива для строки,
const [a,b] = "abc"; console.log(a); //a console.log(b); //b
пример использования деструктуризации массива в наборе,
const array = ["deer","greet","heyy"]; const exampleSet = new Set(array); const [arr,arr1,arr2] = exampleSet; console.log(arr); //deer console.log(arr1); //greet console.log(arr2); //heyyy
Деструктуризация массива работает только с итерируемыми значениями. Неитерируемые значения дадут ошибку. Примерами неитерируемых объектов являются null и undefined.
Кроме того, javascript вернет undefined, если массив, который вы деструктурируете, пуст.
например,
const [arr,arr1] = []; console.log(arr); //undefined console.log(arr1); //undefined
Вот еще один сценарий:
const array = []; const [arr,arr1] = array; console.log(arr); //undefined console.log(arr1); //undefined
Значения по умолчанию в массивах
При написании кода бывают случаи, когда вы можете быть не уверены в присваиваемых вами значениях. Если это значение равно undefined, вам потребуется значение по умолчанию. Деструктуризация упрощает присвоение массиву значений по умолчанию.
См. этот пример:
const array = ["deer","greet","heyy"]; const [arr,arr1,arr2,arr3] = array; console.log(arr); //word console.log(arr1); //fang console.log(arr2); //grey console.log(arr3); //undefined
Чтобы назначить значение по умолчанию для arr3
const array = ["deer","greet","heyy"]; //To assign a default value to arr3 const [arr,arr1,arr2,arr3="mirrors"] = array; console.log(arr3); //mirrors
При этом вы можете присвоить значение по умолчанию переменной во время деструктуризации.
Использование остального синтаксиса
Деструктуризация в Javascript также использует оставшийся синтаксис. Он называется «остаточным» синтаксисом, так как охватывает остальные элементы массива. Синтаксис ..., затем имя созданного массива. Имя «остальное», которое появляется после трех точек, не является обязательным. Вы можете использовать другое имя после трех точек.
Синтаксис:(...rest)
При использовании остаточного синтаксиса всегда убедитесь, что он идет последним после других элементов, так как в противном случае будет выдана ошибка.
Вот пример отдыха в массиве:
Используя предыдущий пример,
const array = ["deer","greet","heyy"]; const [arr, …newArr] = array; console.log(arr); //deer console.log(newArr); //[ greet, heyy]
Как видите, массив newArr был создан из старого массива.
Деструктуризация объекта
С помощью деструктуризации объекта вы можете получить значения свойств из объекта. Объекты используют синтаксис, отличный от массивов, при присвоении значений переменным.
Чтобы присвоить значения без деструктурирования, было бы:
const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999}; //example of the object
//To access the object property
const words = obj.word;
const boolean = obj.bool;
console.log(words) //dataTypes
console.log(boolean) //true
Вот как присваивать значения объектам с помощью деструктуризации.
const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999}; //example of the object//To access the object property
const { word, bool } = obj;
console.log(word) //dataTypes
console.log(bool) //true
Это упрощает присвоение значений.
Примечание. Порядок объектов не имеет значения, и вы должны использовать одно и то же имя.
Это приведет к следующей ошибке:
const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999};
const { words, boolean } = obj;
console.log(words)
console.log(boolean)
//ReferenceError: obj is not defined
Это связано с тем, что JavaScript не хранит переменные words и boolean в качестве ссылок на объект, отсюда и ошибка.
Однако при деструктуризации значениям можно присвоить разные имена.
Присвоение различных имен свойствам объекта
Вы можете назначать различные имена свойствам объекта для доступа к ним.
const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999};
const { word: words, bool: boolean } = obj;
console.log(words) //dataTypes
console.log(boolean) //true
Использование деструктуризации объектов в массивах
Вы можете использовать индекс массива как «свойство», когда применяете деструктуризацию объектов к массивам.
const {0:arr, 1:arr1, 2:arr2} = ["deer","greet","heyy"];
console.log(arr); //deer
console.log(arr2); //heyy
Первоначальное объявление переменной
В объектах вы можете сначала объявить переменную, прежде чем присвоить ей значение.
let word;
const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999 };
({ word } = obj);
console.log(word); //dataTypes
Примечание: во время присваивания используйте круглые скобки, иначе JavaScript воспримет это как блочную функцию и вернет синтаксическую ошибку.
Использование остального синтаксиса в объектах
Вы можете использовать остальной синтаксис в объекте. Как и в массивах, оставшийся синтаксис идет в конце и охватывает остальные свойства объекта.
Вот пример:
const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999}; //example of the object//To access the object property
const { word: words, ...others } = obj;
console.log(words); //dataTypes
console.log(others); //{ num:0001, bool:true, bigInt:2.99999999 }
Примечание.
Как и в случае с массивами, javascript вернет undefined, если он настроен на деструктурирование пустого объекта. Деструктуризация объекта вернет ошибку типа, если значения равны undefined и null.
Значения по умолчанию в объектах
В объекте вы можете присвоить значения по умолчанию переменным при деструктуризации. Если свойства не было в объекте, вы могли создать переменную и присвоить ей значение по умолчанию.
Например,
const obj = { word: "dataTypes", num: 0001, bool: true, bigInt: 2.99999999, }; //example of the objec//To access the object property
const { word, bool, num, str="street" } = obj;
console.log(word); //dataTypes
console.log(str); //street
В этом примере значение по умолчанию street было присвоено переменной str при деструктуризации.
Краткое содержание
Это суммирует основные особенности деструктуризации в JavaScript. Надеюсь, вы чему-то научились из этого. Если вам понравилась эта статья, вы можете поделиться ею с другом или оставить комментарий. Спасибо за внимание.
Нужна дополнительная информация? Ознакомьтесь с этим руководством, чтобы узнать больше о деструктуризации в javascript.
