0401作业

模板面量

  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. //模板字面量>表达式潜入字符串 使用反引号声明字符串内容即可
  18. //**案例 通过数组控制html输出且写入dom
  19. // let menus = ["首页", "Video", "Article"];声明数组
  20. // let htmStr = ` 使用模板字面量声明代码并用数组替换加载内容
  21. // <nav>
  22. // <a href="">${menus[0]}</a>
  23. // <a href="">${menus[1]}</a>
  24. // <a href="">${menus[2]}</a>
  25. // </nav>
  26. // `;
  27. // console.log(htmStr);输出html代码
  28. // document.body.insertAdjacentElement("beforEnd", htmStr);把html代码写入body页面
  29. //**案例 通过数组控制html输出且写入dom
  30. //2.标签函数,自定义模板字面量的一些行为
  31. let hello = function (x) {
  32. alert(x);
  33. };
  34. hello("牛逼666");
  35. hello`wwww`;
  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. // 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 演示
  18. // 2:值传递
  19. a = 2;
  20. //a=2只是a等于2,b已经在第13行赋值了,20行并未刷新d
  21. console.log("a = %d , b = %d", a, b);
  22. // 3.引用传递,适用于引用类型,对象,数组
  23. let obj = {
  24. ID: "kowal",
  25. Name: "tyler",
  26. };
  27. console.log("obj1=%o", obj);
  28. let obj2 = obj;
  29. console.log(obj2);
  30. // console.log(obj2 === obj);
  31. // 更新obj成员
  32. obj.ID = 10;
  33. console.log(obj2);
  34. // 4.传参 始终是值传递
  35. // const F1 = (x) => (x = 10);
  36. // const F1 = function (z) {
  37. // x = z;
  38. // };
  39. // F1("asdasdd");
  40. // alert(x);
  41. const F1 = (x) => ((c = x), (bn = 6));
  42. F1(10);
  43. console.log(c, bn);
  44. </script>
  45. </body>
  46. </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);
  18. // 解构写法
  19. // let [a, b] = [1, 2, 3];
  20. // console.log(a, b);
  21. // 全部拿到
  22. // [a, b, c, ...d] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
  23. // console.log(typeof d);
  24. // console.log(typeof c);
  25. //只拿第7个值
  26. // [, , , , , , , , , , v] = [10, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
  27. // console.log(v);
  28. let a = 1,
  29. b = 2;
  30. [b, aa] = [a, b];
  31. console.log(aa, b);
  32. </script>
  33. </body>
  34. </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);
  21. // 对象解构
  22. ({ id, name } = { id: 40541, name: "电脑" });
  23. console.log(id, name);
  24. //数组传参
  25. // let Sum = function ([a, b]) {
  26. // return a + b;
  27. // };
  28. // console.log(Sum([10, 80]));
  29. // 箭头函数+数组传参
  30. // let Sum = ([a, b]) => a + b;
  31. </script>
  32. </body>
  33. </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>