JAVASCRIPT学习_0708作业

作业内容:1. 实例演示模板字面量与标签函数;

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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 username = "admin";
  12. // 模板字面量,es6中引入的
  13. let str = `Hello
  14. ${username}`;
  15. // console.log(str);
  16. // 1. 模板字面量: 支持"插值"的字符串
  17. let nav = ["首页", "教学视频", "文章"];
  18. let html = `
  19. <nav>
  20. <a href="">${nav[0]}</a>
  21. <a href="">${nav[1]}</a>
  22. <a href="">${nav[2]}</a>
  23. </nav>
  24. `;
  25. // console.log(html);
  26. // document.body.insertAdjacentHTML("beforeend", html);
  27. // 2. 标签函数: 自定义模板字面量的行为
  28. let hello = name => alert("Hello " + name);
  29. // hello("朱老师");
  30. // 换一种方式来调用
  31. // hello(`朱老师`);
  32. // hello`朱老师`;
  33. // 其实这就是"标签函数"
  34. // show: 将三个参数打印出来看一眼
  35. let show = (strs, a, b) => {
  36. console.log(strs);
  37. console.log(a);
  38. console.log(b);
  39. console.log(a + b + c);
  40. };
  41. show = (strs, ...args) => {
  42. console.log(strs);
  43. console.log(args);
  44. console.log(args[0] + args[1] + args[2]);
  45. };
  46. // show("10+80", 10, 80);
  47. // 计算10+80=?
  48. let a = 10;
  49. let b = 80;
  50. let c = 20;
  51. show`${a} + ${b} + ${c}=`;
  52. </script>
  53. </body>
  54. </html>

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

  1. // 将一个数组中每个元素,分别创建一个变量来存储它
  2. // let arr = [10, 20, 30];
  3. // let a = arr[0];
  4. // let b = arr[1];
  5. // let c = arr[2];
  6. // console.log(a, b, c);
  7. // 用解构进行简化
  8. // 等号左边是右边的模板,必须一模一样
  9. // let [a, b, c] = [10, 20, 30];
  10. // console.log(a, b, c);
  11. <!DOCTYPE html>
  12. <html lang="zh-CN">
  13. <head>
  14. <meta charset="UTF-8" />
  15. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  16. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  17. <title>对象字面量的简化</title>
  18. </head>
  19. <body>
  20. <script>
  21. let person = {
  22. name: "朱老师",
  23. email: "498668472@qq.com",
  24. getInfo: function () {
  25. // 在对象中使用 this 来访问自边的成员
  26. return `${this.name} : ( ${this.email} )`;
  27. },
  28. };
  29. console.table(person.getInfo());
  30. // 对象解构
  31. let { name, email } = person;
  32. console.log(name, email);
  33. // name = '朱老师';
  34. // email = '498668472@qq.com'
  35. let user = {
  36. name: name,
  37. email: email,
  38. getInfo: function () {
  39. // 在对象中使用 this 来访问自边的成员
  40. return `${this.name} : ( ${this.email} )`;
  41. },
  42. };
  43. console.log(user);
  44. // 对象字面量中的属性值,如果引用了相同作用域中的"同名变量",则可以省去不写
  45. user = {
  46. // 当属性名与变量同名时,只写一个就可以了
  47. name,
  48. email,
  49. getInfo: function () {
  50. // 在对象中使用 this 来访问自边的成员
  51. return `${this.name} : ( ${this.email} )`;
  52. },
  53. };
  54. console.log(user);
  55. user = {
  56. name,
  57. email,
  58. // 将方法后面的冒号和'function'删除
  59. getInfo() {
  60. return `${this.name} : ( ${this.email} )`;
  61. },
  62. };
  63. user = {
  64. name,
  65. email,
  66. // 将方法后面的冒号和'function'删除
  67. getInfo: () => `${this.name} : ( ${this.email} )`,
  68. };
  69. console.log(user);
  70. </script>
  71. </body>
  72. </html>