计网+JS小知识 从一个URI字符串中获取"查询字符串参数"

敲代码的小提琴手
467 阅读4分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

一石二鸟的一个小问题，既可以用来熟悉绝对URI格式中的内容，也可以借此熟悉几种数组中的操作~

本文包括下述几点内容，大家按需阅读~🧐

  • URI URL傻傻分不清楚？

  • 绝对URI的格式

  • 逐步递进三种方式查询字符串参数

    • 简单遍历🥺

    • 用Array.prototype.map()优化一下查询方法🤔

    • 利用Array.prototype.reduce()一行完成查询（骄傲脸😎）

1.URI、URL傻傻分不清楚？

第二次读《图解HTTP》时，突然发现自己之前一直说“输入URL...”之类的内容，但是并不清楚URL的父类：URI是怎么样一个含义，今天来学习一下！

URI的定义

Uniform Resource Identifier 的缩写 即为 URI，中文名称是“统一Uniform资源Resource标识符Identifier” （配合上单词还是蛮好理解的~）

RFC2396分别对这三个单词进行了如下定义：

  • Uniform 规定统一的格式，可以方便处理多种不同类型的资源

  • Resourse

资源的定义是“可标识的任何东西”。除了文档文件、图像、服务等可以区别于其他类型的，都可以作为资源。

  • Identifier 标识可标识的对象，也成为标识符。

综上所述，URI 就是由某个协议方案表示的资源的定位标识符。协议方案是指访问资源所使用的协议类型名称。

何为URL 何为URI

Uniform Resource Locator(统一资源定位符)

Uniform Resource Identifier(统一资源标识符)

二者在定义上很相似，作用也同样相似

当时看完上面这些《图解HTTP》中的定义我是有点懵的，那啥时候用URL URI啊，这俩有啥区别啊？

所以我求助了万能的百度，学习了下😂

URI用字符串标识某一互联网资源，而URL标识资源的地点（互联网上所处的位置）

说得大白话一些，URI就是“可以唯一标识一个资源”的一个标识符

URL就是“提供找到该资源的一个路径”，所以URL是URI（因为满足了URI的“唯一标识一个资源”）

可以看看下面RFC3986中给出的例子，urn（一本书的isbn）可以标识一本书，但这不是一个路径，所以不是URL

可见URL是URI的子集

“RFC3986：统一资源标识符（URI）通用语法”中列举了几种 URI 例子，如下所示。

image.png

充分理解的基础上，可以用URL替换URI~（某个URI不能准确寻址的话，就不能把它理解为URL了！）

2.绝对URI(URL)的格式

表示指定的URI，要使用涵盖全部信息的绝对URI、绝对URL以及相对URL（从浏览器基本URI处指定的URL /image/logo.gif这样的~）

来看看格式——

image.png

这其中的字符串分别的作用如下：（直接贴出来读书笔记了-太懒😢😢）

image.png

3.利用JavaScript获取URL地址中查询字符串参数

学习完URI相关内容，来看道面试题🧐

let url = "https://github.com/FangzhouSu/Constant-Front-End-Study/?a=1&b=2&c=3"

上面我们学习到了URI格式中，查询字符串是针对已指定的文件路径内的资源，是位于“?”后面的内容

所以我们解题的关键就变为了“找到合适的方法来获取这个特定位置的字符串”

这题面试官肯定咱用高级一些的方法写出来，我们可以用到归并方法reduce

  • 利用Array.prototype.reduce()一行完成查询（骄傲脸😎）
url.split('?')[1].split('&').reduce((obj, item) => (
   obj[item.split('=')[0]] = item.split('=')[1], obj), {}
)

先将查询字符串划分为字符串数组

image.png 之后使用reduce方法进行归并

获得查询字符串以及对应参数，存在一个对象里面 image.png 感觉这个方法在好多其他场景也可以有应用的吧~（应该吧~后端接口需要返回过来的不都是这种JSON类型的数据嘛🤔）

总之reduce方法的妙用是很多的，一定要数量掌握呐~

下面两种方法就很简单了，不过能写出来可以证明我们思维很发散嘛~要了解的！

  • 简单遍历🥺
console.log(getUrlArr());
function getUrlArr() {
  let arr = [];
  let url = "https://github.com/FangzhouSu/Constant-Front-End-Study/?a=1&b=2&c=3"
  let str = url.split("?")[1];
  let arr1 = str.split("&");
  for(let i = 0; i < arr1.length; i++) {
      let value = arr1[i].split("=")[1];
      arr.push(value);
  }
  return arr;
}

image.png

  • 用Array.prototype.map()优化一下查询方法🤔

let obj = {};
let result = url.split('?')[1].split('&').map((item) =>
   (obj[item.split('=')[0]] = item.split('=')[1])
)
console.log(obj);

个人认为map 方法和reduce方法在这个例子的应用中是异曲同工的~只不过没有初始化obj的这个功能

image.png

avatar
文章
阅读
粉丝