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

作业标题: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>

更多相关文章

  1. 模板字面量与标签函数
  2. 值与引用传递,模板字面量与标签函数,解构赋值,对象字面量的简化,bind
  3. 【第798期】你不懂JS:ES6与未来 语法(上)
  4. 4.01模板字面量和标签函数
  5. 变量系列教材 (三)- 什么是Java的字面值
  6. 数组,对象,传参解构; 访问器属性的get,set
  7. js2 解构,访问器属性
  8. JS中的值传递,模板字面量,数组、对象、传参解构,访问器属性
  9. 210401 JavaScript 值传递与引用传递, 模板字面量, 标签函数, 解

随机推荐

  1. 如何在v模型更改时触发事件? (vue js)
  2. Python 内置函数及excel操作
  3. 将所有域添加到CORS的安全隐患(Access-Con
  4. python正则表达式
  5. 某老师给我的javascript学习建议
  6. AngularJS:TypeError:无法读取未定义的属性
  7. 前端开发命名规范(html+css+js)
  8. Javascript / Jquery中的简单碰撞检测?
  9. 在contenteditable中的占位符—焦点事件
  10. CasperJs和Jquery用链式选择