It’s been a while since I’ve written a blog about a technical problem I’ve solved. The truth is I haven’t been grinding on HackerRank or LeetCode as much as I used to, and all of my time has been spent working on projects.

自从我写了一篇有关已解决的技术问题的博客以来已经有一段时间了。 事实是，我没有像以前那样在HackerRank或LeetCode上花很多功夫，而我所有的时间都花在了项目上。

That changed this week. Today’s problem took me a long time to solve, longer than I’d like to admit, but provided a great opportunity to shake out the cobwebs and get back on that LeetCode grind. The solution I came up with meets the O(1) space complexity requirement, and runs in O(n * log n) time complexity (I think).

这周改变了。 今天的问题花了我很长的时间来解决，比我想承认的要长，但是却为摆脱蜘蛛网并重新获得LeetCode的磨练提供了绝佳的机会。 我想出的解决方案满足O(1)空间复杂度要求，并以O(n * log n)时间复杂度运行(我认为)。

I’d also like to mention that I found CodeSignal recently, and I have been enjoying it so far. I only just started their Interview Practice track, but the UI is a step up from LeetCode/HackerRank, their feature sets and test cases are solid, and the amount of information given for each problem has been good. Check it out if you need a change of scenery.

我还要提及的是，我最近找到了CodeSignal ，到目前为止我一直都很喜欢它。 我只是刚刚开始他们的面试练习轨道，但是UI是从LeetCode / HackerRank升级的，他们的功能集和测试用例是可靠的，并且为每个问题提供的信息量一直很好。 如果需要改变风景，请检查一下。

So, let’s get solving.

所以，让我们解决。

问题 (THE PROBLEM)

Here is a link to the problem on Code Signal

这是代码信号问题的链接

You are given an n x n 2D matrix that represents an image. Rotate the image by 90 degrees (clockwise).Note: Try to solve this task in-place (with O(1) additional memory), since this is what you’ll be asked to do during an interview.Constraints:  1 ≤ a.length ≤ 100  a[i].length = a.length  1 ≤ a[i][j] ≤ 104Input/Output:  [execution time limit] 4 seconds (js)  [input] array.array.integer a  [output] array.array.integer

测试 (THE TESTS)

崩溃 (THE BREAK DOWN)

On the surface, this seems simple. But there is a spanner in the works. So, as we always do, let’s break down the information given to us before doing anything else:

从表面上看，这似乎很简单。 但是正在制作一个扳手。 因此，像往常一样，让我们​​先分解提供给我们的信息，然后再执行其他任何操作：

You are given an n x n 2D matrix that represents an image.

We get a very important piece of information in the first sentence: n x n 2D matrix. n x n represents the number of rows/columns we should expect in a given matrix, and since the matrix is n x n, the number of rows will always be equal to the number of columns. This is huge, as it means the matrix is linearly dependent, and if we want to, we can perform operations on both rows and columns within the same iteration.

我们在第一句话中获得了非常重要的信息： nxn 2D matrix 。 nxn表示我们应该在给定矩阵中期望的行数/列数，并且由于矩阵为nxn ，因此行数将始终等于列数。 这是巨大的，因为这意味着矩阵是线性相关的，并且如果需要，我们可以在同一迭代中对行和列执行操作。

Rotate the image by 90 degrees (clockwise)

This is our task. In the context of a n x n 2D matrix, we basically need to flip each row into a column. But we need to do so inversely.

这是我们的任务。 在nxn 2D matrix的上下文中，我们基本上需要将每一行翻转为一列。 但是我们需要相反地做。

So, if we look at Test Case #2:

因此，如果我们看一下测试用例2：

This took me a while to visualize, or at least visualize in relative to how to do it with code, so I wanted to go over it here.

我花了一些时间来可视化，或者至少相对于如何使用代码来可视化，因此我想在这里进行介绍。

Note: Try to solve this task in-place (with O(1) additional memory), since this is what you’ll be asked to do during an interview.

This is the twist that makes things interesting.

这是使事情变得有趣的转折。

