search

博客列表 >模板字面量/访问器属性/流程控制

模板字面量/访问器属性/流程控制

心
心原创
2021年01月08日 01:23:15789浏览

值传递与引用传递

  • 值传递
    -赋值
    -值：原始类型，string,number,bool
  • 引用传递
    -引用类型,object,array
  • 传参
    -传参时，不论什么类型，都是“值传递”
    -入参：调用函数是传入的参数
    -函数中对参数的更新，并不会影响到入参
    -对与引用类型，只有全新赋值才算是更新，修改属性不算的
    -赋值一个全新的对象，才是更新
    -函数中对于对象参数/引用参数的更新并没有影响到入参
  • 深拷贝：值拷贝
  • 浅拷贝：引用传递
  1.  <script>
  2.   //-值：原始类型，string,number,bool
  3.      let a= 1;
  4.     let b =a;
  5.     console.log("a = %d,b = %d",a ,b);
  6.     a = 2;
  7.     //更新a,不影响b
  8.     console.log("a = %d,b = %d",a, b);
  9.     //引用类型,object,array
  10.     let obj1 = {a:1,b:2};
  11.     console.log(obj1);
  12.     let obj2 = obj1;
  13.     console.log(obj2);//值不变
  14.     //更新obj1
  15.     obhj1.a = 10;
  16.     console.log(obj1);
  17.     // obj2同步更新
  18.     console.log(obj2);
  19.     //传参时，不论什么类型，都是“值传递”
  20.     const f1 = x =>(x=10);
  21.     let m = 5;
  22.     console.log("m = %d" , m);
  23.     f1(m);
  24.     // 入参：调用函数是传入的参数
  25.     console.log("m = %d" , m);
  26.     const f2  = x => (x.a = 10);
  27.     let o = {a:1,b:2};
  28.     console.log(0);
  29.     f2(o);
  30.     //看上去函数中对于o.a的更新生效，实际上仍是值传递
  31.     console.log(o);
  32.     //对与引用类型，只有全新赋值才算是更新，修改属性不算的
  33.     const obj = {x：1，y:2}；
  34.     obj.x = 20;
  35.     //赋值一个全新的对象，才是更新
  36.     obj = {};
  37.     const f3 = x =>(x={})；
  38.     f3(o);
  39.     console.log(o);
  40.  </script>

