This implementation project isShort URL generator, users only need to enter the URL to get a unique short URL. Each set of URLs will only correspond to a set of short URLs, so even if you re-enter the URL, you will get the same result.
The short URL is composed of 5 elements randomly selected from the following elements:
0 ~ 9 integer lowercase English letters uppercase English letters
Our intuition would be to first stuff these elements into an array and write a function that randomly generates short URLs. But this encounters a less thorny, but annoying problem:
what to do? I really don’t want to put these elements into the array manually😑
Since we have to write a function to randomly generate a short URL, is it possible to also use a function to automatically include an array of English letters + integers 0 ~ 9?
After some inquiry, I finally succeeded in writing it. If you are reading this article and feel similar laziness, please refer to the following methods.
function generateCollection()
const digits = […Array(10)].map((_, i) => i);
const lowerCaseLetters = […Array(26)].map((_, i) =>
String.fromCharCode(i + 97)
);
const upperCaseLetters = […Array(26)].map((_, i) =>
String.fromCharCode(i + 65)
);
return digits.concat(lowerCaseLetters, upperCaseLetters);
produces an array of 26 slots
First, let’s go through Array() constructorGenerate an array and enter the parameter 26, which means we want this array to have space for 26 items.Use the console to print it out and it will display [empty x 26]。
Array(26);
Then use the destructor to throw these empty spaces into the array. At this point, the array is still undefined:
[…Array(26)]
Get an integer from 0 ~ 25
Next, we hope that the 26 empty slots in the array can be filled with integers from 0 to 25. We can make good use of them here. array.map() The method requires a callback function. Each item in the array will be captured one by one by map, processed by the callback function, and then a new array will be returned.
In the callback function, you can actually call the index parameter. We just need to insert 0 ~ 25 into the array through index.
As for the first parameter element of the callback function, since they are currently undefined and we don’t need them, we can simply add a bottom line to make it clear.
[…Array(26)].map((_, i) => i);
Get Roman letters from numbers
The next step is the climax. We obtained 0 ~ 25 in order to use String.fromCharCode()convert numbers into UTF-16 code units.
[…Array(26)].map((_, i) => String.fromCharCode(i));
Of course, things like x00, x01 and Roman letters are still very different, so we will refer to the ones provided by w3school in the future.Chartthe part in Roman letters is the same as the familiar ASCII number.
After comparison, it can be found that the serial numbers of lowercase letters are 97 ~ 122, and the serial numbers of uppercase letters are 65 ~ 90. Great, let’s apply this pattern to our code right away.
[…Array(26)].map((_, i) => String.fromCharCode(i + 97));
Merge lowercase letters, uppercase letters, integer arrays
Uppercase letters and lowercase letters are processed in basically the same way. Finally, three different arrays are merged through array.concat().
function generateCollection()
const digits = […Array(10)].map((_, i) => i);
const lowerCaseLetters = […Array(26)].map((_, i) =>
String.fromCharCode(i + 97)
);
const upperCaseLetters = […Array(26)].map((_, i) =>
String.fromCharCode(i + 65)
);
return digits.concat(lowerCaseLetters, upperCaseLetters);
