如何获取url中的参数的方法，以及URlSearchParams常用的属性

通过URlSearchParams构造函数进行获取 （介绍几个常用的）

1. 首先通过构造函数创建一个实例对象,里面传的值一定是？号后面的,我们可以直接通过location.search获取url中的这个参数

   let url = "?name=csdn&age=10&claaback=fn";
               const obj = new URLSearchParams(url);
   

2. append()：在参数中添加新的键值，比如url中没有global=index那么我们可以手动添加

   obj.append("global","index");
   

3. get():传递一个键，字符串格式，输入参数中的键就能够查询相对的值。

   obj.get("name")  // 打印出来的是 csdn。
   

4. delete()；传递一个键，字符串格式，通过这个方法就能够删除这个参数。

   obj.delete("name")// 那么此时 name这个参数就为null
   

5. has():判断url中是否有这个参数 如果有就返回true 否则就返回false。

   obj.has("name") // 返回true
   

6. toString() 返回？号后面的字符串 无需传参。

   obj.toString() // 获得name=csdn&age=10&claaback=fn
   

7. set() : 给原有的参数设置值，第一个参数为键，第二个参数为值 如果给参数不存在则创建并设置值；如果存在则多个相同参数，匹配第一个，删除其他的。

   obj.set("name","agg"); // 那么现在name的值就不是csdnle 就是agg
   

把url所有的参数放入对象中

• 说明： 假设我们声明了一个空对象

  const = obj {}

  那么我们获取里面的属性可以通过 obj[“name”] 但是里面要是没有name，它就会帮我们在obj中添加一个name属性,前提是我们要赋值，它才会添加，如果obj对象中存在name属性那么它就会重赋值。

  ​ obj[“name”] = csdn

  ​ 此时obj = {

  ​ name : “csdn”;

  ​ }

  let url = "http://www.baidu.com?name=csdn&age=10&claaback=fn";
            // 首先拿到这个参数我们通过split用？号切割
            const arr = url.split("?") //  获得["http://www.baidu.com", "name=csdn&age=10&callback=fn"]
          // 然后选择arr索引为1的元素通过&符号切割
          const newArr = arr[1].split("&") //获得["name=csdn","age=10","callback=fn"]
          const obj = {} // 声明一个空对象 留着给这个空对象赋值。
          // 遍历这个newArr 的每一个元素
          for(var i = 0; i < newArr.length; i++) {
              let temp = newArr[i].split("="); 
              // 当 i = 0  获得 name=csdn   切成["name","csdn"], 那么temp[0] = name,temp[1] = csdn
              // 当 i = 1  获得 age=10      切成["age",10], temp[0] = age,temp[1] = 10;
              // 在每次遍历时我们可以通过两个变量去接受一下这个值
              let key = temp[0];
              let val = temp[1];
  
              // 给这个对象赋值
              obj[key] = val; // 这个方式也就是说 obj中是否有key这个属性要是没有我就把val赋值给它并存储到obj中要是有就重赋值。            
          }
          console.dir(obj)
  

• 封装以上方法

     let url = "http://www.baidu.com?name=csdn&age=10&claaback=fn";
  
          function getData(url) {
              const arr = url.split("?")
              const newArr = arr[1].split("&")
              const obj = {};
              for (var i = 0; i < newArr.length; i++) {
                  let temp = newArr[i].split("=");
                  // 当 i = 0  获得 name=csdn   切成["name","csdn"], 那么temp[0] = name,temp[1] = csdn
                  // 当 i = 1  获得 age=10      切成["age",10], temp[0] = age,temp[1] = 10;
                  // 在每次遍历时我们可以通过两个变量去接受一下这个值
                  let key = temp[0];
                  let val = temp[1];
                  // 给这个对象赋值
                  obj[key] = val; // 这个方式也就是说 obj中是否有key这个属性要是没有我就把val赋值给它并存储到obj中要是有就重赋值。            
              }
              return obj;
          }
          console.log(getData(url))
  

  ​

只有一个参数的情况下获取

  // 假设我们有一个url，这个情况我们可以通过split直接切割或者用正则表达式；
        let url = "http://www.baidu.com?name=csdn";
        // 使用spilt直接切割
        const arr = url.split("?") // 此时我们拿到的是 ["http://www.baidu.com","name=csdn"]
        // 然后我们选择索引为1的元素再用=号切割
        const newArr = arr[1].split("=")[1];
        console.log(newArr) // csdn;

有很多的参数我们只需要其中一个参数获取法。

• 假设获取age的值。

  // 假设我们有一个url
          let url = "http://www.baidu.com?name=csdn&age=10&claaback=fn";
          
          // 首先拿到这个参数我们通过split用？号切割
          const arr = url.split("?") // 此时我们拿到的是       ["http://www.baidu.com", "name=csdn&age=10&callback=fn"]
          // 然后选择arr索引为1的元素通过&符号切割
          const newArr = arr[1].split("&") // 拿到的是["name=csdn","age=10","callback=fn"]
          // 遍历这个newArr 的每一个元素
          for(var i = 0; i < newArr.length; i++) {
              let temp = newArr[i].split("="); 
              // 当 i = 0  获得 name=csdn   通过split用=号切割 ["name","csdn"],
              // 当 i = 1  获得 age=10      通过split用=号切割 ["age",10],
              // 当 i = 2  获得 callback=fn 通过split用=号切割 ["callback",10],
              
              // 如果我们想获取的是age的值那么我们值需要判断 temp[0] 这个元素有没有age 如果有就打印一下temp[1];
              // 注意 temp 只是一个数组 如果数组重复值是会覆盖的，要是push才会增加。
              if(temp[0] === "age"){
                  // 接受一下这个值
                  let search = temp[1];
                  console.log(search);
              }
          }
  

• 封装以上代码

  let url = "http://www.baidu.com?name=csdn&age=10&claaback=fn";
        function getSearch(url,key) {
            const arr = url.split("?") // 此时我们拿到的是       ["http://www.baidu.com", "name=csdn&age=10&callback=fn"]
            const newArr = arr[1].split("&") // 拿到的是["name=csdn","age=10","callback=fn"]
            for (var i = 0; i < newArr.length; i++) {
                let temp = newArr[i].split("=");
                if (temp[0] === key) {
                    let search = temp[1];
                    console.log(search);
                }
            }
        }
        getSearch(url,"name"); // 此时得到的就是 csdn

要是有不清楚的地方可以留言，我随时回复。