用途： 1.页面跳转传参(根据参数的不同,获取不同的信息进行呈现) 2.ajax向服务器发请求,基于url参数传递给服务器不同的数据,从而获取不同的结果 3.vue-router/react-router-dom路由跳转中,基于问号传参.实现路由之间信息的传递

// 无法处理缺失#/?/#&?的情况或#在?前的情况
function queryUrlParams (url, param) {
  // 1.获取?和#后面的值
  let askIndex = url.indexOf('?'),
    polIndex = url.lastIndexOf('#')

  let askText = url.substring(askIndex + 1, polIndex),
    polText = url.substring(polIndex + 1)

  // 2.解析并拼接成对象
  const obj = {}

  // 处理#后面的值
  polText.length > 0 ? obj.hash = polText : null

  // 处理?后面的值
  let arr
  if (askText) {
    askText.split('&').forEach(item => {
      arr = item.split('=')
      obj[arr[0]] = arr[1]
    })
  }

  return param === undefined ? obj : obj[param]
}

// 能处理缺失#/?/#&?/#在?前面的情况
function queryUrlParams (url, param) {
  let askIndex  = url.indexOf('?'),
    polIndex = url.lastIndexOf('#')
    askText = '',
    polText = ''

  if (askIndex > -1 && polIndex === -1) {
    // 如果#不存在,但是?存在: hash不处理,问号参数值为问号后一项到末尾
    askText = url.substring(askIndex + 1)
  } else if (askIndex === -1 && polIndex > -1) {
    // 如果?不存在,但是#存在: 问号参数不处理,hash值为#后一项到末尾
    polText = url.substring(polIndex + 1)
  } else if (askIndex > -1 && polIndex > -1) {
    // 如果#&?都存在
    if (askIndex > polIndex) {
      // #在?前面: 问号参数为?后一项到末尾 hash值为#后一项到?前一项
      askText = url.substring(askIndex + 1)
      polText = url.substring(polIndex + 1, askIndex)
    } else {
      // #在?后面: 问号参数为?后一项到#号前一项 hash值为#后一项到末尾
      askText = url.substring(askIndex + 1, polIndex)
      polText = url.substring(polIndex + 1)
    }
  }

  // 如果#&?都不存在: 无需处理
  const obj = {}
  
  polText.length > 0 ? obj.hash = polText : null

  let arr
  if (askText) {
    askText.split('&').forEach(item => {
      arr = item.split('=')
      obj[arr[0]] = arr[1]
    })
  }

  return param === undefined ? obj : obj[param]
}

function queryUrlParams (url, param) {
  // 在js中获取的a元素对象包含了很多内置属性，存储对href地址的解析
  // 但是无法处理#在?之前的情况,正常url中#都要在?之后,但在vue/react路由中可以把#放到?前
  // search: '?id=1&name=foo'
  // hash: '#video'
  // host: 'www.baidu.com'
  // ...

  // 1.创建a标签，获取问好参数和hash值
  let link = document.createElement('a')
  link.href = url

  let askText = link.search.substring(1),
    polText = link.hash.substr(1),
    obj = {}

  link = null

  // 2.向对象中存储
  polText ? obj.hash = polText : null

  // if (askText) {
  //   let arr  = askText.split(/(?:&|=)/g) // ['id', '1', 'name', 'foo', 'from', 'wx'] 同时按?和#来拆 
  //   for (let i = 0; i < arr.length; i+=2) {
  //     obj[arr[i]] = arr[i + 1]
  //   }
  // }

  // 基于ES6新增的URLSearchParmams实现问好参数的解析
  // askText为''也不会报错,只是就不执行forEach
  new URLSearchParams(askText).forEach((value, key) => obj[key] = value)

  return param === undefined ? obj : obj[param]
}

// queryUrlParams: 获取url问号参数和hash
//   @params
//     param: [string] 查询的参数 
//   @return
//     [object] 由参数和值组成的对象

function queryUrlParams (param) {
  let obj = {}
  this.replace(/([^?=&#]+)=([^?=&#]+)/g, (...[, $1, $2]) => {
    obj[$1] = $2
  })
  this.replace(/#([^?=&#]+)/g, (...[, $1]) => {
    obj['hash'] = $1
  })

  return param === undefined ? obj : obj[param]
}