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

有时候我们封装一个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