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