I interpreted this to mean:

我的解释是：

This is a sorting algorithm: Swap numbers and set variables onlyNo extra data sets: No objects to store indices. No empty arrays to push into. Nothing. Everything must be done inline.No built in array methods: Since I am not 100% sure on the space complexity for each individual method in JavaScript (maybe I should be), that means no built in methods. No reverse(), map(), sort(), filter(), indexOf(), shift(), push(), etc.

Are there methods with O(1) space complexity? Of course.

是否存在O(1)空间复杂度的方法？ 当然。

Did I want to use them? No.

我是否要使用它们？ 没有。

约束 (THE CONSTRAINTS)

I am not going to worry about the majority of the usual edge cases we might encounter. All of the potential edge cases I could think about were covered by the constraints:

我不会担心我们可能会遇到的大多数常见情况。 我可以考虑的所有潜在的极端情况都被约束所覆盖：

1 ≤ a.length ≤ 100

a represents the entire matrix, and a.length represents the amount of rows and columns. Since we have a lower limit of 1 ≤ a.length, we do not have to worry about a given matrix being empty. No if statements handling edge cases are needed. The upper limit of a.length ≤ 100 tells me we are going to have to be careful about the time complexity of our solution. 100 rows and 100 columns is a lot to cycle through.

a代表整个矩阵， a.length代表行和列的数量。 由于我们的下限为1 ≤ a.length ，因此我们不必担心给定矩阵为空。 if需要处理极端情况的语句， if No。 a.length ≤ 100的上限告诉我，我们将必须注意解决方案的时间复杂性。 100行100列需要循环很多。

a[i].length = a.length

This is a reaffirmation of what we were told before: n x n 2D matrix. a[i].length = a.length is just another way of saying “The amount of rows in a given matrix will always be equal to the amount of columns.”

这是对之前所讲内容的重申： nxn 2D matrix 。 a[i].length = a.length只是另一种说法： “给定矩阵中的行数将始终等于列数。”

1 ≤ a[i][j] ≤ 104

a[i][j] represents each number in the matrix. While this is not the most essential constraint we get (all we are doing is swapping numbers around), it is always good to have lower and upper limits on the elements we should expect.

a[i][j]代表矩阵中的每个数字。 尽管这不是我们得到的最基本的约束(我们所做的只是交换数字)，但对我们应该期望的元素设置上限和下限总是很好的。

With that being said, let’s move onto solving this problem.

话虽如此，让我们继续解决这个问题。

犯罪嫌疑人 (THE SUSPECT)

I wrote more pseudo code for this problem than any other problem I’ve ever solved, and spent way more time writing pseudo code than writing/testing actual code. So I am going to structure this blog a little differently.

我为这个问题编写的伪代码比我已经解决的任何其他问题都要多，并且与编写/测试实际代码相比，花费更多的时间编写伪代码。 因此，我将以一些不同的方式来构建此博客。

First, I want to go into more detail about each iteration. My solution follows an onion-like swapping pattern, or what I am going to call Onion Swap.

首先，我想详细介绍每个迭代。 我的解决方案遵循类似洋葱的交换模式，或者称之为“洋葱交换”。

To demonstrate, let’s take Text Case #3:

为了演示，让我们看一下文本案例3：

Starting at row[0][0], we want all of the numbers to move in a clockwise pattern. At the end of the first iteration, we want row[0][0] to be the correct number regardless of what we do. So, for Test Case #3, we want 6 to be 5, which is located at row[3][0]. We don’t want to have to go back to row[0][0] throughout the rest of the execution of our code, so it has to end up as the correct number in order for this to work. We are visiting it once each iteration and that’s it.

从row[0][0] ，我们希望所有数字都按顺时针方向移动。 在第一次迭代结束时，无论我们做什么，我们都希望row[0][0]是正确的数字。 因此，对于测试用例＃3，我们希望6为5，它位于row[3][0] 。 在执行代码的其余部分中，我们不需要返回到row[0][0] ，因此它必须以正确的数字结尾才能起作用。 我们每次迭代都访问一次，仅此而已。

