1.隱式創建 html 標簽

<input?type="hidden"?name="tc_id"?value="{{tc_id}}">

這種方法一般配合ajax，上面的value使用了模板引擎

2.window['data']

window['name']?=?"the?window?object";

3.使用localStorage，cookie等存儲

window.localStorage.setItem("name",?"xiaoyueyue");window.localStorage.getItem("name")

特點：

1、localStorage 是持久存儲，不主動刪除 一直存在 sessionStorage 是臨時存儲,關閉瀏覽器數據就沒了

2、localStorage 可以多窗口共享 sessionStorage 不能多窗口共享數據

4.獲取地址欄方法

自己封裝的方法

function?parseParam(url)?{??var?paramArr?=?decodeURI(url).split("?")[1].split("&"),????obj?=?{};??for?(var?i?=?0;?i?<?paramArr.length;?i++)?{????var?item?=?paramArr[i];????if?(item.indexOf("=")?!=?-1)?{??????var?tmp?=?item.split("=");??????obj[tmp[0]]?=?tmp[1];????}?else?{??????obj[item]?=?true;????}??}??return?obj;}

正則表達式方法

function?GetQueryString(name)?{var?reg?=?new?RegExp("(^|&)"?+?name?+?"=([^&]*)(&|$)");var?r?=?window.location.search.substr(1).match(reg);if?(r?!=?null)?return?unescape(r[2]);?return?null;}

5.標簽綁定函數傳參

<!--base-->?<button?id="test1"?οnclick="alert(id)">test1</button>?<!--高級--><button?id="test"?name="123"?yue="xiaoyueyue"?friend="heizi"?οnclick="console.log(this.getAttribute('yue'),this.getAttribute('friend'))">test</button>

this拓展

使用this傳參，在使用art-template中琢磨出來的，再也不用只傳遞一個id拼接成好幾個參數了！happy！

var?box?=?document.createElement("div");box.innerHTML?=?"<button?id='1'?data-name='xiaoyueyue'?data-age='25'?data-friend='heizi'?οnclick='alertInfo(this)'>點擊</button>";document.body.appendChild(box);//?name,age,friendfunction?alertInfo(val)?{??console.log(val);??alert('大家好,我是'?+?val.dataset.name?+?',?我今年'?+?val.dataset.age?+?'歲了，我的好朋友是'?+?val.dataset.friend?+?'?!')}

event

既然可以使用this，那么在事件當中event.target方法也是可以的：

根據 class 獲取當前的索引值，參數可以為 event對象

??var?getIndexByClass?=??function?(param)?{????var?element?=?param.classname???param?:?param.target;????var?className?=?element.classname;????var?domArr?=?Array.prototype.slice.call(document.querySelectorAll('.'?+?className));????for?(var?index?=?0;?index?<?domArr.length;?index++)?{??????if?(domArr[index]?===?element)?{????????return?index;??????}????}????return?-1;??},

6.HTML5 data-* 自定義屬性

<button?data-name="xiaoyueyue">點擊</button>?var?btn?=?document.querySelector("button")????btn.onclick?=?function?()?{??????alert(this.dataset.name)????}

7.字符串傳參

單個參數

var?name?=?'xiaoyueyue',??age?=?25;var?box?=?document.createElement("div");box.innerHTML?=?'<button?οnclick="alertInfo(\''?+?name?+?'\')">點擊</button>';document.body.appendChild(box);//?name,?agefunction?alertInfo(name,?age,?home,?friend)?{??alert("我是"?+?name)}

多參傳遞

?var?name?=?'xiaoyueyue',??age?=?'25',??home?=?'shanxi',??friend?=?'heizi';var?params?=?"&quot;"?+?name?+?"&quot;,&quot;"?+?age?+?"&quot;,&quot;"?+?home?+?"&quot;,&quot;"?+?friend?+?"&quot;";var?box?=?document.createElement("div");box.innerHTML?=?"<button?οnclick='alertInfo("?+?params?+?")'>點擊</button>";document.body.appendChild(box);//?name,?age,home,friendfunction?alertInfo(name,?age,?home,?friend)?{??alert("我是"?+?name?+?','?+?"我今年"?+?age?+?"歲了！")}

復雜傳參

var?data?=?[??{????"name":?"xiaoyueyue",????"age":?"25",????"home":?"shanxi",????"friend":?"heizi"??}]var?box?=?document.createElement("div");for?(var?i?=?0;?i?<?data.length;?i++)?{??box.innerHTML?=?"<button?id='btn'??οnclick='alertInfo(id,""?+?data[i].name?+?"",""?+?data[i].age?+?"",""?+?data[i].home?+?"",""?+?data[i].friend?+?"")'>點擊</button>";}document.body.appendChild(box);function?alertInfo(id,?name,?age,?home,?friend)?{??alert("我是"?+?name?+?","?+?friend?+?"是我的好朋友")}

8.arguments

arguments對象是所有（非箭頭）函數中都可用的局部變量。你可以使用arguments對象在函數中引用函數的參數。它是一個類數組的對象。

<button?οnclick="fenpei('f233c7a290ae11e8a0f00050568b2fdd','100','0號?車用柴油(Ⅴ)')">分配</button>function?fenpei()?{????var?args?=?Array.prototype.slice.call(arguments);????alert("我是"?+?args[2]?+?"油品，數量為?"?+?args[1]?+?"?噸，?id為?"?+?args[0])}

via：https://segmentfault.com/a/1190000016005163

總結

以上是生活随笔為你收集整理的JS传参技巧总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。