js 地址的封裝以及地址欄的參數獲取

firim 發布于2019-08-21 11:29 / 3110人閱讀

摘要：例如傳入字符串，數組，返回索引傳入對象，返回對象的好了了解了下面我們就可以進行地址與對象的拼接了地址與對象拼接的代碼地址的參數取值代碼第一種方法傳統字符串轉對象第二種方法正則調用方法

有時候我們封裝一個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

云服務器 GPU云服務器 IE地址欄的秘密獲取html地址參數 js 設置地址參數 js 獲取域名地址

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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