登录  /  注册
博主信息
博文 77
粉丝 0
评论 0
访问量 76343
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
循环常用的5种形式,数组与对象的解构赋值
Jet的博客
原创
577人浏览过

一、循环常用的5种形式

1.1、while循环

  1. const arr =[10, 'admin', true]
  2. console.log(arr.length)
  3. console.table(arr)
  4. // (1)初始化:入口
  5. let index = 0
  6. // (2)条件:index < arr.length
  7. while (index < arr.length) {
  8. console.log(arr[index])
  9. // (3)更新条件:避免死循环
  10. index++
  11. }


1.2、for循环

for: while的语法糖,将三要素全部整合到参数列表中
for (初始化;条件;更新条件) {}

  1. console.log('for循环:')
  2. for(let index = 0; index < arr.length; index++){
  3. console.log(arr[index])
  4. }


1.3、for-of循环

  1. console.log('for-of循环:')
  2. for(let value of arr){
  3. // 1.value = arr[0], 输出 value
  4. // 2.value = arr[1], 输出 value
  5. // 3.value = arr[2], 输出 value
  6. // 4.value = arr[3], false/end
  7. // value:循环变量,用户接收每一次的要被遍历的值
  8. console.log(value)
  9. }


1.4、for-in循环:遍历“对象”

  1. console.log('for-in循环:')
  2. const obj = { id:100, 'my name':'电脑', price:9000}
  3. for(let key in obj){
  4. //console.log(key, obj[key])
  5. console.log(`${key} => ${obj[key]}`)
  6. }


1.5、forEach/map循环

1.5.1、说明

  1. // 这是定义在数组对象上的接口
  2. // 接口:函数或方法
  3. // forEach,map:参数相同,仅仅是返回值不同
  4. // forEach无返回值,map无返回值
  5. // forEach(回调函数)
  6. // array.forEach(function(value, index, array){})

  1. /*
  2. console.log('forEach循环:')
  3. arr.forEach(function(item,index,arr) {
  4. console.log(item,index,arr)
  5. })
  6. */
  7. // 通常只关注第一个参数,当前的值
  8. arr.forEach(function(item) {
  9. console.log(item)
  10. })
  11. // 简化:
  12. console.log('简化:')
  13. arr.forEach(item => console.log(item))


1.5.2、forEach()无返回值,map()有返回值

  1. // arr.forEach():无返回值
  2. let res = arr.forEach(item => item)
  3. console.log(res)
  4. // arr.map():有返回值
  5. res = arr.map(item => item)
  6. console.log(res)


1.5.3、小实战

  1. //小实战:
  2. console.log('小实战:')
  3. res = arr.map(item => ` <li>${item}</li>\n`).join('')
  4. //res = `<ul>\n` + res + `</ul>`
  5. res = `<ul>\n${res}</ul>`
  6. console.log(res)


二、数组与对象的解构赋值

2.1、数组

  1. // 语法
  2. // 左边:模板,数组用[...],对象用 {...}
  3. // 右边:值(数组,对象)
  4. // 1. 数组
  5. // 创建,声明
  6. let [uname, email] = ['西门','xm@php.com']
  7. // 在 [], {}, ()之前的分号不能省
  8. // 更新
  9. ;[uname,email] = ['金莲','jl@php.com']
  10. console.log(uname, email)
  11. // 变量 > 值:默认值
  12. ;[uname,email, gender='女'] = ['金莲','jl@php.com']
  13. console.log(uname, email, gender)
  14. // 变量 < 值:剩余参数 ...rest
  15. ;[uname,email, ...arr] = ['武大','wd@php.com','男',60]
  16. let[sex,age] = arr
  17. console.log(uname, email, sex, age)


2.2、对象

  1. // 2. 对象解构
  2. // 默认变量名和属性相同
  3. // let { id, username } = { id:1, username:'php.cn' }
  4. // 变量与当前作用域中的变量命名冲突时,可以用别名访问
  5. let { id, uname: username } = { id:1, uname:'php.cn' }
  6. console.log(id, username)


2.3、应用1

  1. // 应用场景1:克隆对象
  2. let user = { uname: 'admin', email:'admin@php.cn'}
  3. console.log(user)
  4. //克隆
  5. let {...obj} = user
  6. console.log(obj)
  7. console.log(obj===user)
  8. // 结果false, obj就是user的克隆


2.4、应用2

  1. // 2. 应用场景2:解构传参
  2. let show = function(user) {
  3. return `${user.uname} ${user.email}`
  4. }
  5. user = { uname: 'guest', email:'guest@php.cn'}
  6. console.log(show(user))
  7. //使用对象解构来简化传参
  8. show = function ({ uname, email }) {
  9. //return `${user.uname} ${user.email}`
  10. return `${uname} ${email}`
  11. }
  12. console.log(show(user))

批改老师: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+教程免费学