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

  1. throughString.prototype.match()Method matches the key-value pairs of all parameters;
  2. throughArray.prototype.reduce()Consolidate all parameter key-value pairs into one object;
  3. window.location.searchTake to the URL?The subsequent argument string can be passed to the function as an argumentgetURLParametersUrl 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