解构赋值与流程控制

值传递与引用传递

• 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总是指向定义它时的作用域（静态作用域|词法作用域），而非调用时的作用域；

bind,call,apply方法

bind 不会立即执行，返回的是一个函数

 function hello(name) {
            this.name = name;
            console.log(this.name);
        }
        const obj = {
            name: 'admin',
        }
        console.log(hello('admin'));
        let f = hello.bind(obj, 'user');
        console.log(f());

bind动态改变当前this

 document.querySelector('button').addEventListener('click', function() {
            console.log(this.name);
        }, bind({
            name: '这是测试'
        }))

call,apply会立即执行
apply参数必须是数组

f = hello.call(obj, '这是call');
        console.log(f);
         f = hello.apply(obj, ['这是call']);
        console.log(f);

访问器属性

将方法伪造成一个属性,访问器属性的优先级高于同名的普通属性

 const product = {
            data: [{
                name: '电脑',
                price: '999',
                num: 1
            }, {
                name: '电脑',
                price: '999',
                num: 2
            }, {
                name: '电脑',
                price: '999',
                num: 3
            }, ],
            getAmounts() {
                return this.data.reduce((t, c) => (t += c.price * c.num), 0);
            },
            //访问器属性
            // 将方法伪造成一个属性
            get total() {
                return this.data.reduce((t, c) => (t += c.price * c.num), 0);
            }
        }
        console.log('总金额', product.getAmounts());
        console.log('访问器总金额', product.total);

流程控制

• 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?'合格':'补考')；

• 4、循环

  while循环：入口判断型

  let arr=[1,2,3,4,5];
        //初始化循环变量
        let i=0;
        // 设置循环条件
        while(i<arr.length){
            console.log(arr[i]);
            // 更新循环条件
            i++
        }

  do while 循环：出口型循环

  let i = 0;
        do {
            console.log(arr[i]);
            i++
        } while (i < arr.length);

  for 循环
  for(初始化循环变量；设置循环条件；更新循环条件){循环体}；

  for(let i=0;i<arr.length;i++){
  console.log(arr[i]);
  }

  循环与分支混编
  break 终止
  continue 跳出

  for (let i = 0; i < arr.length; i++) {
            //只输出前3
            if (i < 3) console.log(arr[i]);
            // if(i>=3) break;
            // console.log(arr[i]);
        }

  对象的遍历
  for in
  

  const user = {
            id: 1,
            name: 'user',
            age: 22,
        };
        for (let key in user) {
            console.log(`${key}=>${user[key]}`);
        }

  for of

  for (let value of arr) {
            console.log(value);
        }