The same goes for each corner. At the end of the first iteration, each corner must be at it’s correct and final value.

每个角落都一样。 在第一次迭代结束时，每个角点必须处于正确的最终值。

We can do this on the first iteration by nesting a second iteration, and swapping the values of each corner:

我们可以在第一个迭代中执行此操作，方法是嵌套第二个迭代，然后交换每个角的值：

After performing these 3 swaps, each value at the corners of the matrix are in their correct and final positions, and we never have to worry about them again.

完成这3次交换后，矩阵角上的每个值都处于正确的最终位置，我们不必再担心它们。

On the 2nd loop of our iteration, we can repeat the same process for the number at row[0][1], and swap it with the next number in the layer:

在迭代的第二个循环中，我们可以对row[0][1]处的数字重复相同的过程，并将其与图层中的下一个数字交换：

We now have another set of numbers in the correct position. We can repeat this swapping pattern 1 more time on the 3rd iteration of our nested loop and get all of the numbers in the outer most layer of the matrix in their correct and final positions:

现在，我们在正确的位置放置了另一组数字。 我们可以在嵌套循环的第3次迭代中重复此交换模式1次，并获得矩阵最外层中所有数字的正确位置和最终位置：

We also want our nested loop to only run 3 times since we have already swapped the last element in row[0] with row[0][0]. We can do this by setting the upper limit of our nested loop to a.length - 1.

我们还希望嵌套循环仅运行3次，因为我们已经将row[0]的最后一个元素替换为row[0][0] 。 我们可以通过将嵌套循环的上限设置为a.length - 1来做到这一点。

This Onion Swap will also work on any inner layer in the matrix as well. The same pattern of flipping the numbers clockwise remains true. We can increment and use i and j to access each subsequent layer.

该洋葱交换也将适用于矩阵中的任何内层。 顺时针翻转数字的相同模式仍然适用。 我们可以增加并使用i和j来访问每个后续层。

If we set j = i, on the 2nd iteration of the entire loop where i = 1, we can access the inner layer of Test Case #3:

如果在i = 1的整个循环的第二次迭代中设置j = i ，则可以访问测试用例＃3的内层：

All the values in the “inner layer” of the matrix are now in their correct and final position as well. The entire matrix has been rotated 90 degrees clockwise and it only took 4 iterations. We can exit out of our loop and return a.

矩阵“内层”中的所有值现在也都处于正确的最终位置。 整个矩阵已顺时针旋转90度，仅进行了4次迭代。 我们可以退出循环并return a 。

变量 (THE VARIABLES)

Now that we've found a repeatable pattern to follow that rotates the matrix 90 degrees, we need to start setting up and assigning variables so we can get this pattern to work with any n x n matrix given to us.

现在，我们已经找到了可重复的模式，可以将矩阵旋转90度，我们需要开始设置和分配变量，以便可以使该模式与提供给我们的任何nxn矩阵一起使用。

If we take a look at the operations for each iteration, there is a pattern:

如果我们看一下每次迭代的操作，则有一个模式：

So that tells me we are going to need extra variables to increment and decrement through each loop of the nested iteration. We can use j for the variable we need to increment as j naturally increments through each nested iteration.

因此，这告诉我，在嵌套迭代的每个循环中，我们将需要额外的变量来递增和递减。 我们可以将j用作需要递增的变量，因为j在每次嵌套迭代中自然递增。

But we will need to add another variable we can decrement…somewhere.

但是我们将需要添加另一个可以递减的变量。

If we set j = i, we can replace row[0][0] with row[i][j] as j will naturally start in the correct position on every re-iteration for each inner layer. With Onion Swap, j starts outwards and works inward.

如果设置j = i ，则可以用行[i][j]替换row[0][0] ，因为j自然会在每个内层的每次重复上都从正确的位置开始。 使用洋葱交换， j向外开始并向内工作。

But a problem arises when we look at the 2nd loop of the entire iteration:

但是，当我们查看整个迭代的第二个循环时，就会出现问题：

