数组减少逗号运算符无序列的意外使用

Question

I am getting an "Unexpected use of comma operator no-sequences" warning -- on the.reduce - but I am not sure how to resolve this.

const getQueryParams = () => 
  this.props.location.search
    .replace('?', '')
    .split('&')
    .reduce((r,e) => (r[e.split('=')[0]] = decodeURIComponent(e.split('=')[1]), r), {});

Answer 1

The code quoted uses (some would say ab uses) the comma operator in order to avoid using the function body form of an arrow function. The minimal change to remove the comma operator is to put {} around the function body and do an explicit return :

const getQueryParams = () => 
    this.props.location.search
        .replace('?', '')
        .split('&')
        .reduce((r,e) => {
            r[e.split('=')[0]] = decodeURIComponent(e.split('=')[1]);
            return r;
        }, {});

---

As a matter of style, though, I'd suggest not using reduce there at all. (I have a fair bit of company disliking reduce outside of Functional Programming with predefined, reusable reducers.)

In that code, the reduce is just a loop; the accumulator never changes, it's always the same object. So I'd just use a loop:

const getQueryParams = () => {
    const result = {};
    for (const e of this.props.location.search.replace("?", "").split("&")) {
        result[e.split("=")[0]] = decodeURIComponent(e.split("=")[1]);
    }
    return result;
};

I'd probably also remove the redundant call to split :

const getQueryParams = () => {
    const result = {};
    for (const e of this.props.location.search.replace("?", "").split("&")) {
        const [key, value] = e.split("=");
        result[key] = decodeURIComponent(value);
    }
    return result;
};

Finally, both keys and values in query strings are URI-encoded, so decodeURIComponent should be used on both:

const getQueryParams = () => {
    const result = {};
    for (const e of this.props.location.search.replace("?", "").split("&")) {
        const [key, value] = e.split("=");
        result[decodeURIComponent(key)] = decodeURIComponent(value);
    }
    return result;
};

It'll work without if the keys are just alphanumerics and such, but it's not correct .

---

Stepping back from the syntax, though, you don't need to invent your own function for parsing query string parameters. Browsers already have one :

const getQueryParams = () => Object.fromEntries(
    new URLSearchParams(this.props.location.search)
    .entries()
);

Live Example:

 const search = "?bar=Testing%201%202%203&baz=2"; console.log( Object.fromEntries( new URLSearchParams(search).entries() ) );

Answer 2

You can rewrite the reduce call, so to avoid an assignment expression (and comma operator), turning the arrow function expression syntax into block syntax (see arrow function expression ):

.reduce((r,e) => {
     r[e.split('=')[0]] = decodeURIComponent(e.split('=')[1]);
     return r;
}, {});

Answer 3

Another approach would be to use Object.assign :

 let search = ["item=test","name=code%28","foo=%20bar"] let result = search.reduce((r,e) => Object.assign(r,{[e.split('=')[0]]: decodeURIComponent(e.split('=')[1])}), {}); console.log(result)