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

一、循环常用的5种形式

1.1、while循环

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

---

1.2、for循环

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

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

---

1.3、for-of循环

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

---

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

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

---

1.5、forEach/map循环

1.5.1、说明

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

---

/*
console.log('forEach循环:')
arr.forEach(function(item,index,arr) {
    console.log(item,index,arr)
})
*/
// 通常只关注第一个参数，当前的值
arr.forEach(function(item) {
    console.log(item)
})
// 简化：
console.log('简化:')
arr.forEach(item => console.log(item))

---

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

// arr.forEach()：无返回值
let res = arr.forEach(item => item)
console.log(res)
// arr.map()：有返回值
res = arr.map(item => item)
console.log(res)

---

1.5.3、小实战

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

---

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

2.1、数组

// 语法
// 左边：模板，数组用[...]，对象用 {...}
// 右边：值（数组，对象）
// 1. 数组
// 创建，声明
let [uname, email] = ['西门','xm@php.com']
// 在 [], {}, ()之前的分号不能省
// 更新
;[uname,email] = ['金莲','jl@php.com']
console.log(uname, email)
// 变量 > 值：默认值
;[uname,email, gender='女'] = ['金莲','jl@php.com']
console.log(uname, email, gender)
// 变量 < 值：剩余参数 ...rest
;[uname,email, ...arr] = ['武大','wd@php.com','男',60]
let[sex,age] = arr
console.log(uname, email, sex, age)

---

2.2、对象

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

---

2.3、应用1

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

---

2.4、应用2

// 2. 应用场景2：解构传参
let show = function(user) {
    return `${user.uname} ${user.email}`
}
user = { uname: 'guest', email:'guest@php.cn'}
console.log(show(user))
//使用对象解构来简化传参
show = function ({ uname, email }) {
    //return `${user.uname} ${user.email}`
    return `${uname} ${email}`
}
console.log(show(user))