【原】js 类型转换引起的问题

    首先 简述一下标题要讨论的问题，就是当不同类型的变量进行相互操作时，他们之间就会有相互向一个类型转换的问题，有时考虑不周全就会转换出错，如果还不明白也没关系，下面将介绍具体的例子。

    比如，页面上有这些元素：

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

</ul>

    现在，想动态添加一个元素<li>4</li> ，并且加上点击事件，点击事件需要一个参数，代码如下：

$(function (){

var arr=["a","b","c"]

var tag="<li onclick=clickit("+arr+")>4</li>"

$("ul").append(tag)

})

function clickit(arr){

alert(arr[0])

}

    当点击第4个元素时，没有得到想要的结果，却报错了：

    意思是变量a 未定义，好奇怪的错误，我明明是传入了一个数组，显示第一个元素，为什么出错了？

    再来仔细看页面的结构会发现问题：

    从这里就行看出我给函数传递的是a，b，c三个变量，等等不对啊，我明明传递的是一个数组，怎么会变成了三个变量呢，仔细找问题后，发现错误在这句话：

    var tag="<li onclick=clickit("+arr+")>4</li>"    

    这句话里的隐式转换导致了错误，我本意是想传参，但是数组对象和字符串使用+运算符连接时，向字符串转换了，所以隐式调用了arr的toString()方法，就输出了a,b,c。

    正确的做法是调用js的JSON.stringify函数把数组对象原封不动的输出成字符串["a","b","c"]，这样传递后就能正确解析了。正确的代码如下：

$(function ()

{

var arr=["a","b","c"]

alert(arr.toString())

var tag="<li onclick=clickit("+JSON.stringify(arr)+")>4</li>"

$("ul").append(tag)

})

    问题得到了解决。与此类似的还有传递参数为json格式等的复杂对象，如果没有调用JSON.stringify函数都会出现错误。

    所以，当动态拼接复杂对象时，一定要注意类型，避免该类错误的发生。