JS基本语法 - 4循环

/** 循环三要素
 * 1. 初始化: 入口
 * 2. 条件: true开始，false终止
 * 3. 更新条件: 避免死循环
 **/
 // 1. while
let arr = [10 ,'admin' ,true]
// (1) 初始化
let index = 0;
// (2) 判断条件
while(index < arr.length){
    console.log(arr[index]) // 10 ,admin ,true
// (3) 更新条件
    index++
}
// 2. for
// while的语法糖
let arr = [10 ,'admin' ,true]
// for(初始化;条件;条件更新;)
for(let index = 0; index<arr.length;index++){
    console.log(arr[index])
}
// 3. for-of
//遍历数组
let arr = [10 ,'admin' ,true]
// 数组循环 只关注值 忽略引索
for(let vale of arr){
    // vale循环遍量用于每一次遍历的接收值
    console.log(vale)
}
// 4. for-in
//遍历对象
let obj = {
    item: '1',
    id: 2,
    name: 'admin'
}
for(let item in obj){
    console.table(obj[item])
}
// 5. forEach / map
//遍历数组
//这是认定在数组对象上的接口
//  接口：函数或者方法
// forEach,map:参数相同，仅仅是返回值不同
// forEach无返回值,map有返回值
let arr = [1,2,3,4,5,6]
arr.forEach(function(值,索引,数组)){}
arr.forEach(function(item,index,arr){
    console.log(item)
})
//简写
arr.forEach(item => console.log(item))
// map()有返回值
let res = arr.map(item => item)
console.log(res)

数组与对象的解构与赋值

//语法
// 左边: 模板,数组用 [...] 对象用 {...}
// 右边: 值（数组, 对象）
// 1. 数组
// 创建
let [uname, email] = ['海外运维网','php@qq.com']
console.log(uname,email);
// 更新
[uname, email] = ['墨子', 'mz@qq.com']
console.log(uname, email);
// 变量大于值: 默认值
[uname, email ,gender = '女'] = ['海外运维网','php@qq.com']
console.log(uname, email, gender)
// 变量小于值: 剩余参数 ...rest
;[uname, email, ...arr] = ['墨子','mz@qq.com','男',60]
let [sex,age] = arr
console.log(uname, email, sex, age)
// 2. 对象解构
// 默认变量名和属性相同
// tips: 变量与当前作用域中的变量命名冲突时，用别名访问
let {id ,uname:username} = {id: 1, uname: 'php'}
console.log(id ,username)
// 应用场景1: 克隆对象
let user = {uname: 'admin',email:'php@qq.com'}
console.log(user)
let {...obj} = user
console.log(obj);
// 2. 应用场景2: 解构传参
let show = function(user){
    return `${user.uname}:(${user.email})`
}
user = {uname:'墨子', email: 'php@qq.com'}
console.log(show(user))
//使用对象解构简化传参
show = function({uname,email}){
    return `${uname}:(${email})`
}
console.log(show(user))

总结循环

1. while()
2. for()
3. for-of
4. for-in
5. forEach() / map()

解构赋值

语法
左边: 模板,数组用 […] 对象用 {…}
右边: 值（数组, 对象）

【文章出处:阜宁网页设计公司 http://www.1234xp.com/funing.html 网络转载请说明出处】