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