彈窗選擇 / 左到右 / 右到結果集 / 關鍵知識點小記錄

時間 2019-11-17

標籤選擇結果關鍵知識記錄简体版

原文原文鏈接

數組和對象的混合遍歷

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>數組和對象混合遍歷</title>
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
	</head>
	<body>
		<div id="reasult-list">
			<ul>
				
			</ul>
		</div>
	</body>
</html>

<script type="text/javascript">
	$(function(){
		var obj = {
			name01:"奔馳",
			name02:"寶馬",
			name03:"奧迪"
		}
		//console.log(obj)
		


		//第一種：將對象中的數據，逐條追加到數組中，而後合併數組，賽到dom中。
        var inner = [];     
        for (var x in obj) {    
        	alert(x)  //遍歷的是鍵；
            inner.push('<li data-id="' + x + '">' + obj[x] + '</li>'); //尾部添加
            console.log(inner)
        }
        $('#reasult-list ul').html(inner.join(''));
        
        //第二種：直接遍歷到dom中
//      for (var y in obj) {    
//      	$('#reasult-list ul').append('<li data-id="' + y + '">' + obj[y] + '</li>')
//      }
        
	})
</script>

$.extend ( 實際是合併，合併遵循的原則以下：)

是對象合併；會改變結構；
相同值,後者覆蓋前者;
多的鍵值對，之後者爲準。多的刪除。

<script type="text/javascript">
	$(function(){		
		var Css1={size: "10px",style: "dot"} 
		var Css2={size: "12px",style: "solid",weight: "bolder"} 
		$.extend(Css1,Css2) ;
		console.log("合併後的對象以下")
		console.log(Css2);            //返回: {size: "12px", style: "solid", weight: "bolder"}

		//console.log("合併後的對象以下"+Css2) //字符串與對象不能拼接
		
		//extend, 
//		1,是對象合併；會改變結構；
//		2,相同值,後者覆蓋前者;
//		3,多的鍵值對，之後者爲準。多的刪除。
	})
</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。