資訊專欄INFORMATION COLUMN
摘要：例如傳入字符串，數(shù)組，返回索引傳入對象，返回對象的好了了解了下面我們就可以進行地址與對象的拼接了地址與對象拼接的代碼地址的參數(shù)取值代碼第一種方法傳統(tǒng)字符串轉(zhuǎn)對象第二種方法正則調(diào)用方法
有時候我們封裝一個ajax的get的方法需要把對象拼接到地址上面，這里我介紹一個Object.keys，這是一個非常好用對象屬性。
例如說
const url = "http://127.0.0.1:4000";
const params = {
name: "testname",
email: "[email protected]"
}
// 這里我們需要得到的一個是
http://127.0.0.1:[email protected]
還有就是 從url的的某個參數(shù)獲取對應(yīng)的值，例如
http://127.0.0.1:[email protected] GetQueryString("name") // testname先介紹一下Object.keys
Object.keys()返回一個數(shù)組的元素是字符串對應(yīng)可列舉的發(fā)現(xiàn)直接在對象屬性。屬性的順序是一樣的,由手動循環(huán)在對象的屬性。
例如
// 傳入字符串，數(shù)組，返回索引
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
}
地址的參數(shù)取值代碼
// 字符串轉(zhuǎn)對象
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;
}
// 調(diào)用方法
alert(GetQueryString("start")); // 2017-02-01
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86761.html
摘要：還是先來一段官方的基礎(chǔ)使用案例，熟悉一下整體的代碼流程中使用了端常用到的等一些常用組件，作為的頂層組件來獲取的和設(shè)置回調(diào)函數(shù)來更新。 react-router是react官方推薦并參與維護的一個路由庫，支持瀏覽器端、app端、服務(wù)端等常見場景下的路由切換功能，react-router本身不具備切換和跳轉(zhuǎn)路由的功能，這些功能全部由react-router依賴的history庫完成，his...
摘要：還是先來一段官方的基礎(chǔ)使用案例，熟悉一下整體的代碼流程中使用了端常用到的等一些常用組件，作為的頂層組件來獲取的和設(shè)置回調(diào)函數(shù)來更新。 react-router是react官方推薦并參與維護的一個路由庫，支持瀏覽器端、app端、服務(wù)端等常見場景下的路由切換功能，react-router本身不具備切換和跳轉(zhuǎn)路由的功能，這些功能全部由react-router依賴的history庫完成，his...
摘要：如果將添加到當前組件，并且當前組件由包裹，那么將引用最外層包裝組件的實例而并非我們期望的當前組件，這也是在實際開發(fā)中為什么不推薦使用的原因，使用一個回調(diào)函數(shù)是一個不錯的選擇，也同樣的使用的是回調(diào)函數(shù)來實現(xiàn)的。 回顧：上一篇講了BrowserRouter 和 Router之前的關(guān)系，以及Router實現(xiàn)路由跳轉(zhuǎn)切換的原理。這一篇來簡短介紹react-router剩余組件的源碼，結(jié)合官方文...
閱讀 2122·2023-04-26 00:41
閱讀 1155·2021-09-24 10:34
閱讀 3585·2021-09-23 11:21
閱讀 4119·2021-09-22 15:06
閱讀 1567·2019-08-30 15:55
閱讀 908·2019-08-30 15:54
閱讀 1837·2019-08-30 15:48
閱讀 561·2019-08-29 13:58
