js 地址的封装以及地址栏的参数获取

firim 发布于2019-08-21 11:29 / 3004人阅读

摘要：例如传入字符串，数组，返回索引传入对象，返回对象的好了了解了下面我们就可以进行地址与对象的拼接了地址与对象拼接的代码地址的参数取值代码第一种方法传统字符串转对象第二种方法正则调用方法

有时候我们封装一个ajax的get的方法需要把对象拼接到地址上面，这里我介绍一个Object.keys，这是一个非常好用对象属性。
例如说

const url = "http://127.0.0.1:4000";
const params = {
    name: "testname",
    email: "testemail@qq.com"
}
// 这里我们需要得到的一个是
http://127.0.0.1:4000?name=testname&email=testemail@qq.com

还有就是从url的的某个参数获取对应的值，例如

http://127.0.0.1:4000?name=testname&email=testemail@qq.com
GetQueryString("name") // testname

先介绍一下Object.keys

Object.keys()返回一个数组的元素是字符串对应可列举的发现直接在对象属性。属性的顺序是一样的,由手动循环在对象的属性。
例如

// 传入字符串，数组，返回索引
var arr = ["a", "b", "c"];
console.log(Object.keys(arr)); // console: ["0", "1", "2"]

// 传入对象，返回对象的key
var obj = { 0: "a", 1: "b", 2: "c" };
console.log(Object.keys(obj)); // console: ["0", "1", "2"]

var an_obj = { 100: "a", 2: "b", 7: "c" };
console.log(Object.keys(an_obj)); // console: ["2", "7", "100"]

// getFoo is property which isn"t enumerable
var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } });
my_obj.foo = 1;

console.log(Object.keys(my_obj)); // console: ["foo"]

好了了解了Object.keys(),下面我们就可以进行地址与对象的拼接了

地址与对象拼接的代码

const server = "hettp://123.123.123.123:2000";
const testParams = {
    "name": "nameyese",
    "password": "passwords"
}
function toUrl(url, params){
    let paramsArr = [];
    if (params) {
        Object.keys(params).forEach(item => {
            paramsArr.push(item + "=" + params[item]);
        })
        if (url.search(/?/) === -1) {
            url += "?" + paramsArr.join("&");
        } else {
            url += "&" + paramsArr.join("&");
        }

    }
    console.log(url);
    // hettp://123.123.123.123:2000?name=nameyese&password=passwords
}

地址的参数取值代码

第一种方法（传统）

// 字符串转对象
var tstr = "http://www.abc.com/detail?code=1&start=2017-02-01&end=2017-02-14&name=abc";    
function GetQueryString(name) {
    let index = tstr.indexOf("?")
    let str = tstr.substring(index + 1);
    let arr = str.split("&");
    let result = {};
    arr.forEach((item) => {
        let a = item.split("=");
        result[a[0]] = a[1];
    })
    return result[name];
}

console.log(GetQueryString("start")) // 2017-02-01

第二种方法（正则）

function GetQueryString(name)
{
     let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     let r = window.location.search.substr(1).match(reg);
     if(r!=null)return  unescape(r[2]); return null;
}
 
// 调用方法
alert(GetQueryString("start")); // 2017-02-01

专线服务私有云 IE地址栏的秘密获取html地址参数 js 设置地址参数 js 获取域名地址

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86761.html

react-router v4.x 源码拾遗1

摘要：还是先来一段官方的基础使用案例，熟悉一下整体的代码流程中使用了端常用到的等一些常用组件，作为的顶层组件来获取的和设置回调函数来更新。 react-router是react官方推荐并参与维护的一个路由库，支持浏览器端、app端、服务端等常见场景下的路由切换功能，react-router本身不具备切换和跳转路由的功能，这些功能全部由react-router依赖的history库完成，his...

itvincent 2019-08-26 13:51 评论0 收藏0
react-router v4.x 源码拾遗1

摘要：还是先来一段官方的基础使用案例，熟悉一下整体的代码流程中使用了端常用到的等一些常用组件，作为的顶层组件来获取的和设置回调函数来更新。 react-router是react官方推荐并参与维护的一个路由库，支持浏览器端、app端、服务端等常见场景下的路由切换功能，react-router本身不具备切换和跳转路由的功能，这些功能全部由react-router依赖的history库完成，his...

Joyven 2019-08-02 15:06 评论0 收藏0
react-router v4.x 源码拾遗2

摘要：如果将添加到当前组件，并且当前组件由包裹，那么将引用最外层包装组件的实例而并非我们期望的当前组件，这也是在实际开发中为什么不推荐使用的原因，使用一个回调函数是一个不错的选择，也同样的使用的是回调函数来实现的。回顾：上一篇讲了BrowserRouter 和 Router之前的关系，以及Router实现路由跳转切换的原理。这一篇来简短介绍react-router剩余组件的源码，结合官方文...

luoyibu 2019-08-26 13:55 评论0 收藏0