The first part looks fine. But the pattern for the 2nd part isn’t the same as the first iteration. The “inner layer” of Test Case #3 is 2 x 2, and represents the smallest sub-matrix we would need to swap numbers for.

第一部分看起来不错。 但是第二部分的模式与第一次迭代的模式不同。 测试用例3的“内层”是2 x 2 ，表示我们需要交换数字的最小子矩阵。

That’s okay. The pattern still remains true for every layer of the matrix that isn’t 2 x 2. We can solve this by initializing the variable we are decrementing in the parent for loop with (a.length - 1) - i and scope it outside the nested iteration to prevent it from resetting every time the nested loop iterates.

没关系。 对于不是2 x 2的矩阵的每一层，模式仍然保持正确。 我们可以通过初始化我们在父递减变量解决这个问题for循环使用(a.length - 1) - i和范围是嵌套迭代之外，以防止它重新每次嵌套循环迭代。

Let’s take another look at our iterations, but add in the variable we want to decrement x, and substitute the appropriate static values with x, i and j:

让我们再来看一次迭代，但是添加我们要减小x的变量，并用x ， i和j替换适当的静态值：

That leaves us with 1 static value we need to figure out.

剩下的1个静态值需要我们找出。

And from the looks of it, it follows a pattern as well. It remains constant within each nested loop, but needs to be decrements by 1 on each iteration of the entire loop. So, we can use that and add another variable y that is initialized with a.length - 1. This is to make sure it remains dynamic to the size of a given matrix. We can also scope it outside both loops so it does not reset throughout the entire execution of our solution, and decrement y every time the entire for loop iterates:

从外观上看，它也遵循一种模式。 它在每个嵌套循环中保持不变，但是在整个循环的每次迭代中都需要减1。 因此，我们可以使用它并添加另一个以a.length - 1初始化的变量y 。 这是为了确保它在给定矩阵的大小上保持动态。 我们还可以在两个循环之外定义它的范围，这样它就不会在解决方案的整个执行过程中重置，并且在每次for循环迭代时都会递减y ：

That fulfills all of the variable requirements needed to put this Onion Swap stuff into practice.

这满足了将“洋葱交换”产品付诸实践所需的所有可变要求。

设置 (THE SETUP)

So, let’s actually put this into code.

因此，让我们将其实际放入代码中。

The way the two for loops are going to work is like this:

两个for循环的工作方式如下：

The parent loop will iterate through each “layer” of the matrix. The amount of “layers” a matrix has is determined by half it’s length or a.length / 2. So if we set the parent loop’s upper limit to i < a.length / 2 it should properly iterate through every “layer” of the matrix, without wasting any iterations. If it does, this entire house of cards will come crashing down.

父循环将遍历矩阵的每个“层”。 矩阵的“层数”由其长度的一半或a.length / 2 。 因此，如果将父循环的上限设置为i < a.length / 2则它应该正确地迭代矩阵的每个“层”，而不会浪费任何迭代。 如果是这样，这整个牌屋将崩溃。

The nested loop is what is looping through the elements in each row and column. The amount of elements in each row/column will always be equal, but for every inner “layer,” the amount of rows/columns/elements we need to iterate through gets smaller and smaller, until we reach the center.

嵌套循环是循环遍历每一行和每一列中的元素的内容。 每个行/列中的元素数量将始终相等，但是对于每个内部“层”，我们需要迭代的行/列/元素的数量越来越小，直到到达中心。

For a given matrix, if n x n is an even number, then the center of the matrix will be 2 x 2, and we will need to perform 1 last Onion Swap. If n x n is an odd number, the center of the matrix will be 1 x 1, for which we don’t need to swap anything, and we can exit out of our iterations.

对于给定的矩阵，如果nxn是偶数，则矩阵的中心将是2 x 2 ，并且我们将需要执行最后1次“洋葱交换”。 如果nxn是一个奇数，则矩阵的中心将是1 x 1 ，为此我们不需要交换任何东西，并且可以退出迭代。

