Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JAVASCRIPT学习_0708作业
Blogger Information
Blog 19
fans 0
comment 0
visits 10106
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JAVASCRIPT学习_0708作业
bloght5386
Original
496 people have browsed it

作业内容：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);
  28.       // 2. 标签函数: 自定义模板字面量的行为
  29.       let hello = name => alert("Hello " + name);
  30.       //   hello("朱老师");
  31.       //   换一种方式来调用
  32.       //   hello(`朱老师`);
  33.       //   hello`朱老师`;
  34.       //   其实这就是"标签函数"
  36.       //   show: 将三个参数打印出来看一眼
  37.       let show = (strs, a, b) => {
  38.         console.log(strs);
  39.         console.log(a);
  40.         console.log(b);
  41.         console.log(a + b + c);
  42.       };
  44.       show = (strs, ...args) => {
  45.         console.log(strs);
  46.         console.log(args);
  47.         console.log(args[0] + args[1] + args[2]);
  48.       };
  50.       //   show("10+80", 10, 80);
  51.       //   计算10+80=?
  53.       let a = 10;
  54.       let b = 80;
  55.       let c = 20;
  56.       show`${a} + ${b} + ${c}=`;
  57.     </script>
  58.   </body>
  59. </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);
  8.       //   用解构进行简化
  9.       //   等号左边是右边的模板,必须一模一样
  10.       //   let [a, b, c] = [10, 20, 30];
  11.       //   console.log(a, b, c);
  12. <!DOCTYPE html>
  13. <html lang="zh-CN">
  14.   <head>
  15.     <meta charset="UTF-8" />
  16.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  17.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  18.     <title>对象字面量的简化</title>
  19.   </head>
  20.   <body>
  21.     <script>
  22.       let person = {
  23.         name: "朱老师",
  24.         email: "498668472@qq.com",
  25.         getInfo: function () {
  26.           // 在对象中使用 this 来访问自边的成员
  27.           return `${this.name} : ( ${this.email} )`;
  28.         },
  29.       };
  30.       console.table(person.getInfo());
  32.       // 对象解构
  33.       let { name, email } = person;
  34.       console.log(name, email);
  35.       //   name = '朱老师';
  36.       //   email = '498668472@qq.com'
  38.       let user = {
  39.         name: name,
  40.         email: email,
  41.         getInfo: function () {
  42.           // 在对象中使用 this 来访问自边的成员
  43.           return `${this.name} : ( ${this.email} )`;
  44.         },
  45.       };
  47.       console.log(user);
  49.       //   对象字面量中的属性值,如果引用了相同作用域中的"同名变量",则可以省去不写
  50.       user = {
  51.         //   当属性名与变量同名时,只写一个就可以了
  52.         name,
  53.         email,
  54.         getInfo: function () {
  55.           // 在对象中使用 this 来访问自边的成员
  56.           return `${this.name} : ( ${this.email} )`;
  57.         },
  58.       };
  60.       console.log(user);
  62.       user = {
  63.         name,
  64.         email,
  65.         // 将方法后面的冒号和'function'删除
  66.         getInfo() {
  67.           return `${this.name} : ( ${this.email} )`;
  68.         },
  69.       };
  71.       user = {
  72.         name,
  73.         email,
  74.         // 将方法后面的冒号和'function'删除
  75.         getInfo: () => `${this.name} : ( ${this.email} )`,
  76.       };
  78.       console.log(user);
  79.     </script>
  80.   </body>
  81. </html>
Correcting teacher：PHPzPHPz

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