Blogger Information
Blog 43
fans 0
comment 0
visits 30721
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
模板字面量与标签函数,解构赋值
橙絮圆
Original
471 people have browsed it

模板字面量与标签函数,解构赋值

作业标题:0708作业
作业内容:

  1. 实例演示模板字面量与标签函数。
  2. 实例演示解构赋值与对象字面量的简化方式。

  • 实例演示模板字面量与标签函数
    • 代码
      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4. <meta charset="UTF-8" />
      5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      7. <title>模板字面量/标签函数</title>
      8. </head>
      9. <body>
      10. <script> show = (strs, ...args) => {
      11. //console.log(strs);
      12. console.log(strs);
      13. console.log(args);
      14. console.log(args[0] + args[1], +args[2]);
      15. };
      16. // show("10+80", 10, 80);
      17. //计算10+80=?
      18. let a = 10;
      19. let b = 80;
      20. let c = 20;
      21. show`${a}+${b}+${c}=`;
      22. </script>
      23. </body>
      24. </html>

  • 实例演示解构赋值与对象字面量的简化方式

    • 实例演示解构赋值
      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4. <meta charset="UTF-8" />
      5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      7. <title>解构赋值</title>
      8. </head>
      9. <body>
      10. <script>
      11. //(10,20)=>(20,10)对于二数交换操作
      12. let a = 10;
      13. b = 20;
      14. console.log("a=%d, b=%d", a, b);
      15. [b, a] = [a, b];
      16. console.log("a=%d,b=%d", a, b);
      17. </script>
      18. </body>
      19. </html>
    • 对象字面量的简化方式

      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4. <meta charset="UTF-8" />
      5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      7. <title>对象自面量的简化</title>
      8. </head>
      9. <body>
      10. <script>
      11. let person = {
      12. name: "朱老师",
      13. email: "498668472@qq.com",
      14. getInfo: function () {
      15. //在对象中使用this来访问对象的成员
      16. return `${this.name}:(${this.email})`;
      17. },
      18. };
      19. console.log(person.getInfo());
      20. // 对象解构;
      21. let { name, email } = person;
      22. console.log(name, email);
      23. user = {
      24. name,
      25. email,
      26. //将方法后面的冒号和'function'删除
      27. getInfo() {
      28. //在对象中使用this来访问对象的成员
      29. return `${this.name}:(${this.email})`;
      30. },
      31. };
      32. console.log(user);
      33. </script>
      34. </body>
      35. </html>
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