登录  /  注册
博主信息
博文 4
粉丝 0
评论 0
访问量 2062
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
JavaScript实例演示:分支与循环结构、解构赋值与应用场景
飞天浪子
原创
436人浏览过

分支与循环结构

分支与循环结构是编程中经常使用到的,就JS来说,主要有以下几种实现方式。

单分支: if(){}

  1. let result = 75
  2. if (result >= 60) {
  3. console.log('及格')
  4. }

如果符合条件,返回‘及格’,如果不符合条件则无返回。

双分支: if(){}else{}

  1. let result = 55
  2. if (result >= 60) {
  3. console.log('及格')
  4. } else if (result < 60) {
  5. console.log('不及格')
  6. }

双分支有个简化的语法糖,上面的例子可以简写
console.log(result >=60 ? '及格' : '不及格')

多分支: if(){}else if(){}else{}

  1. let result = 79
  2. if (result >= 60 && result < 80) {
  3. console.log('及格')
  4. } else if (result >= 80){
  5. console.log('优秀')
  6. } else {
  7. console.log('不合格')
  8. }

多分支语法糖: switch(离散,区间)

  1. let result = 89
  2. switch(true) {
  3. case result >= 60 && result < 80 :
  4. console.log('及格')
  5. break
  6. case result > 80 :
  7. console.log('优秀')
  8. break
  9. default:
  10. console.log('不及格')
  11. }

注意在各个区间结尾用‘break’结束运行,在最后的默认项就不用了,不然持续运行直至结束。

循环结构

循环都有三要素,缺一不可,不然会造成死循环,一是初始化,即从哪里开始,二是条件;即到哪里结束,条件为true即运行,条件为false即结束;三是更新条件,避免出现死循环。

while()

用一个遍历数组的简单小例子说明,其中length是数组自带的属性,表示数组中元素的个数,从第一个开始,直至最后一个结束。

  1. let arr = ['赵','钱','孙','李']
  2. // 1. 初始化
  3. let i = 0
  4. // 2. 条件
  5. while (i < arr.length) {
  6. console.log(arr[i])
  7. // 3. 更新条件
  8. i++
  9. }

for()

这其实就是while的简化语法糖

  1. for (i = 0;i<arr.length;i++){
  2. console.log(arr[i])
  3. }

for-of()

用于遍历数组

  1. for (let vv of arr) {
  2. console.log(vv)
  3. }

for-in()

用于遍历对象

  1. let population = {id:1,surname:'赵',number:23}
  2. for (let vv in population) {
  3. console.log(population[vv])
  4. }

解构赋值与应用场景

解构赋值的使用对象是数组、对象等集合类型。解构就是将集合中每个成员, 赋值给独立的变量。语法分别是:
数组[…] = […],对象{…} = {…}

数组解构

一个商品参数列表,分别赋值给id/name/price

  1. const product = [1,'iphone',5800]
  2. let [id,name,price] = [1,'iphone',5800]
  3. console.log(id,name,price)

对象解构

  1. const product = {id:1,name:'iphone',price:5800}
  2. let {id:uid,name:uname,price:uprice} = {id:1,name:'iphone',price:5800}
  3. console.log(uid,uname,uprice)

默认对象的属性名就是变量名,这是将变量名进行了更改。

克隆一个对象

  1. const product = {id:1,name:'iphone',price:5800}
  2. let {...obj} = product

实际查看对象‘obj’和‘product’完全一样。

批改老师:PHPzPHPz

批改状态:合格

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

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

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