cmblogs

Javascript中数组与字典(即map)的使用

简述:

简单记录一下数据结构Map和数组,

其实在Javascript这种弱类型的脚本语言中,数组同时也就是字典,下面主要就是字典数组的简易使用

 

代码:

1. 数组中添加map

 

[html] view plain copy
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>Test</title>  
  6. <script type="text/javascript">  
  7.   
  8. var arr = [];  
  9. var key = \'Jeremy\';  
  10. var value = \'!!!!\'  
  11. arr.push({  
  12.     \'key\': key,  
  13.     \'value\': value,  
  14. });  
  15.   
  16. document.write("key: " + arr[0][\'key\'] +  
  17.         "<br/>value: " + arr[0][\'value\']);  
  18.   
  19. </script>  
  20. </head>  
  21. <body>  
  22.   
  23. </body>  
  24. </html>  


输出0:

 


2. 数组遍历输出

 

[html] view plain copy
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>Test</title>  
  6. </head>  
  7. <body>  
  8. <script type="text/javascript">  
  9. var arr = [];  
  10. arr.push("Jeremy");  
  11. arr.push("Jimmy");  
  12. for(var i in arr)  
  13.     document.write(i + ": " + arr[i] + "</br>");  
  14. </script>  
  15. </body>  
  16. </html>  


输出1:

 

 

3. 类似字典(map)遍历

 

[html] view plain copy
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>Test</title>  
  6. </head>  
  7. <body>  
  8. <script type="text/javascript">  
  9. var dict = []; //or dict = new Array()  
  10. dict["Jeremy"] = 20;  
  11. dict["Jimmy"] = 30;  
  12. for(var key in dict)  
  13.     document.write(key + ": " + dict[key] + "</br>");  
  14. </script>  
  15. </body>  
  16. </html>  


输出2:

 

 


4. 字典声明时赋值

[java] view plain copy
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>Test</title>  
  6. </head>  
  7. <body>  
  8. <script type="text/javascript">  
  9. var dict = {  
  10.     "Jeremy" : 20,  
  11.     "Jimmy" : 30  
  12. };  
  13. for(var key in dict)  
  14.     document.write(key + ": " + dict[key] + "</br>");  
  15. </script>  
  16. </body>  
  17. </html>  

 

 

输出3:

 

 

5.字典中嵌套数组

 

[html] view plain copy
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>Test</title>  
  6. </head>  
  7. <body>  
  8. <script type="text/javascript">  
  9. var dict = {  
  10.     "Jeremy" : ["Chinese", "Math"] ,  
  11.     "Jimmy" : ["Art", "English"]  
  12. };  
  13. var name = "Jeremy";  
  14. for(var courseIndex in dict[name])  
  15.     document.write(dict[name][courseIndex] + "</br>");  
  16. </script>  
  17. </body>  
  18. </html>  


输:4:

 

 

6. 字典里value为数组, 数组内为字典,

下面的逻辑就是学生 :  课程列表 : 某门的课程信息

 

[html] view plain copy
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>Test</title>  
  6. </head>  
  7. <body>  
  8. <script type="text/javascript">  
  9. var dict = [];  
  10. var courseListOfJeremy = [  
  11.     {"Chinese" : 3},   
  12.     {"Math": 5}  
  13. ];  
  14. dict[\'Jeremy\'] = courseListOfJeremy;  
  15. var courseListOfJimmy =  [  
  16.     {"Art": 3},   
  17.     {"English": 5}  
  18. ];  
  19. dict[\'Jimmy\'] = courseListOfJimmy;  
  20.   
  21. document.write("Jimmy\'s Course Number Of Chinese: " + dict[\'Jeremy\'][0][\'Chinese\']);  
  22. </script>  
  23. </body>  
  24. </html>  


输出5:

 

 http://blog.csdn.net/anialy/article/details/8295765

分类:

技术点:

相关文章:

  • 2021-07-12
  • 2022-12-23
  • 2022-02-01
  • 2022-12-23
  • 2021-11-23
  • 2021-11-23
猜你喜欢
  • 2021-11-23
  • 2021-11-23
  • 2021-11-23
  • 2021-04-24
  • 2021-07-16
  • 2021-11-23
  • 2021-08-16
相关资源
相似解决方案