前端练习24 queryString分析器

知识点

1. URL中的查询参数和hash值
2. 多种情况的考虑

题目

完成一个parseQueryString函数。它接受一个url字符串作为参数，返回一个对象，这个对象包含query string上的键值对。例如：

parseQueryString('https://scriptoj.com/problems?offset=100&limit=10')

返回:

{ offset: '100', limit: '10'}

特殊情况说明：如果出现?name=&age=12则返回{ name: '', age: '12' }，如果?name&age=12则返回{ name: null, age: '12' }。

请考虑清楚query string可能出现的各种情况，包括可能的出现hash的情况（?name=jerry#nice）。

如果需要帮助，可以对照参URI.js的执行结果。

实现

一开始想用正则实现，结果没写出来（囧）

后来老老实实去切分字符串，结果发现好多情况考虑不全

下面的代码是通过了的代码，但是也不知道还会不会有更多的情况没考虑到：

const parseQueryString = url => {
  const index1 = url.indexOf('?');
  const index2 = url.indexOf('#');
  
  // 处理的情况1：没有查询参数
  // 处理的情况2：如果#在?前面，#后面认为都是hash，而非查询参数
  if (index1 === -1 || (index1 > index2 && index2 !== -1)) {
    return {}
  }
  // 处理的情况3：如果没有#参数，直接取？后面的字符串
  // 处理的情况4：如果#在?后面，取?和#之间的字符串
  let str = (index2 === -1) ? url.slice(index1 + 1) : url.slice(index1 + 1, index2);
  
  return str.split('&').reduce((total, current) => {
    // 处理的情况5：?name&age=12返回{ name: null, age: '12' }
    if (current.indexOf('=') === -1) {
      total[current] = null;
    } else {
      // 处理的情况6 value中有多个=的情况
      const index = current.indexOf('=');
      const key = current.slice(0, index);
      const value = current.slice(index+1);
      // 处理的情况7 ?name=&age=12 则返回 { name: '', age: '12' }
      total[key] = value || '';
    }
    return total;
  }, {});
};

另一种方法

可以考虑使用URL API来实现

take已接受一个URL作为参数，创建一个URL实例对象，实例包含以下属性：

• URLUtils.href： 完整URL
• URLUtils.protocol： 协议名
• URLUtils.host： 域名和端口号
• URLUtils.hostname： 域名
• URLUtils.pathname： 以/起头的URL路径
• URLUtils.search： 以?起头的查询字符串
• URLUtils.hash： 以#起头的hash值
• URLUtils.origin： 协议名+域名+端口号

这里通过new URL构造出实例对象后就可以通过search来直接访问查询参数，帮我们节省了之前集中特殊情况的处理。

要注意的是，URL API是一个实现性功能，IE不支持

const parseQueryString = url => {
  const urlObj = new URL(url);
  const {search} = urlObj;
  if (!search) {
    return {}
  }
  return new URL(url).search.slice(1).split('&').reduce((total, current) => {
    // 处理的情况1：?name&age=12返回{ name: null, age: '12' }
    if (current.indexOf('=') === -1) {
      total[current] = null;
    } else {
      // 处理的情况2 value中有多个=的情况
      const index = current.indexOf('=');
      const key = current.slice(0, index);
      const value = current.slice(index + 1);
      // 处理的情况3 ?name=&age=12 则返回 { name: '', age: '12' }
      total[key] = value || '';
    }
    return total;
  }, {});
};

参考

• 35 queryString 分析器@ScriptOJ
• URL@MDN
• URL@Can I use