值与引用传递,模板字面量与标签函数,解构赋值,对象字面量的简化,bind,call,apply,访问器

值传递与引用传递 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>值传递与引用传递</title>
  7. </head>
  8. <body>
  9. <script>
  10. // 1 赋值
  11. // 1.1 值传递:原始类型,string,number,bool
  12. let a = 1;
  13. let b = a;
  14. console.log("a = %d, b = %d", a, b);
  15. a = 2;
  16. //更新a, 不影响b
  17. console.log("a = %d, b = %d", a, b);
  18. //1.2 引用传递:引用类型,object,array
  19. let obj1 = {a:1, b:2};
  20. console.log(obj1);
  21. let obj2 = obj1;
  22. console.log(obj2);
  23. //更新obj1
  24. obj1.a = 10;
  25. console.log(obj1);
  26. //obj2同步更新
  27. console.log(obj2);
  28. // 2.传参
  29. const f1 = x => (x = 10);
  30. let m = 5;
  31. console.log("m = %d", m);
  32. f1(m);
  33. // 入参:调用函数是传入的参数,简称:“入参”
  34. // 函数中对参数的更新,并不会影响到入参
  35. console.log("m = %d", m);
  36. const f2 = x => (x.a = 10);
  37. let o = {a: 1, b: 2};
  38. console.log(o);
  39. f2(o);
  40. //看上去函数对于o.a的更新生效,实际上仍是值传递
  41. console.log(o);
  42. // 对与引用类型,只有全新赋值才算是更新,修改属性不算的
  43. const obj = {x: 1, y: 2};
  44. obj.x = 20;
  45. // 赋值一个全新对像,才是更新
  46. // obj = {}
  47. const f3 = x => ( x = {} );
  48. f3(o);
  49. console.log(o);
  50. // 深拷贝:值传递
  51. // 浅拷贝:引用传递
  52. </script>
  53. </body>
  54. </html>

模板字面量与标签函数 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>模板字面量与标签函数</title>
  7. </head>
  8. <body>
  9. <script>
  10. // 1. 模板字面量:将表达式嵌入到字符串
  11. let a = 1, b = 2;
  12. let res = a + " + " + b + " = " + (a + b);
  13. console.log(res);
  14. // 模板字面量使用反引号:“`”
  15. res = `${a} + ${b} = ${a + b}`;
  16. console.log(res);
  17. // 模板字面量的组成:
  18. // 1. 字符串字面量: "+, ="
  19. // 2. 变量或表达式:a, b, (a+b)
  20. // 模板字面量创建多行字符串可以保留格式
  21. let menu = ['首页', '视频', '文章'];
  22. let htmlStr = `<ul>
  23. <li><a href="">${menu[0]}</a></li>
  24. <li><a href="">${menu[1]}</a></li>
  25. <li><a href="">${menu[2]}</a></li>
  26. </ul>`;
  27. console.log(htmlStr);
  28. document.body.insertAdjacentHTML("beforeEnd",htmlStr);
  29. // 2.标签函数: 自定义模板字面量的行为
  30. let hello = name => alert(name);
  31. // hello("天蓬老师");
  32. // hello `天蓬老师`;
  33. // 使用自定义函数来处理模板字面量,它的参数约定
  34. // 1. 第一个参数:模板字面量中的字符串字面量组成的数组
  35. // 2. 从第二个参数开始,将模板字面量中的变量依次传入
  36. let sum = (strs, a, b) => {
  37. console.log(strs);
  38. console.log(a,b);
  39. }
  40. sum([' + ', ' = ',''], a, b);
  41. sum `${a} + ${b} = `;
  42. //rest
  43. sum = (strs, ...args) => {
  44. console.log(strs);
  45. console.log(args);
  46. }
  47. sum `${a} + ${b} = `;
  48. </script>
  49. </body>
  50. </html>

