js数据处理

Question

function toUrlParams(obj) {
    let ret = ""
    Object.entries(obj).forEach((item, index) => {
        ret += item[0] + "=" + item[1] + "&"
    })
    return ret
}

后面还会多个&

page=1&pageSize=10&,不要后面那个&

想要的page=1&pageSize=10

Answer 1

先就问题论问题，使用循环处理每一个项，都是一样的，所以如果不是最前面有 & 就是最后面有 &，基本的解决办法是判断是否第 1 项或最后一项，单独处理。

就题主的原代码来说，是后缀的 &，可以通过判断对最后一个元素特殊处理来解决

function toUrlParams(obj) {
    let ret = "";
    Object.entries(obj).forEach((item, index, arr) => {
        if (index === arr.length - 1) {
            ret += item[0] + "=" + item[1];
        } else {
            ret += item[0] + "=" + item[1] + "&";
        }
    });
    return ret;
}

为了拿到数组长度，forEach() 回调加了第 3 个参数，也就是数组本身。

但是可以看到，这样处理，不仅要多加一个参数，而且每次都需要去计算 arr.length - 1。所以可以换一种思路：如果是第 1 项（序号 0），不加 &，以后每一项都加

function toUrlParams(obj) {
    let ret = "";
    Object.entries(obj).forEach((item, index) => {
        if (index === 0) {
            ret += item[0] + "=" + item[1];
        } else {
            ret += "&" + item[0] + "=" + item[1];
        }
    });
    return ret;
}

以上是比较基础，或者说比较原始的处理办法。对于这种“连接”字符串的操作，可以考虑使用数组的 join() 方法，很简单就解决了：

function toUrlParams(obj) {
    return Object.entries(obj)
        .map(item => `${item[0]}=${item[1]}`)
        .join("&");
}

不需要临时变量 ret，也不需要自己去处理首项或末项。唯一需要做的是把要连接的每组数据准备好，也就是上面 .map() 的那一步。

而且，那一步如果用解构参数语法，可以写得语义更明确一点：

   .map(([key, value]) => `${key}=${value}`)

甚至也可以直接用 join，虽然似乎有点重

    .map(item => item.join("="))

上面解决了算法的问题，接下来还需要考虑容错的问题。如果确实是用于 URL，那还可能存在需要编码的情况（对一些特殊字符），对 key 和 value 都需要使用 encodeURIComponent 来编码，这一步可以在 map 的时候进行，毕竟 item 是一个数组，用 .map 就可以对 key 和 value 编码了。

    .map(item => item.map(s => encodeURIComponent(s)).join("="))

话说回来，有轮子干嘛不用现成的，如 @扬帆启航 所说，使用 Qs，也可以直接使用浏览器提供的 URLSearchParam

const qs = new URLSearchParam({ page: 1, pageSize: 10 }).toString();

Answer 2

拼接的api是join

Object.entries(obj).map(item => item[0] + "=" + item[1]).join('&')

Answer 3

String.prototype.substring()

Answer 4

最后生成的字符串 let s = 'page=1&pageSize=10&'
s.substr(0, s.length - 1);
去掉最后的&

Answer 5

Object.keys(obj).map(key => `${key}=${encodeURIComponent(obj[key])}`).join('&')