实例演示分支与循环结构,对象字面量的简化,解构赋值与应用场景(克隆与传参)

分支与循环解构

1. 分支

分支主要分为:单分支,双分支,多分支.
1 . 单分支

let status = true;
    if (status){
        console.log('hello,world');
    }

2 . 双分支

    status = false;
    if(status){
        console.log('hello,world');
    }
    else{
        console.log('false');
    }
    // 三元运算符,双分支语法糖
    status?console.log('hello,world'):console.log('false');;

3 . 多分支

    let time=10;
    if (time>=0 &&time<8){
       console.log('现在是凌晨');
    }else if (time>=8 &&time<12){
        console.log('现在是上午');
    }else if(time>=12 && time<=14){
        console.log('现在是中午');
    }else if(time>14 && time<18){
        console.log('现在是下午');
    }else if(time>=18 && time<=24){
        console.log('现在是晚上');
    }else {
        console.log('时间输入错误');
    }
    // 多分支语法糖switch,如果是做区间查询,switch()不是单值,就只需填上true  switch(true)
    time=20;
    switch(true){
        case time>=0 && time<8:
          console.log('现在是凌晨');
          break;
        case  time>=8 && time<12:
          console.log('现在是上午');
          break;
        case  time>=12 && time<=14:
           console.log('现在是中午');
           break;
        case  time>14 && time<18:
            console.log('现在是下午');
            break;
        case  time>=18 && time<=24:
            console.log('现在是晚上');
            break;
        default:
        console.log('时间输入错误');
    }

2. 循环结构

循环结构主要分为,while和for.

• 循环三要素:

  • 初始化,从哪里开始,从哪里入口
  • 条件:从哪里结束,true继续执行,false停止执行
  • 更新条件:避免死循环

1 . while和for

     //  从索引0开始
        let i=0   //初始化,从哪里开始,入口
        while(i<arr.length){  //条件,ture继续执行,false停止执行
            console.log(arr[i]);   //执行代码
            i++;       //更新条件,避免死循环
        }
//     while的语法糖,for
      for(let i=0; i<arr.length;i++){
        console.log(arr[i]);
      }

2 . for - of

//   for-of :只能遍历数组
     for(let value of arr){
        console.log(value);
     }

3 . for - in

//  for-in:遍历对象
    let obj = {
        name:'张三',
        年龄:18,
        工资:5000,
    }
    for(let key in obj){
        console.log(key+':'+obj[key]);
    }

4 . forEach

   // forEach 遍历数组
   // 语法:forEach(function(值,该值的说索引,正在遍历的数组))
   arr.forEach(function(item,index,arr){
    console.log(item,index,arr);
   })
    //实际中,只有第一个参数是必选的,后面的2个参数可选
   arr.forEach(function(item){
    console.log(item);
   })
   //匿名函数,所以可以用箭头函数简化
    arr.forEach((item)=>console.log(item))
    console.log('以下是map遍历数组');

5 . map

    //map:遍历数组
    //map和forEach 使用方法一样,不同的是map有返回值(正在被遍历的数组)
    arr.map((item)=>console.log(item)) 
   //以下是map简化后的- 遍历数组
    let res =  arr.map(item=>item) ;
    console.log(res);

3. 对象字面量简化

对象字面量简化包含属性简化和方法简化:

        let username = '张五';
        let user= {
            username:username,
            fn:function(){
                return `hello,${this.username}`;
            } 
        }
        console.log(user.username);
        //对象字面量简化
        /**
         * 属性简化:
         * 1 .属性值如果来自同一作用域中的变量,可以只写属性名
         * 2. 属性与变量名同名,可以只写属性,不写变量
         * 方法简化:
         * 删除":function" 
         */
         //简化后,代码如下
         username = '张五';
         user= {
            username,
            fn(){
                return `hello,${this.username}`;
            } 
        }
        console.log(user.username);

4. 解构赋值与应用场景(克隆与传参)

1. 解构赋值

    let [uname,email] = ['admin','admin@qq.com']
        console.log(uname,email);
    //变量不足,默认值
        [uname,email,age=20] = ['admin','admin@qq.com']
        console.log(uname,email,age);
    //数据过多,剩余参数"..."
        [uname,email,...arr] = ['admin','admin@qq.com',40,5000]
        console.log(uname,email,arr);

2. 应用场景

// 1. 克隆对象
         let item = {name:'手机',price:1900}
         let{...obj} = item;
        //  obj 就是由item克隆而来的fuzhipin,不是同一个
        console.log(item);
        console.log(obj);
        console.log(item==obj);  //返回false .说明不是同一个对象
//  2. 传参
        let show = function(item){
            //item是object
            return `${item.name}:${item.price}`;
        }
        console.log(show({name:'手机',price:1900}));