解构赋值与流程控制

值传递与引用传递

• 1.赋值
• 1.1 值传递：原始类型，string，number，bool

  let a = 1;
        let b = a;
        console.log('a=%d,b=%d', a, b);
        // 更新a，b不受影响
        a = 2;
        console.log('a=%d,b=%d', a, b);

  
• 1.2 引用传递：引用类型，object,array

  let obj1 = {
            a: 1,
            b: 2
        };
        console.log(obj1);
        let obj2 = obj1;
        console.log(obj2);
        // 更新obj1
        obj1.a = 10;
        obj1.b = 11;
        console.log(obj1);
        //obj2同步更新
        console.log(obj2);

  
• 2.传参
  传参时，不论什么类型，都是值传递
  入参：调用函数是传入的参数。函数中对参数的更新并不会影响到入参
  对于引用类型，只有全新赋值才算是更新，修改属性不算。
• 3.深拷贝：值传递
• 4.浅拷贝：引用传递

  模板字面量与标签函数

• 1、模板字面量：将表达式嵌入到字符串；`

  let a = 1,
            b = 2;
        let res = a + "+" + b + "=" + (a + b);
        console.log(res);
        // 模板字面量使用反引号:'`';
        res = `${a}+${b}=${a+b}`;
        console.log(res);

  

模板字面量使用反引号”`”;
模板字面量的组成：

• 字符串字面量：+，=；
• 变量表达式： a,b,(a+b);
  模板字面量创建多行字符串可以保留格式

  let menu = ['首页', '系统', '新闻', '产品'];
        let htmlStr = `
        <ul>
            <li>${menu[0]}</li>
            <li>>${menu[2]}</li>
            <li>>${menu[2]}</li>
            <li>>${menu[3]}</li>
            </ul>
        `;
        console.log(htmlStr);

  
• 2、标签函数：自定义模板字面量的行为
  使用自定义函数来处理模板字面量，它的参数约定：
• 第一个参数：模板字面量中的字符串字面量组成的数组；
• 从第二个参数开始，将模板字面量中的变量以此传入；

  解构赋值

  解构赋值：快速冲集合数据（数组/对象）解构出独立变量
• 1、数组

  let [a, b, c] = [1, 2, 3];
        console.log(a, b, c);
        [a, b] = [1, 2, 3]
        console.log(a, b);
        [a, b, c, d = 4] = [1, 2, 3]
        console.log(a, b, c, d);
        [a, b, ...c] = [1, 2, 3, 4, 5, 6, 7];
        console.log(a, b, c);
        //单独取一个值
        [, , c, ] = [1, 2, 6, 4]
        console.log(c);
        //交换
        [y,x]=[x,y];

  
• 2、对象解构

  let {
            id,
            name
        } = {
            id: 10,
            name: '手机'
        };
        console.log(id, name);
        ({
            name,
            id
        } = {
            id: 10,
            name: '手机'
        });
        console.log(id, name);
        let email = 'admin@qq.com';
        let {
            role,
            //取别名
            email: userEmail
        } = {
            role: 'user',
            email: 'user@qq.com'
        };
        console.log(userEmail);
        console.log(email);

  
• 3、参数解构
  数组传参

  let sum = ([a, b]) => a + b;
        console.log(sum([1, 2]));

  对象传参

  let getUser = ({
            name,
            email
        }) => [name, email];
        console.log(getUser({
            email: 'admin@admin.com',
            name: '系统管理员'
        }));

  

箭头函数中的this总是指向定义它时的作用域（静态作用域|词法作用域），而非调用时的作用域；

流程控制

• 1、if else

  let score = 59;
        if (score >= 90) {
            console.log('优秀');
        } else if (score >= 80) {
            console.log('良好');
        } else if (score >= 70) {
            console.log('合格');
        } else if (score >= 60) {
            console.log('及格');
        } else {
            console.log('不及格');
        }

• 2、switch 简化多分支的if else
  区间判断 switch(true);

  let score = 80;
        switch (true) {
            case score >= 90:
                console.log('优秀');
                break;
            case score >= 80:
                console.log('良好');
                break;
            case score >= 70:
                console.log('合格');
                break;
            case score >= 60:
                console.log('及格');
                break;
            default:
                console.log('补考');
        }

  单值

  let status = 'success';
        switch (status) {
            case 'ok':
                console.log('成功');
                break;
            case 'fail':
                console.log('失败');
                break;
            default:
                console.log('未知错误');
        }

• 3、 三元运算符
  ?:

  let score=80;
  console.log(score>=80?'合格':'补考')；