博客列表 >循环常用的5种形式,数组与对象的解构赋值

循环常用的5种形式,数组与对象的解构赋值

Jet的博客
Jet的博客原创
2023年02月19日 22:50:31355浏览

一、循环常用的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))

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议