模板字面量/标签函数

  • 模板字面量:将表达式嵌入到字符串
    -模板字面里使用反引号：“ ` ”
    -模板字面量的组成
    -字符串字面里： “+，=”;
    -变量或表达式：a,b,(a+b)
    -模板字面量创建多行字符串可以保留格式
  1. <script>
  2.     //模板字面量,把表达式嵌入到字符串
  3.     let  a = 1;
  4.     let b =4;
  5.     let res = a + “+” + B + "=" +(a+b);
  6.     console.log(res);
  7.     //使用反引号可以简写
  8.     res = `${a}+${b} = ${a+b}`;
  9.     console.log(res);
  10.     //模板字面量创建多行字符串可以保留格式
  11.     let menu = ['首页’，'视频','文章'];
  12.     let hemlStr = `<ul>
  13.         <li><a href="">${menu[0]}</a></li>
  14.         <li><a href="">${menu[1]}</a></li>
  15.         <li><a href="">${menu[2]}</a></li>
  16.     </ul>`;
  17.     console.log(htmlStr);
  18.     document.body.inserAdjacentHTML("beforeEnd",htmlStr);
  19. </script>

标签函数：自定模板字面里的行为

  • 使用自定义函数来处理模板字面量，它的参数约定
    -第一个参数：模板字面里中的字符串字面量组成的数据
    -从第二个参数开始，将模板字面量中的变量一次传入
    -rest 简化
  1. <script>
  2.     let hello = name=> alert(name);
  3.     hello`你好`;
  4.     //使用自定义函数来处理模板字面量，它的参数约定
  5.     //第一个参数：模板字面里中的字符串字面量组成的数据
  6.     //从第二个参数开始，将模板字面量中的变量一次传入
  7.     let sum = (strs,a,b)=>{
  8.         console.log(strs;)
  9.         console.log(a,b);
  10.     };
  12.     //调用用数组包起来
  13.     sum(['+','=',''],a,b);
  14.     sum`${a}+${b}=`;
  16.     //rest 简化
  17.     sum(strs,...args)=>{
  18.         console.log(strs)
  19.         console.log(args);
  20.     };
  21.     sum`${a}+${b}=`;
  22. </script>

解构赋值

  • 解构赋值
    -快速从集合数据（数组/对象）解构出独立变量
    -参数解构
    -数组传参
  1. //数组
  2. <script>
  3.     let [a,b,c] =[1,2,3];
  4.     console.log(a,b,c);
  6.     [a,b] = [1,2,3];
  7.     console.log(a,b);
  9.     [a,b,c,d="xxxx"] = [1,2,3];
  10.     console.log(a,b,c,d);
  12.     [a,b,...c] = [1,2,3,4,5];
  13.     console.log(a,b,c);
  15.     [,,a,,] = [1,2,3,4,5];
  16.     console.log(a);
  18.     let x = 1, y= 2;
  19.     console.log("x=%d,y = %d",x,y);
  20.     t=x;
  21.     x = y;
  22.     y=t;
  23.     console.log("x=%d,y=%d",x,y);
  25.     [y,x] = [x,y];
  26.     console.log("x=%d,y=%d",x,y);
  27. </script>
  • 对象解析
    -属性名与变量必须一一对应，顺序无所谓
  1. <script>
  2.     let{id,name}={id:10,name："手机"}；
  3.     console.log(id,name);
  4.     //属性名与变量必须一一对应，顺序无所谓
  5.     （{name,id}={id:10,name："手机"}）；
  6.     console.log(id,name);
  7.     //别名
  8.     let email;
  9.     {role,email:userEmail}={role:"user,email:"120@qq.com"}
  10.     console.log(userEmail);
  12.     //参数解构：数组传参
  13.     let sum = ([a,b]) => a+b;
  14.     console.log(sum([10,20]));
  15.     //对象传参
  16.     let getUser = ({name，email}) => [name,email];
  17.     console.log(getUser({name:"lisi",email:'510@qq.com'}));
  18. </script>

对象自变量的简化

  • 对象自变量简化
    -当属性名与同一个作用域的变量名相同时，可以直接使用属性名来引用变量值
    -方法也能简化:删除冒号和function,关键字
  • 箭头函数：
  • 箭头函数中的this总是指向定义它时的作用域（静态作用域/词法作用域），而并非调用时
    -user 对象不能出创建作用域，this指向了user的作用域/作用域链
    -全局没有userName,userEmail,所以输出 undefiend
  1. <script>
  2. let user = {
  3.     userName:"李四";
  4.     userEmail:"2000@qq.com";
  5.     getInfo:function(){
  6.         retrun `${this.userName}(${this.userEmail})`;
  7.     },
  8. };
  9. console.log(user,getInfo());
  11. let {userName,userEmail} = user;
  12. console.log(userName,userEmail);
  14. let user = {
  15. //当属性名与同一个作用域的变量名相同时，可以直接使用属性名来引用
  16.     userName,
  17.     userEmail,
  18.     getInfo(){
  19.         retrun `${this.userName}(${this.userEmail})`;
  20.     },
  21. };
  22. //使用箭头函数
  23. user  = {
  24.     userName,
  25.     userEmail,
  26.     //使用箭头函数
  27.     getInfo:()=>`${this.userName}(${this.userEmail})`;
  28.     //当前函数中的this指向了全局window
  29.     test:()=>console.log(this),
  30. }
  31. console.log('简化：',user,getInfo());
  32. console.log(user.test());
  34. </script>

bind,call,apply

  • bind 不会立即执行
    -动态改变this
  • call/apply 立即执行
  • apply 必须是数组
  1. <button>点击</button>
  2. <script>
  3.     function hello(name){
  4.         this.name = name;
  5.         console.log(this.name);
  6.     }
  7.     const obj = {name:'admin'，};
  8.     //经典调用
  9.     console.log(hellog("朱老师"))；
  10.     //bind()不会立即执行，只返回一个函数声明
  11.     let f = hello.bind(obj,'你好')；
  12.     console.log(f());
  14.     //call/apply立即执行
  15.     f= hello.call (obj,'世界');
  16.     console.log(f);
  18.     f= hello.apply(obj,['世界']);
  19.     console.log(f);
  20.     //bind()应用案例
  21. document.querSelector('button').addEventListener('click',function(){
  22.     console.log(this.name);
  23.     console.log(this);
  24.     document.body.appendChild(document.createElement('p').innerHTML = '欢迎：' + this.name);
  25. },bind({name:'猫科动物'}));
  26. </script>

访问器属性

  • 访问器属性
    -将方法伪造成一个属性
    -访问器属性优先级高于同名的普通属性
  1. <script>
  2.     const product = {
  3.         data:[
  4.             {name:"电脑"，price：5000，num:5},
  5.             {name:"手机"，price：5000，num:5},
  6.             {name:"相机"，price：5000，num:5},
  7.         ],
  8.         getAmounts(){
  9.             return this.data.reduce((t,c)=>(t+=c.price*c.num),0);
  10.         },
  11.         //访问器属性
  12.         get total(){
  13.         return this.data.reduce((t,c)=>(t+=c.price*c.num),0);
  14.         },
  15.         set setPrice(price){
  16.             this.data[1].price = price;
  17.         }
  18.     }
  19. console.log('总金额:',product.getAmounts());
  20. console.log(总金额:',product.total);
  21. product.setPrice=9988;
  22. console.log(product.data[1].price);
  23. </script>

流程控制-分支

  • 流程控制
    -if(){}else{}
    -switch(){case “条件” break;default}
  • 三元运算符
    -条件？true : false
  1. <script>
  2.     let score = 64;
  3.     //单分支
  4.     if(score >= 60){
  5.         console.log('及格');
  6.     }
  7.     //双分支
  8.     if(score>=60){
  9.         console.log('及格');
  10.     } else {
  11.         console.log('补考');
  12.     }
  13.     //多分枝
  14.     if(score >= 60 && score <80){
  15.         console.log('合格')；
  16.     }else if(score >= 80 && score <= 100){
  17.         console.log('学霸');
  18.     }
  19.     //判断成绩是否合法
  20.     else if (scoure > 100 || score < 0){
  21.         console.log('非法数据');
  22.     }
  23.     else {
  24.         console.log('补考');
  25.     }
  27.     switch(true){
  28.         case score >= 60 && scoure < 80:
  29.         console.log('合格');
  30.         break;
  31.         case score >= 80 && scoure < 100:
  32.         console.log('学霸');
  33.         break;
  34.         case score >100 || scoure < 0:
  35.         console.log('非法数据');
  36.         break;
  37.         default:
  38.         console.log('补考');
  39.     }
  41.     //switch用在单值判断
  42.     let respponse = 'Success';
  43.     switch(respponse.toLowerCase()){
  44.         case 'fail';
  45.         console.log('请求失败');
  46.         break;
  47.         case 'success';
  48.         console.log('请求成功');
  49.         break;
  50.         default:
  51.         console.log('未知错误');
  52.     }
  53. // 三元运算符
  54. console.log(score>=60 ？"及格" ： "补考")；
  56. if(score>=10){
  57.     console.log('及格');
  58. }else{
  59.     console.log('补考');
  60. }
  61. </script>
上一条：0106作业下一条：事件代理-留言版-字符串练习-预习数组方法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多