30 seconds of Code: Get URL parameters
Get URL parameters
const getURLParameters = (url) = >
(url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
(preVal, curVal) = > (
(preVal[curVal.slice(0, curVal.indexOf('='))] = curVal.slice(curVal.indexOf('=') + 1)), preVal
),
{}
);
Copy the code
Process analytical
- through
String.prototype.match()
Method matches the key-value pairs of all parameters; - through
Array.prototype.reduce()
Consolidate all parameter key-value pairs into one object; window.location.search
Take to the URL?
The subsequent argument string can be passed to the function as an argumentgetURLParameters
Url parameter of. You can also pass the entire URL link string directly.
Technical analysis
Enter: URL string
Output: Parameter object
match
Match method: Match (reg) splits the string according to the regular reg and returns an array, or null if none is matched.
Regular expression
[^? = &] : [] said, or similar |, [^] said to find? Characters other than the =& character; The following =[^&] represents the symbol that takes the value of an argument with =;
The general URL format is http://url.com/page?name=Adam&surname=Smith
// First? Beyond +& and with =, or beyond & : name=Adam, surname=Smith
url.match(/([^?=&]+)(=([^&]*))/g)
Copy the code
reduce
Reduce method: The reduce(callback, initVal) method is used to perform cumulative operations. Function (preVal, curVal, index, array) {… } represents the previous value/current value/index of the current value/array of the current operation.
Reduce iterates through each element of the array. The result of each iteration is preVal and the next element is curVal.
// preVal={}
arr.reduce(
(preVal, curVal) = > {...},
{}
)
Copy the code
Arrow function
Rules for arrow functions:
- If onlyA statementI don’t have to write
{}
andreturn
. - There is no
{}
when= >
And the function body must be on the same line, not newline. You can use(a)
Do a line break.
// This example uses a line break with ()(a, v) => ( .... ) ;/ / equivalent to the
(a, v) = > {
return. }/ / equivalent to the
(a, v) => ....
Copy the code
Comma operator
The comma operator, : evaluates each operand (left to right) and returns the value of the last operand. You can use the comma operator when you want to include multiple expressions where you expect an expression.
let x = 1;
x = (x++, x); / / 2
let fn = () = > (1.2.3);
fn(); / / 3
Copy the code
In this case:
// preVal[curVal.slice(0, curVal.indexOf('='))] = curVal.slice(curVal.indexOf('=') + 1
// Put the URL parameter key/value pairs into the object(...... , preVal)// Finally returns the value of preVal
Copy the code
It’s a little bit confusing when you combine it with the arrow function, so you have parentheses inside of parentheses, and actually the first parentheses are for a line break, and the second parentheses are for a line multiple operation expression.
flush points
Using any method in a dynamic language requires consideration of boundary conditions. Run-time errors are easy to make.
Url. The match (/ ([^? = &] +) (= (/ ^ & *))/g) | | [], the match match is less than the string returns null, if no | | [] program will throw an error, because the null without the reduce method.
thinking
Writing programs like this should be hit at work… It’s too simplistic. It’s really hard to understand without a comment
Simplified:
const getURLParameters = (url) = > {
const urlParamArr = url.match(/([^?=&]+)(=([^&]*))/g) | | [];const urlParamObj = urlParamArr.reduce(
(preVal, curVal) = > {
preVal[curVal.slice(0, curVal.indexOf('='))] = curVal.slice(curVal.indexOf('=') + 1);
returnpreVal; }, {});return urlParamObj;
}
Copy the code