解构赋值 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>解构赋值</title>
  7. </head>
  8. <body>
  9. <script>
  10. //解构赋值: 快速从集合数据(数组/对象)解构出独立变量
  11. //1.数组
  12. let [a,b,c] = [1,2,3];
  13. console.log(a,b,c);
  14. [a,b] = [1,2,3];
  15. console.log(a,b);
  16. [a,b,c,d = "xxxx"] = [1,2,3];
  17. console.log(a,b,c,d);
  18. [a,b,...c] = [1,2,3,4,5];
  19. console.log(a,b,c);
  20. [,,a,,] = [1,2,3,4,5];
  21. console.log(a);
  22. let x = 1,
  23. y = 2,
  24. t;
  25. console.log("x = %d, y = %d", x, y);
  26. // t = x;
  27. // x = y;
  28. // y = t;
  29. [y,x] = [x,y];
  30. console.log("x = %d, y = %d", x, y);
  31. // 2.对象解构
  32. let {id, name} = {id: 10, name: "手机"}
  33. console.log(id, name);
  34. //属性名与变量名必须一一对应,顺序无所谓
  35. ({name, id} = { id: 10, name: "手机"});
  36. console.log(id, name);
  37. let email = "admin@php.cn";
  38. let { role, email: userEmail } = {role: "user", email: "user@php.cn"};
  39. console.log(userEmail);
  40. console.log(email);
  41. //3. 参数解构
  42. // 数组传参
  43. let sum = ([a,b]) => a + b;
  44. console.log(sum([10, 20]));
  45. // 对象传参
  46. let getUser = ({name,email}) => [name,email];
  47. console.log(getUser({email:"tp@php.cn", name: "天蓬老师"}));
  48. </script>
  49. </body>
  50. </html>

对象字面量的简化 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>对象字面量的简化</title>
  7. </head>
  8. <body>
  9. <script>
  10. let user = {
  11. userName: "天蓬老师",
  12. userEmail: "tp@php.cn",
  13. getInfo: function (){
  14. return `${this.userName} (${this.userEmail})`;
  15. }
  16. };
  17. console.log(user.getInfo());
  18. let {userName, userEmail} = user;
  19. console.log(userName, userEmail);
  20. user = {
  21. // userName: userName,
  22. userName,
  23. // userEmail: userEmail,
  24. // 当属性与同一作用域中的变量同名时,可以直接使用属性来引用变量值
  25. userEmail,
  26. // 方法也能简化:删除冒号和 function 关健字
  27. getInfo(){
  28. return `${this.userName} (${this.userEmail})`;
  29. },
  30. // 当前箭头函数中的this指向了全局window
  31. test: ()=> console.log(this),
  32. }
  33. console.log("简化后: ", user.getInfo());
  34. console.log(user.test());
  35. // 箭头函数中的this总是指向定义它时的作用域(静态作用域/词法作用域),而并非调用时的作用域
  36. // user对象不能创建作用域,this 指向了user的作用域/作用域链: window
  37. // 全局没有userName, userEmail,所以输出 undefined
  38. </script>
  39. </body>
  40. </html>

bind,call,apply 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>bind,call,apply</title>
  7. </head>
  8. <body>
  9. <button>Click</button>
  10. <script>
  11. function hello(name) {
  12. this.name = name;
  13. console.log(this.name);
  14. }
  15. const obj = { name: "admin" };
  16. //经典调用
  17. console.log(hello("朱老师"));
  18. //bind()不会立即执行, 只返回一个函数声明
  19. let f = hello.bind(obj,"天蓬老师");
  20. console.log(f());
  21. // call/apply 立即执行
  22. f = hello.call(obj, "灭绝老师");
  23. console.log(f);
  24. f = hello.apply(obj, ["西门老师"]);
  25. console.log(f);
  26. // bind()应用案例:动态改变this
  27. document.querySelector("button").addEventListener(
  28. "click",
  29. function(){
  30. console.log(this.name);
  31. console.log(this);
  32. document.body.appendChild(document.createElement("p")).innerHTML = "欢迎:" + this.name;
  33. }.bind({name:"猫科动物"})
  34. );
  35. </script>
  36. </body>
  37. </html>

访问器属性 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>访问器属性</title>
  7. </head>
  8. <body>
  9. <script>
  10. const product = {
  11. data: [
  12. { name: "电脑", price: 5000, num: 5 },
  13. { name: "手机", price: 4000, num: 10 },
  14. { name: "相机", price: 8000, num: 3 },
  15. ],
  16. getAmounts() {
  17. return this.data.reduce( (t, c) => ( t += c.price * c.num), 0 );
  18. },
  19. // 访问器属性
  20. // 将方法伪造成一个属性
  21. get total() {
  22. return this.data.reduce( (t, c) => ( t += c.price * c.num), 0 );
  23. },
  24. set setPrice(price) {
  25. this.data[1].price = price;
  26. },
  27. }
  28. console.log("总金额 :", product.getAmounts());
  29. console.log("总金额 :", product.total);
  30. product.setPrice = 9988;
  31. console.log(product.data[1].price);
  32. </script>
  33. </body>
  34. </html>

