Деструктурирующее присваивание в JavaScript ES6
В этой статье вы узнаете, как использовать функцию деструктурирования, появившуюся в ES6, которая позволяет разобрать объект или массив в отдельные переменные.
ES6 предоставляет новую функциональность, называемую деструктурирующим присваиванием, которая позволяет вам брать объект или массив и разбивать его на отдельные переменные без использования промежуточной переменной. Назначение деструктуризации состоит в том, чтобы упростить работу с массивами и объектами JavaScript.
Деструктурирование массива
Предположим, что у нас есть следующий массив баллов за некий конкурс.
var scores = [60, 50, 30, 10];
Чтобы назначить переменным значения элементов массива, мы используем следующий синтаксис.
let [x, y, z] = scores;
console.log (х); // 60
console.log (у); // 50
console.log (г); // 30
Переменные x, y и z будут принимать значение первого, второго и третьего элементов массива баллов. Четвертый элемент массива баллов отбрасывается.
Деструктурирование массива и оператор …rest
Можно взять все оставшиеся элементы массива и поместить их в новый массив с помощью оператора ...rest . Вот пример.
let [a, b, ...args] = scores;
console.log (а); // 60
console.log (б); // 50
console.log (args); // [30, 10]
Переменные a и b получают значения первых двух элементов массива баллов. А переменная args получает все остальные аргументы, которые являются последними двумя элементами массива баллов.
С помощью деструктуризации, можно разобрать массив следующим образом:
var a, b;
[a, b] = [10, 20];
console.log (а); // 10
console.log (б); // 20
Значения по умолчанию
Если значение, взятое из массива, не определено, вы можете назначить переменной значение по умолчанию.
let a, b;
[a = 1, b = 2] = [10];
console.log (а); // 10
console.log (б); // 2
Перемещение переменных
Деструктуризация массива позволяет легко менять значения переменных без использования временной переменной:
let a = 10, b = 20;
[a, b] = [b, a];
console.log (а); // 20
console.log (б); // 10
Разбор массива, возвращаемого из функции
Функция может возвращать массив значений. Функция деструктурирования массива облегчает разбор возвращаемого массива из функции.
Рассмотрим следующий пример.
function returnArr() {
return [10, 20, 30];
}
let [a, b, c] = returnArr();
console.log (а); // 10
console.log (б); // 20
console.log (с); // 30
В этом примере функция returnArr() возвращает массив из трех элементов. Мы использовали деструктурирование массива для разбора элементов массива в отдельные переменные a, b и c в одной строке кода.
Также мы можем использовать деструктурирование массива и игнорировать некоторые значения перед возвращением. Предположим, вас интересует только первый и третий элементы, возвращаемые функцией returnArr(), вы можете игнорировать второй элемент массива следующим образом:
[a,, c] = returnArray();
console.log (а); // 10
console.log (с); // 30
Таким образом в этой статье мы познакомились с вами с тем, что такое деструктурирующее присваивание в стандарте JavaScript ES6. В следующей статье мы поговорим о деструктурировании объектов JavaScript.
-
Создано 15.05.2018 08:26:45
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.