博客列表 >流程控制的分支、循环,函数的参数与返回——对象字面量的简化方案,模板字面量,模板函数

流程控制的分支、循环,函数的参数与返回——对象字面量的简化方案,模板字面量,模板函数

蓝魔
蓝魔原创
2022年01月06日 10:07:16466浏览

流程控制的分支,循环

  • 分支
  1. if(){}else if(){}else{}
  1. // 分支:
  2. let grade=60;
  3. if(grade<60){
  4. console.log('不及格');
  5. }else if(grade>=60 && grade<80){
  6. console.log('及格');
  7. }else if(grade>=80 && grade<90){
  8. console.log('优秀');
  9. }else{
  10. console.log('完美');
  11. }

2.switch

  1. // switch分支
  2. let grade=50;
  3. switch(true){
  4. case grade<60 :
  5. console.log('不及格');
  6. break;
  7. case grade>=60 && grade<80:
  8. console.log('及格');
  9. break;
  10. case grade>=80 && grade<90:
  11. console.log('优秀');
  12. break;
  13. default:
  14. console.log('完美');
  15. }
  • 循环
  1. // 1.for循环
  2. const arr=[1,2,3,4,5,6];
  3. for(let i=0,length=arr.length;i<length;i++){
  4. console.log(arr[i]);
  5. }
  6. // 2.while循环
  7. let i =0
  8. while(i < arr.length){
  9. console.log(arr[i]);
  10. i++;
  11. }
  12. // do...while循环
  13. let j=0;
  14. do{
  15. console.log(arr[j]);
  16. j++;
  17. }while(j<arr.length)
  18. // for-of迭代器,用于遍例数组。
  19. // item of arr.entries()返回键值对数组[0,1],[1,2],[2,3]...
  20. // item of arr.keys()仅返回键
  21. // item of arr.values()仅返回值
  22. // item of arr仅返回值
  23. for(let item of arr){
  24. console.log(item);
  25. }
  26. // for - in 遍例对象
  27. const obj={id:1,title:'开博第一天',content:'感觉不错!'};
  28. for(let item in obj){
  29. console.log(obj[item]);
  30. }

函数的参数与返回值

  1. // 1 参数不足,给参数设置默认值
  2. let fn=(a,b=9)=>a+9;
  3. console.log(fn(8));
  4. // 2.参数过多,用...args将多余参数压入一个数组(rest语法)
  5. let f1=(a,b,...args)=>args;
  6. console.log(f1(2,3,4,5,6,7,8));
  7. // 如果...后面跟一个集合数据如数组,则会将集合中的元素全部展开
  8. console.log(...[1,2,3,4,5]);
  9. let imp = {...[1,2,3,4,5]};
  10. console.log(typeof imp);
  11. console.log(imp);
  12. console.log(imp[0]);

  1. // 返回值
  2. // 1.默认返回单值
  3. f4=()=>'返回值';
  4. console.log(f4());
  5. // 2.返回多值 可用返回数组或对象解决
  6. f4=()=>[1,2,3,4,5];
  7. console.log(f4()[1]);
  8. // 如果返回对象,则对象需要用()包起来,否则出错。
  9. f4=()=>({a:1,b:2,c:3});
  10. console.log(f4().a);

对象字面量的简化方案

  1. // 对象字面量的简化方案
  2. // 1.对象属性的简化:如果属性名与变量名同名,且在同一作用域。变量名可不写。
  3. let title='好好学习,天天向上!';
  4. const art={
  5. title,
  6. content:'背着书包向学堂'
  7. }
  8. console.log(art.title);
  9. // 2.方法简化:直接将 :function 去掉
  10. const go = {
  11. name:'小明',
  12. getName(){
  13. return this.name;
  14. }
  15. }
  16. console.log(go.getName());

模板字面量、与原始字符串的区别

  • 表示方法:qwe${变量}123
  • 区别:原始字符串里面不能包含变量,模板字面量中可以包含变量、表达式、函数等。
  1. let desc='描述信息';
  2. let out=`请在这里输入 ${desc}`;
  3. console.log(out);

模板函数

  1. // 模板函数
  2. // 定义:使用“模板字面量”为参数的函数
  3. // 参数说明:第一个参数是由字面量组成的数组(模板),第二个参数及之后的全为插值(变量)
  4. // 调用:调用时不能用fn()这种方式,而是用fn``
  5. function heji(str,num,price){
  6. console.log(str,num,price);
  7. console.log(str[0],num*price,str[2]);
  8. }
  9. let num=10,price=2.3;
  10. heji`总计:${num}${price}元`

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议