search

博客列表 >解构赋值与流程控制

解构赋值与流程控制

咸鱼老爷
咸鱼老爷原创
2021年03月02日 14:44:51503浏览

值传递与引用传递

  • 1.赋值
  • 1.1 值传递：原始类型，string，number，bool
    1. let a = 1;
    2.       let b = a;
    3.       console.log('a=%d,b=%d', a, b);
    4.       // 更新a，b不受影响
    5.       a = 2;
    6.       console.log('a=%d,b=%d', a, b);
  • 1.2 引用传递：引用类型，object,array
    1. let obj1 = {
    2.           a: 1,
    3.           b: 2
    4.       };
    5.       console.log(obj1);
    6.       let obj2 = obj1;
    7.       console.log(obj2);
    8.       // 更新obj1
    9.       obj1.a = 10;
    10.       obj1.b = 11;
    11.       console.log(obj1);
    12.       //obj2同步更新
    13.       console.log(obj2);
  • 2.传参
    传参时，不论什么类型，都是值传递
    入参：调用函数是传入的参数。函数中对参数的更新并不会影响到入参
    对于引用类型，只有全新赋值才算是更新，修改属性不算。
  • 3.深拷贝：值传递
  • 4.浅拷贝：引用传递

    模板字面量与标签函数

  • 1、模板字面量：将表达式嵌入到字符串；`
    1. let a = 1,
    2.           b = 2;
    3.       let res = a + "+" + b + "=" + (a + b);
    4.       console.log(res);
    5.       // 模板字面量使用反引号:'`';
    6.       res = `${a}+${b}=${a+b}`;
    7.       console.log(res);

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

  • 字符串字面量：+，=；
  • 变量表达式： a,b,(a+b);
    模板字面量创建多行字符串可以保留格式
    1. let menu = ['首页', '系统', '新闻', '产品'];
    2.       let htmlStr = `
    3.       <ul>
    4.           <li>${menu[0]}</li>
    5.           <li>>${menu[2]}</li>
    6.           <li>>${menu[2]}</li>
    7.           <li>>${menu[3]}</li>
    8.           </ul>
    9.       `;
    10.       console.log(htmlStr);
  • 2、标签函数：自定义模板字面量的行为
    使用自定义函数来处理模板字面量，它的参数约定：
  • 第一个参数：模板字面量中的字符串字面量组成的数组；
  • 从第二个参数开始，将模板字面量中的变量以此传入；

    解构赋值

    任何类型都可以解构，但是工作中基本上只会用到对象和数组；
    解构赋值：快速冲集合数据（数组/对象）解构出独立变量
    要求=俩边类型一致
  • 1、数组
    1. let [a, b, c] = [1, 2, 3];
    2.       console.log(a, b, c);
    3.       [a, b] = [1, 2, 3]
    4.       console.log(a, b);
    5.       [a, b, c, d = 4] = [1, 2, 3]
    6.       console.log(a, b, c, d);
    7.       [a, b, ...c] = [1, 2, 3, 4, 5, 6, 7];
    8.       console.log(a, b, c);
    9.       //单独取一个值
    10.       [, , c, ] = [1, 2, 6, 4]
    11.       console.log(c);
    12.       //交换
    13.       [y,x]=[x,y];
  • 2、对象解构
    1. let {
    2.           id,
    3.           name
    4.       } = {
    5.           id: 10,
    6.           name: '手机'
    7.       };
    8.       console.log(id, name);
    9.       ({
    10.           name,
    11.           id
    12.       } = {
    13.           id: 10,
    14.           name: '手机'
    15.       });
    16.       console.log(id, name);
    17.       let email = 'admin@qq.com';
    18.       let {
    19.           role,
    20.           //取别名
    21.           email: userEmail
    22.       } = {
    23.           role: 'user',
    24.           email: 'user@qq.com'
    25.       };
    26.       console.log(userEmail);
    27.       console.log(email);
  • 3、参数解构
    数组传参
    1. let sum = ([a, b]) => a + b;
    2.       console.log(sum([1, 2]));
    对象传参
    1. let getUser = ({
    2.           name,
    3.           email
    4.       }) => [name, email];
    5.       console.log(getUser({
    6.           email: 'admin@admin.com',
    7.           name: '系统管理员'
    8.       }));

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

bind,call,apply方法

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

  1.  function hello(name) {
  2.             this.name = name;
  3.             console.log(this.name);
  4.         }
  5.         const obj = {
  6.             name: 'admin',
  7.         }
  8.         console.log(hello('admin'));
  9.         let f = hello.bind(obj, 'user');
  10.         console.log(f());

bind动态改变当前this

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

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

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

访问器属性

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

  1.  const product = {
  2.             data: [{
  3.                 name: '电脑',
  4.                 price: '999',
  5.                 num: 1
  6.             }, {
  7.                 name: '电脑',
  8.                 price: '999',
  9.                 num: 2
  10.             }, {
  11.                 name: '电脑',
  12.                 price: '999',
  13.                 num: 3
  14.             }, ],
  15.             getAmounts() {
  16.                 return this.data.reduce((t, c) => (t += c.price * c.num), 0);
  17.             },
  18.             //访问器属性
  19.             // 将方法伪造成一个属性
  20.             get total() {
  21.                 return this.data.reduce((t, c) => (t += c.price * c.num), 0);
  22.             }
  23.         }
  24.         console.log('总金额', product.getAmounts());
  25.         console.log('访问器总金额', product.total);

流程控制

  • 1、if else
    1. let score = 59;
    2.       if (score >= 90) {
    3.           console.log('优秀');
    4.       } else if (score >= 80) {
    5.           console.log('良好');
    6.       } else if (score >= 70) {
    7.           console.log('合格');
    8.       } else if (score >= 60) {
    9.           console.log('及格');
    10.       } else {
    11.           console.log('不及格');
    12.       }
  • 2、switch 简化多分支的if else
    区间判断 switch(true);
    通常不做区间判断，主要用域单值判断
    1. let score = 80;
    2.       switch (true) {
    3.           case score >= 90:
    4.               console.log('优秀');
    5.               break;
    6.           case score >= 80:
    7.               console.log('良好');
    8.               break;
    9.           case score >= 70:
    10.               console.log('合格');
    11.               break;
    12.           case score >= 60:
    13.               console.log('及格');
    14.               break;
    15.           default:
    16.               console.log('补考');
    17.       }
    单值
    1. let status = 'success';
    2.       switch (status) {
    3.           case 'ok':
    4.               console.log('成功');
    5.               break;
    6.           case 'fail':
    7.               console.log('失败');
    8.               break;
    9.           default:
    10.               console.log('未知错误');
    11.       }
  • 3、 三元运算简化双分支
    表达式?真:假
    1. let score=80;
    2. console.log(score>=80?'合格':'补考')；
  • 4、循环

    while循环：入口判断型

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

    do while 循环：出口型循环

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

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

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

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

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

    对象的遍历
    for in

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

    for of

    1. for (let value of arr) {
    2.           console.log(value);
    3.       }
上一条：利用AJAX实现一个无刷新的分页功能下一条：对查询的结果集添加自增序号
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多