search

博客列表 >js 急速入门之二

js 急速入门之二

培(信仰)
培(信仰)原创
2021年01月11日 23:38:32533浏览

js 急速入门之二

值传递与引用传递

  1. // 1. 赋值
  2. //   1.1 值传递：原始类型(string,number,bool)
  3. let a = 1;
  4. let b = a;
  5. console.log("a=%d,b=%d", a, b);
  6. a = 2;
  7. console.log("a=%d,b=%d", a, b);
  8. //   1.2 引用传递：引用类型(object,array)
  9. let obj1 = { a: 1, b: 2 };
  10. console.log(obj1);
  11. let obj2 = obj1;
  12. obj1.a = 2;
  13. console.log(obj2);
  14. //   引用类型指向的是相同内存地址
  15. //   2. 传参
  16. // 传参时，不论什么类型，都是“值传递”
  17. const f1 = (x) => (x = 10);
  18. let m = 5;
  19. f1(m);
  20. //   入参：调用函数时传入的参数，简称：入参
  21. // 函数中对参数的更新，并不会影响到入参
  22. console.log("m = %d", m);
  24. const f2 = (x) => (x.a = 10);
  26. let o = { a: 1, b: 2 };
  28. f2(o);
  29. console.log(o);
  30. //   看上去函数中对于o.a的更新生效，实际上只是值传递
  31. // 对于引用类型，只有全新赋值才算是更新，修改属性不算。
  32. const obj = { x: 1, y: 2 };
  33. obj.x = 20;
  35. // 函数中对于对象参数/引用参数的更新并没有影响
  37. // 深拷贝：值传递
  38. // 浅拷贝：引用传递

模板字面量与标签函数

  1. // 1. 模板字面量：将表达式嵌入字符串中
  2. let a = 1,
  3.   b = 2;
  4. let res = a + " + " + b + " = " + (a + b);
  5. console.log(res);
  6. // 模板字面量使用反应“`”
  7. res = `${a} + ${b} = ${a + b}`;
  8. console.log(res);
  9. // 模板字面量的组成：
  10. // 1. 字符串字面量：“+，=”
  11. // 2. 变量或表达式：a，b,(a + b)
  12. let menu = ["首页", "视频", "文章"];
  13. let htmlStr = `<ul>
  14.             <li><a href="">${menu[0]}</a></li>
  15.             <li><a href="">${menu[1]}</a></li>
  16.             <li><a href="">${menu[2]}</a></li>
  17.             </ul>`;
  18. console.log(htmlStr);
  19. document.body.insertAdjacentHTML("beforeend", htmlStr);
  20. // document.body.insertAdjacentHTML("beforebegin",htmlStr);
  22. // 2. 标签函数：自定义模板字面量的行为
  23. // 遍历，加样式，动态渲染，放到迭代器中循环
  24. // let hello = name => alert(name);
  25. // hello("朋友");
  26. // hello`朋友`;
  27. // 模板字面量可以当参数使用，函数调用的小括号都可以不写
  28. // 使用自定义函数处理模板字面量，他的参数约定
  29. // 1. 第一个参数：模板字面量中的字符串字面量组成的数组
  30. // 2. 从第二个参数开始，将模板字面量中的变量依次传入
  31. let sum = (strs, a, b) => {
  32.   console.log(strs);
  33.   console.log(a, b);
  34. };
  36. sum(["+", "=", ""], a, b);
  37. sum`${a} + ${b} =`;
  39. sum = (strs, ...args) => {
  40.   console.log(strs);
  41.   console.log(args);
  42. };
  44. sum`${a}+${b} = `;

