练习14_对象展示.html 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <!-- 用列表展示出所有的男同学 -->
  10. <!-- <ul>
  11. <li>姓名:张三</li>
  12. <li>姓名:王五</li>
  13. <li>姓名:王二</li>
  14. </ul> -->
  15. <script>
  16. var userList = [
  17. {
  18. userName:"张三",
  19. sex:"男"
  20. },
  21. {
  22. userName:"李四",
  23. sex:"女"
  24. },
  25. {
  26. userName:"王五",
  27. sex:"男"
  28. },
  29. {
  30. userName:"赵六",
  31. sex:"女"
  32. },
  33. {
  34. userName:"王二",
  35. sex:"男"
  36. },
  37. ];
  38. document.write("<ul>");
  39. // 第一步遍历数组
  40. for(var i = 0;i<userList.length;i++){
  41. //输出数组中所有的值
  42. // console.log(userList[i])
  43. //输出数组每一个对象的性别
  44. // console.log(userList[i].sex);
  45. // 如果性别为男那么输出姓名
  46. // if(userList[i].sex == "男"){
  47. // console.log(userList[i].userName);
  48. // }
  49. // 第二如果为男性则输出到页面中
  50. if(userList[i].sex == "男"){
  51. document.write("<li>姓名:"+userList[i].userName+"</li>");
  52. }
  53. }
  54. document.write("</ul>");
  55. // var arr = [1,2,3]
  56. // var num = arr[0]
  57. </script>
  58. </body>
  59. </html>