В моем последнем проекте я работал над реализацией Minesweeper на React-Redux. В этом процессе я часто обращаюсь к определенным квадратам в сетке. Обычно я делаю это, набрав:
grid[1][5]
что дало мне шестую клетку во втором ряду. (Ах, нулевая индексация.)
Для некоторой функциональности мне нужно было передавать наборы координат в виде массивов, а-ля [1, 5]. Чтобы получить доступ к этим аргументам, я набрал что-то вроде
grid[array[0]][array[1]]
Грязно, но ладно. По крайней мере, так я думал, прежде чем потратил добрых полчаса на отладку, не заметив ошибку прямо перед моим лицом. я на самом деле набрал
grid[array[0][array[1]]]
Я смутно помнил, что существует синтаксис ES6, который позволил бы избежать этой проблемы, но в то время я был так счастлив, обнаружив ошибку, что не стал заниматься рефакторингом. Оказывается, эта фича называется деструктурирующее присваивание, и это здорово.
Деструктуризация — это мощный и удобный способ извлечения значений из объектов/массивов Javascript. Я мог бы избавить себя от головной боли, если бы просто сказал:
let [row, column] = array row => 1 column => 5 grid[row][column]
Он также работает с различными уровнями вложенности! Допустим, я просматривал всю свою сетку (скажем, 6х6) и хотел снова найти квадрат 1, 5.
let [ ,[ , , , , , square]] = grid
square
=> {clicked: false, column: 5, flag: false, mine: false, row: 1, text: 3}
Также возможна деструктуризация объекта. Я знаю, что он немного круглый, но для демонстрации я возьму номер строки и столбца из квадратного объекта.
let {row: a, column: b} = square
a
=> 1
b
=> 5
Чем более вложенными являются ваши данные, тем более сложной может выглядеть ваша деструктуризация. Это только поверхностные сведения о возможностях, но есть еще масса информации.
This tutorial is quite detailed, with fun examples. Here’s a textbook chapter that includes a behind-the-scenes look at the algorithm. And here’s somebody’s great Gist if you just want to see some code in action.
