Blogger Information
Blog 145
fans 7
comment 7
visits 165361
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JS基础知识:解构赋值、标签函数以及流程控制语句
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
Original
1009 people have browsed it

解构赋值

1、解构要求等号两边类型转一致;
2、解构支持别名
3、解构支持默认值
4、解构对象和数组

模板字面量和标签函数

模板字面量

1、模板字面量:以(分号)` 作为分界符;正常字符串是单引号和双引号未为分界符;
2、模板变量中可以使用变量,但必须${}包裹

标签函数

1、标签函数和正常函数在表现形式上没有明显区别;都有变量和函数体
2、在使用是标签函数的实参是一个模板字面量,并且不需要小括号包括
3、标签函数第一个参数用来接收模板字面量中的所有字符串

解构赋值以及标签函数和模板字面量演示

1、代码

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title></title>
  8. <script src="" type="text/javascript" charset="utf-8"></script>
  9. </head>
  10. <body>
  11. <h1></h1>
  12. </body>
  13. <script >
  14. let arr=[1,2,3,"four",5,6,"seven"];
  15. console.log(typeof arr); //数组也是对象的一种
  16. console.log(arr instanceof Array);
  17. console.log(arr instanceof Object);
  18. console.log(Array.isArray(arr));
  19. let username="ldy";
  20. // username="我的名字:"+username;
  21. username=`我的名字:${username}`;
  22. console.log(username);
  23. let price=12;
  24. let num=10;
  25. let count=`单价${price},数量${num},共计需要支付${price*num}`;
  26. console.log(count)
  27. console.log('*************');
  28. // 标签函数
  29. function show(strings,var1,var2){
  30. console.log(strings);
  31. console.log(var1,var2);
  32. }
  33. show`单价${price},数量${num},共计需要支付${price*num}`;//不需要像函数一样加小括号;
  34. // 解构赋值
  35. // 1.对象解构赋值
  36. // 结构要求等号两边类型一致;
  37. ({name,age}={name:'ldy',age:20,});
  38. // 别名和默认值
  39. ({name:u,age:a,sex="男"}={name:'ldy1',age:30,});
  40. console.log(name,age);
  41. console.log(u,a,sex);
  42. // 2.数组结构
  43. let arr1=[10,20];
  44. let [ab,bc,x=1]=arr1;
  45. console.log(ab,bc,x);
  46. const colors = ['red', 'green', 'blue'];
  47. // 将左边看成模板
  48. let [color1, color2, color3] = colors;
  49. console.log(color1, color2, color3);
  50. </script>
  51. </html>

2、演示结果:

流程控制语句

分支判断语句

1、单分支:if(判断条件){……}简化:(如果循环体只有一个语句式可以省略大括号) if() ……
2、双分支:if(判断条件){……}else{……}
3、多分分:if(判断语句){}else if(判断条件){……}……else{……}
4、switch(表达式) { case n: 代码块 break; case n: 代码块 break; default: 默认代码块 }

  • 计算一次 switch 表达式
  • 把表达式的值与每个 case 的值进行对比
  • 如果存在匹配,则执行关联代码

循环语句

1、while(表达式){……}和do{……}while(表达式);
2、for(初始化;判断条件;循环语句){……};
3、for……in 和for……of语句;

流程控制语句中常见的关键字

1、break:结束当前循环
2、continue:跳过当前循环的进入下一次循环

Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post