js中用函数输出一个人的基本信息

╰+攻爆jí腚メ 2022-10-29 08:00 60阅读 0赞

方法一：  
代码如下：

<!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>Document</title>
    	<script type="text/javascript">
    		function people(name,age,sex){
    			document.write("姓名为：" + name +" <br />");
    			document.write("年龄为：" + age + " <br />");
    			document.write("性别为：" + sex + " <br />");
    		}
    		
    		people("小明",18,"男");
    	</script>
    </head>
    <body>
    </body>
    </html>

运行结果：  
![在这里插入图片描述][20210210155935746.png]

很显然，方法一里面有一个bug，因为我们传过去的实参需要和函数的形参一一对应，不能调换顺序，如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]

因此，方法二来了，代码如下：

<!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>Document</title>
    	<script type="text/javascript">
    		function people(one){
    			document.write("姓名为：" + one.name +" <br />");
    			document.write("年龄为：" + one.age + " <br />");
    			document.write("性别为：" + one.sex + " <br />");
    		}
    		var obj = {
    			name:'小明',
    			age:18,
    			sex:'男'
    		}
    		people(obj);
    	</script>
    </head>
    <body>	
    </body>
    </html>

运行结果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]  
方法二改进的地方，就在于我们把人的基本信息封装成一个对象了，我们直接传对象过去。

[20210210155935746.png]: /images/20221024/8475b94a15044b199812db275782d151.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70]: /images/20221024/c861227433ff4700a8b4e95311f1a656.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZpZ2h0aW5nX2RyZWFt_size_16_color_FFFFFF_t_70 1]: /images/20221024/8eec1ec037d54014870ab640b9e8fb13.png