解构赋值

  1. //解构赋值：快速从集合中（数组/对象）解构出独立变量
  2. //1. 数组
  3. let [a, b, c] = [1, 2, 3];
  4. console.log(a, b, c);
  6. [a, b] = [1, 2, 3];
  7. console.log(a, b);
  9. [a, b, c, d] = [1, 2, 3];
  10. console.log(a, b, c, d);
  11. // 还可以使用默认值
  12. [a, b, c, d = "xxx"] = [1, 2, 3];
  13. console.log(a, b, c, d);
  14. // 取部分值，其他值通过rest语法压入数组
  15. [a, b, ...c] = [1, 2, 3, 4, 5];
  16. console.log(a, b, c);
  17. // 想拿到固定位置的值
  18. [, , a, ,] = [1, 2, 3, 4, 5];
  19. console.log(a);
  21. // 两个值交换
  22. let x = 1,
  23.   y = 2;
  24. //   let t
  25. //   t = x;
  26. //   x = y;
  27. //   y = t;
  28. //   console.log(x,y);
  30. [y, x] = [x, y];
  31. console.log(x, y);
  33. //   2. 对象解构
  34. let { id, name } = { id: 10, name: "phone" };
  35. console.log(id, name);
  36. // 属性名与变量名必须对应，顺序无所谓
  38. //当变量名冲突时，可以使用别名
  39. let email = "admin@php.cn";
  40. let { role, email: userEmail } = { role: "user", email: "user@php.cn" };
  42. console.log(userEmail);
  43. console.log(email);
  45. // 3. 参数解构
  46. // 数组传参
  47. let sum = ([a, b]) => a + b;
  48. console.log(sum([10, 20]));
  50. //对象传参
  51. let getUser = ({ name, email }) => [name, email];
  52. console.log(getUser({ email: "tp@php.cn", name: "TP" }));

总结：太好用了。
注意：结构数量不完全匹配的时候，如何接解构的值

  1.  [, , a, ,] = [1, 2, 3, 4, 5];

对象字面量的简化

  1.        let user = {
  2.             userName: 'tp',
  3.             userEmail: 'tp@php.cn',
  4.             getInfo:function() {
  5.                 return `${this.userName} ( ${this.userEmail} )`;
  6.             }
  7.         }
  9.         console.log(user.getInfo());
  11.         let {userName,userEmail}=user;
  12.         console.log(userName,userEmail);
  14.         user = {
  15.             // 当属性名与同一个作用域中的变量名向同时
  16.             // 可以直接使用属性名来引用该变量的值
  17.             // userName:userName,
  18.             // userEmail:userEmail,
  19.             userName,
  20.             userEmail,
  21.             // getInfo:function() {
  22.             //     return `${this.userName} ( ${this.userEmail} )`;
  23.             // }
  24.             // 方法也可以简化
  25.             getInfo() {
  26.                 return `${this.userName} ( ${this.userEmail} )`;
  27.             }
  28.             // getInfo:()=>
  29.             //     return `${this.userName} ( ${this.userEmail} )`;
  31.         }
  33.         console.log("简化后",user.getInfo());
  35.         //箭头函数中的this总是指向定义它的作用域（静态作用域/词法作用域），并非调用是的作用域
  37.         // js中，只有函数和块才能创建作用域
  38.         // user对象不能创建作用域 此时的this指向了上user的作用域/作用域链；
  39.         // 全局没有userName,userEmail,所以输出 undefined。

认识bind,call,apply

  1.     <button>click</button>
  2.     <script>
  3.       //   function f1() {}
  4.       //   console.dir(f1);
  5.       //   bind,call,apply定义在原型上的方法
  7.       function hello(name) {
  8.         this.name = name;
  9.         console.log(this.name);
  10.       }
  11.       const obj = {
  12.         name: "admin",
  13.         // hello(name) {
  14.         //   this.name = name;
  15.         //   console.log(this.name);
  16.         // },
  17.         // 代码冗余
  18.       };
  19.       //经典调用
  20.       console.log(hello("hi 你好"));
  21.       //bind()不会立即执行，只返回一个函数声明
  22.       // 将hello()这个函数绑定到obj对象上，第二个参数是hello的参数
  23.       let f = hello.bind(obj, "tp");
  24.       console.log(f());
  26.       // call / apply 立即执行
  27.       //将hello()这个函数绑定到obj对象上，第二个是hello的参数
  28.       f = hello.call(obj, "xx");
  29.       console.log(f);
  30.       //使用apply第二个参数要是数组
  31.       f = hello.apply(obj, ["yy"]);
  32.       console.log(f);
  34.       //bind()应用案例：动态改变this
  35.       document.querySelector("button").addEventListener(
  36.         "click",
  37.         function () {
  38.           console.log(this.name);
  39.           console.log(this);
  40.           document.body.appendChild(document.createElement("p")).innerHTML="欢迎"+this.name;
  41.         }.bind({ name: "新对象" })
  42.       );

