数组操作方式--给数组中添加对象

前端-文龙刚

已于 2022-12-15 10:06:04 修改

阅读量477

点赞数

分类专栏： Javascript 文章标签： javascript 前端 css

于 2022-12-09 10:25:48 首次发布

本文链接：https://blog.csdn.net/qq_17211063/article/details/128248576

版权

Javascript 专栏收录该内容

84 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>给数组中添加对象</title>
	<style type="text/css">
		span.getArr{padding:5px 15px;display:inline-block;background-color:#c20007;color:#fff;border-radius:5px;cursor:pointer;}
		.arrList .item{float:left;}
	</style>
</head>
<body>
	<span class="getArr getArrBtn1">点击我加载</span>
	<span class="getArr getArrBtn2">加2</span>
	<span class="getArr getArrBtn3">单独获取</span>
	<div class="arrList">
		<ul>
			<!--<li class="clearfix">
				<div class="item">
					<label for="">姓名：</label>
					<span>某某某</span>
				</div>
				<div class="item">
					<label for="">性别：</label>
					<span>男</span>
				</div>
				<div class="item">
					<label for="">年龄：</label>
					<span>18</span>
				</div>
			</li>-->
		</ul>
	</div>
	<div class="num"></div>
</body>
</html>
<!--<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.0.min.js"></script>-->
<!--因为在IE浏览器中对jq库的版本要求是：需要低版本的，高版本的jq库，ie浏览器不识别，会报$未定义的错误-->
<!--<script src="http://apps.bdimg.com/libs/jquery/1.6.3/jquery.min.js"></script>-->
<!--<script src="http://apps.bdimg.com/libs/jquery/1.4.3/jquery.min.js"></script>-->	<!--ie9-10-->
<script src="http://apps.bdimg.com/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		var arr = [
			{name:'小秦',sex:'男',age:99},
			{name:'小武',sex:'女',age:86},
			{name:'文龙刚',sex:'男',age:18},
		]
		var arr2 = [
			{name:'大佬一号',sex:'男',age:68},
			{name:'大佬二号',sex:'男',age:60},
			{name:'大佬三号',sex:'女',age:52},
		]
		var arrs = [
			{name:'安其拉',sex:'女英雄',age:68},
			{name:'鲁班',sex:'男英雄',age:60},
			{name:'凯',sex:'男英雄',age:52},
		]
		console.log(arr)
		
		var arr3 = []
		var arr4 = []
		var arrAy = []
		$('.getArrBtn1').click(function(){
			arr3=arr.concat(arr2)
			console.log(arr3)
			arrAy = arr3
			console.log(arrAy)
			list()
			//$('li').html(arr3.length)
		});
		$('.getArrBtn2').click(function(){
			arr4=arr3.concat(arrs)
			console.log(arr4)
			//$('li').html(arr4.length)
			list()
		});
		$('.getArrBtn3').click(function(){
			var arrData = arr.slice(0,2);
			console.log(arrData)
		});
		var listHtml=''
		function list(){
			var name='';
			var sex='';
			var age='';
			for(var i=0;i<arr4.length;i++){
				name=arr4[i].name
				sex=arr4[i].sex
				age=arr4[i].age
				console.log(arr4[i])
				console.log(name)
				console.log(sex)
				console.log(age)
				listHtml+='<li class="clearfix">'+
						'<div class="item">'+
							'<label for="">姓名：</label>'+
							'<span>"'+name+'"</span>'+
						'</div>'+
						'<div class="item">'+
							'<label for="">性别：</label>'+
							'<span>"'+sex+'"</span>'+
						'</div>'+
						'<div class="item">'+
							'<label for="">年龄：</label>'+
							'<span>"'+age+'"</span>'+
						'</div>'+
					'</li>'
			}
			$('ul').append(listHtml)
			$('.num').html($('.arrList li').length)
		}
	})	
</script>