That makes sense if we look back at the pattern we needed the y variable for. It’s basically an upper bound for the position of elements we want to iterate through on each inner layer. So we can use y as an upper bound in our nested loop and set j < y to prevent looping through layers that don’t exist.

如果我们回顾一下需要y变量的模式，那是有道理的。 从本质上讲，这是我们要在每个内层上迭代的元素的位置的上限。 因此，我们可以将y用作嵌套循环的上限，并设置j < y来防止循环通过不存在的图层。

With that being said, we can set up our two for loops, our variables, and how we want to decrement the x and y variables:

话虽如此，我们可以设置两个for循环，变量以及如何减少x和y变量：

And in the middle of that for loop sandwich, we can add all of the Onion Swap logic. We just need to remove the pseudo code and replace row with a:

而在中间的那个for循环三明治，我们可以添加所有的洋葱交换逻辑。 我们只需要删除伪代码并将row替换a ：

最终的解决方案 (THE FINAL SOLUTION)

The only problem (and last problem) with the code we have written, is that we technically aren’t swapping anything. We are just replacing the value a[i][j] is currently at.

我们编写的代码唯一的问题(也是最后一个问题)是，从技术上讲，我们没有交换任何内容。 我们只是替换当前位于的值a[i][j] 。

We need 1 more variable t to store the number we are currently swapping so we can swap it with the number we are replacing it with:

我们还需要1个变量t来存储当前正在交换的数字，因此我们可以将其替换为要替换为的数字：

let t = a[i][j]

let t = a[i][j]

Then we need to swap that temporary variable with the value at the position we just swapped a[i][j] with:

然后，我们需要将该临时变量与刚刚交换a[i][j]的位置处的值交换a[i][j] ：

a[j][y] = t or a[y][x] = t or a[x][i] = t

a[j][y] = t或a[y][x] = t或a[x][i] = t

Then, we need to update t’s value with the new value of a[i][j] so we can repeat the process again for our 2nd and 3rd swaps of the iteration:

然后，我们需要用a[i][j]的新值更新t的值，以便可以对迭代的第二次和第三次交换再次重复该过程：

t = a[i][j]

t = a[i][j]

Finally, if we run our solution against the 5 test cases we have, we should be passing every test:

最后，如果针对5个测试用例运行解决方案，则应该通过每个测试：

Nice.

真好

任务完成 (MISSION COMPLETE)

So that was a mouth full, but a good problem to come back to after a month of not grinding. I also really like the solution I came up with (usually I’m not as satisfied), and making the Onion Swap work really pushed my problem solving abilities. At some point, I just really wanted to get it working, which is probably why I spent so much time on it.

所以这是一张满嘴，但是一个月不磨之后要回到上面的好问题。 我也非常喜欢我想出的解决方案(通常我不那么满意)，并且使“洋葱交换”工作真的推动了我的解决问题的能力。 在某个时候，我只是真的很想让它工作，这可能就是为什么我花很多时间在上面的原因。

Did I over complicate things? Maybe. But it was worth the effort, and surprisingly efficient.

我是否使事情复杂化了？ 也许。 但这值得付出努力，而且效率令人惊讶。

Once again, the blogs I write about solving LeetCode/HackerRank/CodeSignal problems aren’t about finding the solution with the lowest time or space complexity. Their focus is on the steps taken to come to a solution. I definitely understand my solutions won’t be the best or most efficient, but this time around I am pretty happy with the outcome.

同样，我写的有关解决LeetCode / HackerRank / CodeSignal问题的博客不是要找到时间或空间复杂度最低的解决方案。 他们的重点是要采取解决措施的步骤。 我当然知道我的解决方案不是最佳或最有效的，但是这次我对结果感到非常满意。

Either way, I hope you got some useful information, and may all your functions return true, and all your requests respond with 200.

无论哪种方式，我都希望您能获得一些有用的信息，并希望所有函数都返回true，并且所有请求均以200响应。

Stay safe…stay healthy…and keep fighting the good fight.

保持安全……保持健康……并继续打好仗。