js Object-优快云博客

为了给上述的观点提供足够的佐证，请分别在webkit浏览器和非webkit浏览器中执行randomOne，横向对比两者的运算结果，就会发现在webkit中，遍历对象，输出数据的顺序是从小到大，而在非webkit中，则是按照存贮的先后顺序逐个输出。在这一点上，webkit事实上是把带有可转为number类型的key序列当做数组来处理的，以下更有说服力的代码：

var o = {};
o['s'] = '先存储的数据';
o[1] = '后存储的数据';
for(var i in o){
    alert(o[i])
}

webkit中的结果：'后存储的数据' -> '先存储的数据'，非webkit中的结果：'先存储的数据' -> '后存储的数据'。

下面是一个例子

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<script src="http://files.cnblogs.com/zhenn/yui-min.js" type="text/javascript"></script>
<style type="text/css">
*{margin:0;padding:0;}
h1{font-size:24px;}
#wrapper{width:800px;margin:50px auto;color:#555;}
ul{font:40px/1.5 arial;font-weight:700;margin-top:20px;float:left;}
ul li{float:left;margin-right:20px;list-style:none;color:#f00;}
ul li.blue{color:blue;}
button{border:1px solid #d5d5d5;margin:20px 250px 0 0;float:right;}
h4{clear:left;font-size:24px;}
</style>
</head>

<body>
<div id="wrapper">
	<h1>object存贮数据的无序性</h1>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li class="blue"></li>
	</ul>
	<button class="btn">重选一注</button>
	<h4>分别用webkit浏览器和非webkit浏览器打开，查看数字排序</h4>
</div>
<script>
	var randowNumber = {
		state: 0,
		refresh: document.getElementById('wrapper').getElementsByTagName('button')[0],
		boxes: document.getElementById('wrapper').getElementsByTagName('li'),
		init: function(){
			var that = this;
			that.ballRandom();
			that.refresh.onclick = function(){
				that.ballRandom();
			};
		},
		//产生一个随机字符串,如:01 22 23 12 13 02 07
		randomOne: function(){
			var that = this;
			var i = 0 , obj = {} , str = '';
			while(i < 7){
				if(i < 6){
					var num = Math.ceil(33 * Math.random());
				}else{
					var num = Math.ceil(16 * Math.random());
				}
				if(obj[num]) continue;
				obj[num] = that.padding(num);
				i ++;
			}
			for(var j in obj){
				str += obj[j] + ' ';
			}
			return str.substring(0,str.length - 1);
		},
		//填充字符串
		padding: function(str){
			if(typeof str != 'number') return;
			if(str < 10){
				str  = '0' + str;
			}else{
				str = str.toString();
			}
			return str;
		},
		//重新渲染dom
		render: function(){
			var that = this;
			var arr = that.randomOne().split(' ');
			for(var i=0,len=that.boxes.length;i<len;i++){
				that.boxes[i].innerHTML = arr[i];
			}
		},
		//随机数产生的过程并渲染在dom上
		ballRandom: function(){
			var that = this;
			if(!that.state){
				that.timer = setInterval(function(){
					if(that.state == 50){
						clearInterval(that.timer);
						that.state = 0;
					}else{
						that.render();
						that.state ++;
					}
				},20);	
			}
		}
	};
	randowNumber.init();
</script>
</body>
</html>