有時候我們封裝一個ajax的get的方法需要把對象拼接到地址上面,這裏我介紹一個Object.keys,這是一個非常好用對象屬性。
例如說
const url = 'http://127.0.0.1:4000';
const params = {
name: 'testname',
email: '[email protected]'
}
// 這裏我們需要得到的一個是
http://127.0.0.1:4000?name=testname&[email protected]
還有就是 從url的的某個參數獲取對應的值,例如
http://127.0.0.1:4000?name=testname&[email protected]
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