search

博客列表 >演示不同的数组类型与访问方式和分支的不同类型

演示不同的数组类型与访问方式和分支的不同类型

A 管志岗-电商策划
A 管志岗-电商策划原创
2023年02月25日 14:43:11270浏览

1. 实例演示不同的数组类型与访问方式

  1. 总共有三个数组类型：
  2. 1. 多维数组
  3. 2. 对象数组
  4. 3. 类数组
  6. // 1. 多维数组
  7. const arr1 = [
  8.   [1, '西瓜', 10],
  9.   [2, '苹果', 20],
  10.   [3, '黄桃', 30],
  11. ]
  12. // arr1.forEach(function (item, key, arr1){
  13. // console.log(item,key,arr1);
  14. // })
  16. // arr1.forEach(function (item){
  17. // console.log(item);
  18. // })
  19. // 用箭头函数缩写一下
  20. // 1. 去掉function, 括号后面增加=>，
  21. // 2. 只有一个语句，可以删除大括号
  22. arr1.forEach ( item => console.log(item))
  23. console.log('-----------------------------');
  24. // 2. 对象数组
  25. // 成员是一个对象字面量,前后端分离开发中，服务器返回JSON
  26. const fruits = [
  27.   {id:1, name: '西瓜', price:10},
  28.   {id:2, name: '苹果', price:20},
  29.   {id:3, name: '黄桃', price:30},
  30. ]
  32. fruits.forEach ( item => console.log(item))
  34. // 3. 类数组
  35. // 不是class， 类：类似，像，类数组-> 类似一个数组，但不是数组
  36. // 仍然是一个对象，用对象来模拟一个数组
  37. // dom编程，浏览器中的对象
  38. const likeArr = {
  39.   0:'admin',
  40.   1:'admin@qq.com',
  41.   2:'21343222',
  42.   length:3
  43. }
  44. // 类数组特征：
  45. // 1. 由0开始的递增的正整数的索引/属性
  46. // 2. 必须有'length',表示成员数量/数组长度
  47. // console.log(likeArr);
  49. // likeArr.forEach(item => console.log(item))
  50. // 将类数组转为真正的数组
  51. // console.log(Array.from(likeArr));
  52. // [ 'admin', 'admin@qq.com', '21343222' ]
  54. Array.from(likeArr).forEach(item => console.log(item))
  56. // 4. 函数数组
  57. // const events = [
  58. //   function(){
  59. //     return '准备发射'
  60. //   },
  61. //   function(){
  62. //     return '击中目标'
  63. //   },
  64. //   function(){
  65. //     return '敌人投降'
  66. //   },
  67. // ]
  68. // 箭头函数
  69. const events = [
  70.   () => '准备发射',
  71.   () => '击中目标',
  72.   () => '敌人投降',
  73. ]
  74. // ev 是一个函数，要调用ev()
  75. // events.forEach(events => console.log(events()))
  76. events.forEach(ev => console.log(ev()))
  78. // 5. 对象方法
  79. // 对象的方法中，其实就是属性，只不过他得值是一个匿名函数
  80. const user = {
  81.   uname: '管志岗',
  82.   email: 'admin@qq.com',
  83.   getUser: function() {
  84.     // this 当前对象的引用， user 
  85.     // 模板字符串要用反引号``,可以打出内容，''这个是打印的模板字面量${user.uname}
  86.     // return `${user.uname}: (${user.email})`
  87.     return `${this.uname}:(${this.email})`
  88.   },
  89. }
  90. console.log(user.getUser());
  91. console.log(user.email,user.uname);
  92. console.log('-------------------------');
  94. //用数组调用
  95. const user1 = [
  96.     '管志岗',
  97.     'admin@qq.com',
  98.     function() {
  99.       return `${this[0]}:(${this[1]})`
  100.     },
  101. ]
  102. console.log(user1[2]());
  103. console.log('---用数组调用---');
  104. // 数组与对象的区别：
  105. // 数组与对象并无本质区别，仅仅是语法上的不同
  106. // 仅仅是成员声明方式和访问方式不同
  107. // 显然对象的语义化更好
  108. // 所以，可以将数组，看成对象的一个子集或特例
  110. // 函数的本质
  111. // 函数是js中，最重要的数据类型
  112. // 函数可视为一个普通的值
  113. // 函数可以充当返回值，参数等，凡是用到值的地方
  114. // 如果没有return，则返回undefined

2. 实例演示分支的不同类型,注意else的本质

  1. // todo 流程控制：分支
  2. // 1. 顺序： 默认，与源码书写循序一直，不必再浪费时间
  3. // 1. 单分支
  4. // 2. 双分支（简化三元）
  6. // 条件
  7. if (true) {
  8. }
  10. // 1. 单分支
  11. if (true) {
  12.   console.log("success");
  13. }
  14. console.log("----------------------");
  16. // 2. 双分支： true/default
  17. if (!true) {
  18.   console.log("success");
  19. } else {
  20.   console.log("fall");
  21. }
  22. // else : 不一定是 false，只要不满足条件就执行这里
  23. // else ：默认分支
  25. // 三元进行简化
  26. let success = false
  27. let result = success ? "成功" : "失败";
  28. // if (status) {
  29. //   return "成功";
  30. // } else {
  31. //   return "失败";
  32. // }
  33. console.log(result);
  34. console.log("-------------------------");
  35. // 3. 多分支
  36. // if-else 嵌套 用switch来替换更好
  37. grade = "C";
  38. // if (grade == "A") {
  39. //   console.log("优秀");
  40. // } else if (grade == "B") {
  41. //   console.log("良好");
  42. // } else if (grade == "C") {
  43. //   console.log("合格");
  44. // } else if (grade == "D") {
  45. //   console.log("补考");
  46. // } else {
  47. //   console.log("非法输入");
  48. // }
  50. // grade = "d";
  51. switch (grade) {
  52.   case "A":
  53.     console.log("优秀");
  54.     break;
  55.   case "B":
  56.     console.log("良好");
  57.     break;
  58.   case "C":
  59.     console.log("合格");
  60.     break;
  61.   case "D":
  62.     console.log("补考");
  63.     break;
  64.   default:
  65.     console.log("非法输入");
  66. }
  68. // 上面是单值，区间判断
  69. let score = 75;
  70. // switch 是true才能进入代码体
  71. switch (true) {
  72.   case score >= 80 && score <= 100:
  73.     console.log("优秀");
  74.     break;
  75.   case score >= 60 && score <= 79:
  76.     console.log("及格");
  77.     break;
  78.   case score >= 40 && score <= 59:
  79.     console.log("差等");
  80.     break;
  81.   case score >= 0 && score <= 39:
  82.     console.log("补考");
  83.     break;
  84.   default:
  85.     console.log("非法输入");
  86. }
上一条：VUE使用three.js示例下一条：模仿淘宝网
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多