• URLSearchParams 接口定义处理 URL 参数串


    基本使用方法如下

    /*
    * URLSearchParams属性
    * @语法:new URLSearchParams(parameter);
    */
    (function(){
        var str = "http://www.domain.com/?user=Alan&id=123&id=456";
        var searchParams = new URLSearchParams(str);
        // let...of 语法(迭代对象)
        for(let p of searchParams){
            // console.log(p);
        }
    /*
    * URLSearchParams.append()
    * @添加新的key/value到URL中
    */
        searchParams.append("city", encodeURIComponent("深圳"));
    
    /*
    * URLSearchParams.has()
    * @查询是否存在,返回一个boolean值
    */
        searchParams.has("id");     // true
    /*
    * URLSearchParams.get()
    * @返回相关联的第一个值
    */
        searchParams.get("id");     // 123
    
    /*
    * URLSearchParams.getAll()
    * @返回所有相同key的值
    */
        searchParams.getAll("id");  // ["123", "456"]
    
    /*
    * URLSearchParams.set()
    * @设置key的value值,如果有多个,删除其他的
    */
        searchParams.set("id", "789");
    
    /*
    * searchParams.delete()
    * @删除所有参数列表key与value值,重复的key都被删除
    */
        searchParams.delete("id");
    
    /*
    * searchParams.entries()
    * @返回所有键值对key/value
    */
        for(let pair of searchParams.entries()){
            console.log(pair[0]+ ', '+ pair[1]); 
        }
    
    /*
    * searchParams.keys()
    * @返回所有键key
    */
        for(let key of searchParams.keys()){
            console.log(key); 
        }
    
    /*
    * searchParams.values()
    * @返回所有值
    */
        for(let value of searchParams.values()) {
            console.log(value);
        }
    
    /*
    * searchParams.toString()
    * @返回修改过的URL
    */
        searchParams.toString();
        console.log(searchParams.toString());
    }());

    JS 编写函数从下面的 URL 串中解析出所有的参数

    http://www.domain.com/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&d&enabled

    期望的返回结果格式如下:

    {
      user: 'anonymous',
      id: [123, 456],     // 重复出现的 key 要组装成数组,能被转成数字的就转成数字类型
      city: '北京',        // 中文
      enabled: true,      // 未指定值的 key 约定值为 true
    }

    谋定而后动,动手前一定要搞清楚问题。怎样才算是把问题搞清楚了?要清楚输入的特征,是否会出现各种奇怪的输入

    防御性编程,检测是否为字符串

    function parse(str){
            if(typeof str !== "string"){
                return;
            }
            var paramObj = {};
            var decode = decodeURIComponent(str);   // 先解码
            var parsePart = decode.split("?#")[decode.split("?#").length-1];    // 截断不需要部分
            var paramArr = parsePart.split("&");    
            for(var i = 0; i < paramArr.length; i++){
                var tmp = paramArr[i].split("=");
                var key = tmp[0];               
                var value = tmp[1] || true;     
    
                // console.log("关键字是:" + key, "值是:" + value);
                if(typeof paramObj[key] === "undefined"){
                    paramObj[key] = value;
                }else{
                    var newValue = paramObj[key] + "," + value;     // 有多个重复的先连接字符串,然后才分割开
                    paramObj[key] = newValue.split(",");
                }
            }
            // console.log(paramObj);
        }
  • 相关阅读:
    ListView的使用(二)长按弹出上下文菜单
    自己遇到程序安装完图标不显示记录
    ListView的使用(一)
    Docker 构建私有镜像仓库
    DockerFile 编译语法详解
    Docker 添加容器SSH服务
    Docker 数据卷与容器互联
    Docker 镜像与容器管理
    Docker 容器简介与部署
    Zabbix-自带监控项与Kye
  • 原文地址:https://www.cnblogs.com/alantao/p/6928927.html
Copyright © 2020-2023  润新知