博主信息
博文 28
粉丝 0
评论 0
访问量 20066
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
不同的数组类型与访问方式和分支的不同类型演示
手机用户1594223549
原创
691人浏览过

一.不同的数组类型与访问方式

1.输出结果

2.代码部分

  1. // ! 数组类型
  2. // * 1.一维数组
  3. // 声明: 字面量, [...]
  4. // 索引: [0,1,2,3,..], 从0开始递增的"有序"正整数
  5. // 值: 可以是任何类型
  6. // 索引+值: 数组成员 或 数组元素
  7. const arr = ['樱桃', '苹果', '栗子']
  8. //逐个:索引用 array,单个索引用arr[...]
  9. console.log('array: ',arr[0], arr[1], arr[2])
  10. console.log('------------------')
  11. // * 2.扩展数组
  12. // forEach: 用于迭代遍历数组或对象
  13. // foreach(callback): 参数是一个函数,当函数当参数时,叫"回调"
  14. // arr.forEach(function(item,key,arr){}), 只有第一个参数item是必选
  15. // ? (1) 多维数组
  16. // 成员仍然是一个数组
  17. // item是项目,key是键,arr是数组
  18. const arr1 = [
  19. [1, '平板', 100],
  20. [2, '电脑', 200],
  21. [3, '手机', 400],
  22. ]
  23. // 箭头函数
  24. arr1.forEach(item => console.log(item))
  25. console.log('------------------')
  26. // ? (2) 对象数组
  27. // 成员是一个对象字面量, 前后端分离开发中, 服务器返回JSON
  28. const arr2 = [
  29. {id: 1, name: '平板', price: 1000},
  30. {id: 2, name: '电脑', price: 2000},
  31. {id: 3, name: '手机', price: 3000},
  32. ]
  33. // 箭头函数
  34. arr2.forEach(item => console.log(item))
  35. console.log('------------------')
  36. // ? (3) 类数组
  37. // 不是 class, 类: 类似,像, 类数组->类似一个数组,但不是数组
  38. // 仍然是一个对象, 用对象来模拟一个数组
  39. // dom编程, 浏览器中的对象
  40. // ** 由0开始的递增的正整数的索引/属性
  41. // ** 必须要有 `length`,表示成员数量/数组长度
  42. const arr3 = {
  43. 0: 'admin',
  44. 1: '12345677@163.com',
  45. 2: '18356789765',
  46. length: 3,
  47. }
  48. // 需要讲类数组转化为真正的数组,否则无法暑输出
  49. console.log(Array.from(arr3))
  50. // 箭头函数
  51. Array.from(arr3).forEach(item => console.log(item))
  52. console.log('------------------')
  53. // ? (4) 函数数组
  54. // 数组成员是函数
  55. const arr4 = [() => '成绩及格', () => '成绩良好', () => '成绩优秀']
  56. // arr4.forEach(arr4 => console.log(arr4, typeof arr4))
  57. // 因为arr4是一个删除,要调用 arr4()
  58. arr4.forEach(arr4 => console.log(arr4()))

二.分支的不同类型(注意else)

1.输出结果

2.代码部分

  1. // ! 分支
  2. // 分支:有条件的执行某一段代码
  3. // * 单分支
  4. if (true) {
  5. console.log('success');
  6. }
  7. console.log('-------------')
  8. // * 双分支(简化:三元):true / default
  9. if (!true) {
  10. console.log('success');
  11. } else {
  12. console.log('fail');
  13. }
  14. // 三元简化
  15. let status = false
  16. let result = status ? '成功' : '失败'
  17. console.log(result)
  18. console.log('-------------')
  19. // * 多分支(简化:switch)
  20. // ? switch
  21. grade = 'C'
  22. switch (grade) {
  23. case 'A':
  24. console.log('优秀')
  25. break
  26. // 返回的意思
  27. case 'B':
  28. console.log('良好')
  29. break
  30. case 'C':
  31. console.log('合格')
  32. break
  33. case 'D':
  34. console.log('补考')
  35. break
  36. default:
  37. console.log('非法输入')
  38. }
  39. console.log('-------------')
  40. // 上面是单值,如果是区间判断
  41. let score = 83
  42. // switch(true) 才能进入到代码体
  43. switch (true) {
  44. case score >= 80 && score <= 100:
  45. console.log('优秀')
  46. break
  47. case score >= 70 && score < 80:
  48. console.log('良好')
  49. break
  50. case score >= 60 && score < 70:
  51. console.log('合格')
  52. break
  53. case score > 0 && score < 60:
  54. console.log('补考')
  55. break
  56. default:
  57. console.log('非法输入')
  58. }
批改老师:PHPzPHPz

批改状态:合格

老师批语:完成的不错, 继续加油
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学