总结：bind不会立即执行，call 和 apply 立即执行 其中apply 要求第二个参数是数组
使用此三个方法的好处是可以动态改变this指向，相应的也会是代码可读性变差。

访问器属性

  1.      const product = {
  2.         data: [
  3.           { name: "电脑", price: 9000, num: 5 },
  4.           { name: "手机", price: 5000, num: 10 },
  5.           { name: "相机", price: 8000, num: 3 },
  6.         ],
  7.         // getAmounts(){
  8.         //     return this.data.reduce((t,c)=>(t += c.price*c.num),0)
  9.         // },
  10.         //访问器属性
  11.         //将方法伪造成一个属性
  12.         get total(){
  13.             return this.data.reduce((t,c)=>(t += c.price*c.num),0)
  14.         },
  16.         set setPrice(price){
  17.             this.data[1].price = price;
  18.         }
  19.       };
  21.     //   console.log("总金额：", product.getAmounts());
  22.       console.log("总金额：", product.total);
  23.       product.setPrice = 7999;
  24.       console.log("总金额：", product.data[1]);

总结：感觉很重要的样子。

访问器属性的优先级

  1.     //   let user = {
  2.     //     name: "phone",
  3.     //     get name() {
  4.     //       return "HUAWEI";
  5.     //     },
  7.     //     set name(value) {
  8.     //       this.name = value;
  9.     //     },
  10.     //   };
  12.       //访问器属性优先级高于同名的普通属性
  13.     //   console.log(user.name);
  15.     // 怎么解决普通属性与访问器属性重名问题？
  16.     let user = {
  17.         data:{name},
  18.         get name() {
  19.           return this.data.name;
  20.         },
  22.         set name(value) {
  23.           this.data.name = value;
  24.         },
  25.       };
  26.       user.name = "HUAWEI";
  27.       console.log(user.name);

总结：开发中尽量避免访问器属性与不同属性重名。

流程控制-分支

  1.      // let score = 64;
  2.       //单分支
  3.       // if (score >= 60) {
  4.       //     console.log("及格");
  5.       // }
  7.       // let score = 54;
  8.       // // 双分支
  9.       // if (score >= 60) {
  10.       //     console.log("及格");
  11.       //     //默认分支
  12.       // } else {
  13.       //     console.log("补考");
  14.       // }
  16.       let score = 100;
  17.       // 双分支
  18.       if (score >= 60 && score < 80) {
  19.         console.log("合格");
  20.         //默认分支
  21.       } else if (score >= 80 && score <= 100) {
  22.         console.log("学霸");
  23.       } else if (score > 100 || score < 0) {
  24.         console.log("非法数据");
  25.       } else {
  26.         console.log("补考");
  27.       }
  29.       //   switch 来简化多分支
  30.       // 只要是区间一定要用true，switch是严格匹配
  31.       score = 70;
  32.       switch (true) {
  33.         case score >= 60 && score < 80:
  34.           console.log("合格");
  35.           break;
  36.         case score >= 80 && score <= 100:
  37.           console.log("学霸");
  38.           break;
  39.         case score > 100 || score < 0:
  40.           console.log("非法数据");
  41.           break;
  42.         default:
  43.           console.log("补考");
  44.       }
  45.     //   一般区间判断不用switch,用if更直观
  46.     // switch 一般用做单值判断
  47.     let response = 'Success';
  48.     switch (response.toLowerCase()) {
  49.         case 'fail':
  50.             console.log("请求失败");
  51.             break;
  52.         case 'success':
  53.             console.log("请求成功");
  54.             break;
  55.         default:
  56.             console.log("未知错误");
  58.     }
  60.     // 三元运算符
  61.     // 条件 ？ true: false;
  62.     // if (score >= 60) {
  63.       //     console.log("及格");
  64.       //     //默认分支
  65.       // } else {
  66.       //     console.log("补考");
  67.       // }
  69.       console.log(score >= 60 ? "及格" : "补考");

总结：作为重要内容。三元运算符简化了双分支条件语句。熟练运用可以简化代码，看起来更优雅。
值判断尽量使用switch，如果是区间判断一定要使用true作为条件。

上一条：JS数组函数|JSON函数|get,post发起ajax请求|跨域原理下一条：JS进阶知识：数组、JSON、Ajax请求和跨域请求
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多