在字符串拼接时向click事件传递一个对象的方法

场景

在进行js字符串拼接的时候有时候会遇到需要在一段字符串的onclick事件中传递的参数是一个对象的问题，传递之后我们会发现并不是我们想要的结果（主要是不想一个参数一个参数的去写，有时候参数太多就会显得太过臃肿）。

举例

如下：

<span onclick="f1([object Object])">点我</span>

可以看到f1()方法内的参数变成了[object Object]，这样的参数我们是没办法通过 xx.xx 这种格式进行数据操作的，有一种比较简单粗暴的方式是通过JSON.stringify()方法将json对象直接强制转化为字符串传递给function，但是这样有时候会根据不同浏览器出现不同的错误提示，例如：错误结尾、未正确闭合等各种让人摸不着头脑的问题。

解决

这里有两种解决方式

正则

如上边所说JSON.stringify()直接转化传递可能会出错，造成这种情况的原因是因为在传递数据的时候单引号和双引号的问题，会把你最外层的引号干掉，所以只需要在数据传递的时候通过正则表达式将内容的中的双引号换成单引号即可

var htmlDom = '<span οnclick="f1('+ JSON.stringify(obj).replace(/\"/g,"'") +')">点我</span><br>'

临时存储进一个数组（循环）

既然我们直接传递对象行不通，那么可以考虑先用另一个数组作为临时存储，然后在拼接字符串的时候传递index，click事件触发的时候再从这个存储的数组中进行取用。

• 这里写了一个简单的json通过jquery获取然后进行循环写入

{
	"res":[
		{
			"a":"123",
			"b":"234"
		},{
			"a":"1232",
			"b":"2342"
		}
	]
}

<div id="a1"></div>

<script type="text/javascript">
	var arr = []; //空数组
	$.ajax({
		url: 'test.json',
		type: 'get',
		dataType: 'JSON',
		success: function(data){
			var htmlDom = '';
			for(var i=0; i < data.res.length; i++){
				arr[i] = { //循环取到的对象一个个存进数组
					'c' : data.res[i].a,
					'd' : data.res[i].b
				}
				htmlDom += '<span οnclick="f1('+i+')">点我</span><br>' //参数为对应的index
				$('#a1').html(htmlDom)
			}
		}
	})
	function f1(ind){
		console.log(arr[ind].c)
		console.log(arr[ind].d)
	}
</script>