search

博客列表 >0401作业

0401作业

　
　原创
2021年04月05日 17:46:52585浏览

模板面量

  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>Document</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       //1.模板字面量>表达式潜入字符串  使用反引号声明字符串内容即可
  12.       //   let name = "朱老师";
  13.       //   let str = "hello" + name;
  14.       //   console.log(str);
  15.       //   let mk = `Hello${name}`;
  16.       //   console.log(mk);
  17.       //模板字面量>表达式潜入字符串  使用反引号声明字符串内容即可
  19.       //**案例  通过数组控制html输出且写入dom
  20.       //   let menus = ["首页", "Video", "Article"];声明数组
  21.       //   let htmStr = `   使用模板字面量声明代码并用数组替换加载内容
  22.       //      <nav>
  23.       //   <a href="">${menus[0]}</a>
  24.       //   <a href="">${menus[1]}</a>
  25.       //   <a href="">${menus[2]}</a>
  26.       //       </nav>
  27.       //   `;
  28.       //   console.log(htmStr);输出html代码
  29.       //   document.body.insertAdjacentElement("beforEnd", htmStr);把html代码写入body页面
  30.       //**案例  通过数组控制html输出且写入dom
  32.       //2.标签函数,自定义模板字面量的一些行为
  33.       let hello = function (x) {
  34.         alert(x);
  35.       };
  36.       hello("牛逼666");
  37.       hello`wwww`;
  38.     </script>
  39.   </body>
  40. </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>Document</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       // 1:赋值
  12.       let a = 1;
  13.       let b = a;
  14.       console.log("a = %d , b = %d", a, b);
  15.       //   占位符格式化输出：%s字符串  %d十进制  %o八进制  %x十六进制 %f浮点数  %e/E科学记数法  %转义字符
  16.       //   在字符串中使用上述占位符进行书写，在输出最后用逗号分隔填充变量，最终控制台输出时为变量
  17.       //   a = %d  b = %d ,a,b 演示
  19.       // 2:值传递
  20.       a = 2;
  21.       //a=2只是a等于2，b已经在第13行赋值了，20行并未刷新d
  22.       console.log("a = %d , b = %d", a, b);
  24.       //   3.引用传递，适用于引用类型，对象，数组
  25.       let obj = {
  26.         ID: "kowal",
  27.         Name: "tyler",
  28.       };
  29.       console.log("obj1=%o", obj);
  30.       let obj2 = obj;
  31.       console.log(obj2);
  32.       //   console.log(obj2 === obj);
  33.       // 更新obj成员
  34.       obj.ID = 10;
  35.       console.log(obj2);
  36.       //   4.传参  始终是值传递
  37.       //   const F1 = (x) => (x = 10);
  38.       //   const F1 = function (z) {
  39.       //     x = z;
  40.       //   };
  41.       //   F1("asdasdd");
  42.       //   alert(x);
  43.       const F1 = (x) => ((c = x), (bn = 6));
  44.       F1(10);
  45.       console.log(c, bn);
  46.     </script>
  47.   </body>
  48. </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>Document</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       // 数组的声明与对应变量赋值
  12.       //   let shuzu = [1, 2, 3, "撒大苏打撒旦"];
  13.       //   console.log(shuzu);
  14.       //   let a = shuzu[0];
  15.       //   let b = shuzu[1];
  16.       //   let c = shuzu[2];
  17.       //   console.log(a, b, c);
  19.       //   解构写法
  20.       //   let [a, b] = [1, 2, 3];
  21.       //   console.log(a, b);
  23.       //   全部拿到
  24.       //   [a, b, c, ...d] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
  25.       //   console.log(typeof d);
  26.       //   console.log(typeof c);
  28.       //只拿第7个值
  29.       //   [, , , , , , , , , , v] = [10, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
  30.       //   console.log(v);
  32.       let a = 1,
  33.         b = 2;
  34.       [b, aa] = [a, b];
  35.       console.log(aa, b);
  36.     </script>
  37.   </body>
  38. </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>Document</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       //常规对象定义
  12.       let Object_First_One = {
  13.         a: 1,
  14.         b: 2,
  15.         c: 3,
  16.       };
  17.       a = Object_First_One.a;
  18.       b = Object_First_One.b;
  19.       c = Object_First_One.c;
  20.       console.log(a, b, c);
  22.       //   对象解构
  23.       ({ id, name } = { id: 40541, name: "电脑" });
  24.       console.log(id, name);
  26.       //数组传参
  27.       //   let Sum = function ([a, b]) {
  28.       //     return a + b;
  29.       //   };
  30.       //   console.log(Sum([10, 80]));
  32.       //   箭头函数+数组传参
  33.       //   let Sum = ([a, b]) => a + b;
  34.     </script>
  35.   </body>
  36. </html>

if else

  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>Document</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       let score = 64;
  12.       if (score >= 60) {
  13.         console.log("及格");
  14.       }
  15.       if (score >= 0 && score <= 68) {
  16.         console.log("不及格");
  17.       } else {
  18.         ("优秀");
  19.       }
  20.     </script>
  21.   </body>
  22. </html>

switch

  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>Document</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       let score = 64;
  12.       if (score >= 60) {
  13.         console.log("及格");
  14.       }
  15.       if (score >= 0 && score <= 68) {
  16.         console.log("不及格");
  17.       } else {
  18.         ("优秀");
  19.       }
  20.     </script>
  21.   </body>
  22. </html>

switch-字符匹配

  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>Document</title>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       let count = 60;
  12.       switch (true) {
  13.         case count >= 60 && count <= 75:
  14.           console.log("合格");
  15.           breake;
  16.         case count >= 60 && count <= 75:
  17.           console.log("合格");
  18.           breake;
  19.         case count >= 60 && count <= 75:
  20.           console.log("合格");
  21.           breake;
  22.         case count >= 60 && count <= 75:
  23.           console.log("合格");
  24.           breake;
  25.         case count >= 60 && count <= 75:
  26.           console.log("合格");
  27.           breake;
  28.         case count >= 60 && count <= 75:
  29.           console.log("合格");
  30.           breake;
  31.         case count >= 60 && count <= 75:
  32.           console.log("合格");
  33.           breake;
  34.       }
  35.     </script>
  36.   </body>
  37. </html>
  38. <!DOCTYPE html>
  39. <html lang="en">
  40.   <head>
  41.     <meta charset="UTF-8" />
  42.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  43.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  44.     <title>Document</title>
  45.   </head>
  46.   <body>
  47.     <script>
  48.       let status = "super";
  49.       switch (status) {
  50.         case "super":
  51.           console.log("成功");
  52.           break;
  53.         case "error":
  54.           console.log("失败");
  55.           break;
  56.       }
  57.     </script>
  58.   </body>
  59. </html>
上一条：数组函数的练习下一条：js 引入方式，常量，变量，函数的声明和使用----0331
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议