访问器属性的优先级 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>访问器属性的优先级</title>
  7. </head>
  8. <body>
  9. <script>
  10. let user = {
  11. // name: "朱老师",
  12. data: { name: "朱老师"},
  13. get name() {
  14. // return "灭绝小师妹";
  15. return this.data.name;
  16. },
  17. set name(value){
  18. // this.name = value;
  19. this.data.name = value;
  20. }
  21. }
  22. // 访问器属性优级高于同名的普通属性
  23. user.name = "天蓬老师";
  24. console.log(user.name);
  25. </script>
  26. </body>
  27. </html>

流程控制-分支 代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>流程控制-分支</title>
  7. </head>
  8. <body>
  9. <script>
  10. let score = 64;
  11. // // 单分支
  12. // if (score >= 60) {
  13. // console.log('及格');
  14. // }
  15. //双分支
  16. if (score >= 60) {
  17. console.log('及格');
  18. //默认分支
  19. } else {
  20. console.log('补考');
  21. }
  22. //多分支
  23. score = -1;
  24. if (score >= 60 && score < 80) {
  25. console.log('合格');
  26. } else if (score >= 80 && score <= 100) {
  27. console.log('学霸');
  28. }else if(score > 100 || score < 0){
  29. console.log("非法数据");
  30. } else {
  31. console.log('补考');
  32. }
  33. //
  34. switch( true ) {
  35. case score >= 60 && score < 80 :
  36. console.log('合格');
  37. break;
  38. case score >= 80 && score <= 100 :
  39. console.log('学霸');
  40. break;
  41. case score > 100 || score < 0 :
  42. console.log("非法数据");
  43. break;
  44. default:
  45. console.log('补考');
  46. }
  47. // switch 用在单值判断
  48. let response = "Success";
  49. switch(response.toLowerCase()) {
  50. case 'fail':
  51. console.log("请求失败");
  52. break;
  53. case 'success':
  54. console.log("请求成功");
  55. break;
  56. default:
  57. console.log("未知错误");
  58. }
  59. //三元运算符
  60. // 条件? true : false
  61. // //双分支
  62. // if (score >= 60) {
  63. // console.log('及格');
  64. // //默认分支
  65. // } else {
  66. // console.log('补考');
  67. // }
  68. score = 80;
  69. console.log( score >= 60 ? "及格" : "补考");
  70. </script>
  71. </body>
  72. </html>

总结:

值传递与引用传递:

  • 值传递(原始类型)如:深拷贝
  • 引用传递(object,array)如:浅拷贝

模板字面量:

  • 将表达式嵌入到字符串
  • 模板字面量使用反引号:“`”
  • 格式${a} 其中a为变量
  • 使用自定义函数来处理模板字面量,它的参数约定
    1. 第一个参数:模板字面量中的字符串字面量组成的数组
    1. 从第二个参数开始,将模板字面量中的变量依次传入

解构赋值:

  • 快速从集合数据(数组/对象)解构出独立变量
  • 对象解构中:属性名与变量名必须一一对应,顺序无所谓

参数解构:

  • 数组传参 和 对象传参

对象字面量的简化:

  • 当属性与同一作用域中的变量同名时,可以直接使用属性来引用变量值
  • 方法也能简化:删除冒号和 function 关健字
  • 箭头函数中的this总是指向定义它时的作用域(静态作用域/词法作用域),而并非调用时的作用域
  • user对象不能创建作用域,this 指向了user的作用域/作用域链: window
  • 全局没有userName, userEmail,所以输出 undefined

bind,call,apply:

  • bind()不会立即执行, 只返回一个函数声明
  • call/apply 立即执行

访问器属性:

  • get set
  • 访问器属性优级高于同名的普通属性

流程控制-分支

  • 单分支
  • 双分支
  • 多分支
  • switch 用在单值判断
  • 三元运算符 条件? true : false