快捷導(dǎo)航

JS中如何將JSON數(shù)組轉(zhuǎn)化為url參數(shù)

更新時(shí)間：2023年04月17日 14:11:07 作者：InterestAndFun

這篇文章主要介紹了JS中如何將JSON數(shù)組轉(zhuǎn)化為url參數(shù)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

JS將JSON數(shù)組轉(zhuǎn)化為url參數(shù)

有需求要用nodejs做一個(gè)爬蟲工具，發(fā)送請(qǐng)求的時(shí)候，需要將json數(shù)據(jù)轉(zhuǎn)換成url參數(shù)。在python中我們可以使用urllib.urlencode輕松來完成，在nodejs中就需要手動(dòng)封裝一個(gè)工具了。

本來不想努力了，在百度上隨便找一個(gè)算了。但是感覺百度上的那些寫得太長(zhǎng)，一個(gè)小工具沒必要犧牲那么多行代碼來完成。于是就自己弄了一個(gè)。

前置知識(shí)點(diǎn)

Object.entries():返回一個(gè)數(shù)組，其元素是與直接在object上找到的可枚舉屬性鍵值對(duì)相對(duì)應(yīng)的數(shù)組。屬性的順序與通過手動(dòng)循環(huán)對(duì)象的屬性值所給出的順序相同。
forEach: 對(duì)數(shù)組的每個(gè)元素執(zhí)行一次給定的函數(shù)，可以理解相當(dāng)于 for 循環(huán)的簡(jiǎn)寫版（實(shí)質(zhì)不只那么簡(jiǎn)單）。
Array.push(): 方法將一個(gè)或多個(gè)元素添加到數(shù)組的末尾，并返回該數(shù)組的新長(zhǎng)度。
Array.join(): 將一個(gè)數(shù)組（或一個(gè)類數(shù)組對(duì)象）的所有元素連接成一個(gè)字符串并返回這個(gè)字符串。如果數(shù)組只有一個(gè)項(xiàng)目，那么將返回該項(xiàng)目而不使用分隔符。

代碼

const converToUrl = requestParams => {
  let params = [];
  Object.entries(requestParams).forEach(([key, value]) => {
      let param = key + '=' + value;
      params.push(param);
  });
  return '?' + params.join('&');
}

實(shí)例演示

const urlUtil = require('./reqParamsConverToUrl.util');

const requestParams = {
  'name' : "zhangsan",
  'age' : 18
}

const urlParams = urlUtil.converToUrl(requestParams);
console.log(urlParams);

運(yùn)行結(jié)果：

JavaScript JSON與URL參數(shù)互轉(zhuǎn)

JSON轉(zhuǎn)URL參數(shù)

function parseParams(data) {
? ? try {
? ? ? ? var tempArr = [];
? ? ? ? for (var i in data) {
? ? ? ? ? ? var key = encodeURIComponent(i);
? ? ? ? ? ? var value = encodeURIComponent(data[i]);
? ? ? ? ? ? tempArr.push(key + '=' + value);
? ? ? ? }
? ? ? ? var urlParamsStr = tempArr.join('&');
? ? ? ? return urlParamsStr;
? ? } catch (err) {
? ? ? ? return '';
? ? }
} ??

var obj = {
? ? name: 'zhangsan',
? ? age: 100
};

parseParams(obj); //"name=zhangsan&age=100"

URL參數(shù)轉(zhuǎn)JSON

function getParams(url) {
? try {
? ? url = url.match(/\?([^#]+)/)[1];
? ? const obj = {};
? ? const arr = url.split('&');
? ? for (let i = 0; i < arr.length; i++) {
? ? ? let subArr = arr[i].split('=');
? ? ? let key = decodeURIComponent(subArr[0]);
? ? ? let value = decodeURIComponent(subArr[1]);
? ? ? obj[key] = value;
? ? }
? ? return obj;
? } catch (err) {
? ? return null;
? }
}

var urlStr = 'http://www.xxx.com/test?name=zhangshan&age=100#hello';

getParams(urlStr); //{name: "zhangshan", age: "100"}