博客列表 >JS对象与流程控制

JS对象与流程控制

庄周梦蝶
庄周梦蝶原创
2021年02月13日 18:14:05470浏览

值传递和引用传递

  1. <script>
  2. // 值传递有原生类型,字符串,数值,布尔,值传递的时候只传值,不会传地址,这样更改其中一个数值的时候不会一起更改
  3. let a=1;
  4. let b=a;
  5. a=2;
  6. //这两个都是原生类型,更改a后b不会更改值,b还是1
  7. //引用专递有对象,传递的时候值和地址一起传递,更改数值的时候回一起更改
  8. let obj1={a:1 b:2};
  9. let obj2=obj1;
  10. //更新obj1其中a的值
  11. obj1.a=10;
  12. //这时候obj2中的a也会更新
  13. //传递参数无论什么类型都是值传递
  14. const f1=(x)=>(x=10);
  15. let m=5;
  16. //把m传入到f1函数中,叫入参
  17. f1(m);
  18. //函数中对参数更新,不会影响到入参的值
  19. const f2=(x)=>(x.a=10);
  20. let o={a:1,b:2};
  21. //用o调用f2这个函数
  22. f2(o);
  23. //虽然o里面的a更新了,实际上不是引用传递,是值传递,因为对于引用类型,只有全新的赋值才是更新,修改其中单个属性不算
  24. const f3=(x)=>(x={a:1,b=1});
  25. f3(o);
  26. //深拷贝就是值传递,穿个值过去,就值和地址都过去了
  27. //浅拷贝就是引用传递,就给你个地址让你访问
  28. </script>

数组和对象解构的常用方法与函数传参

  1. <script>
  2. //解构赋值就是快速从集合数据(对象/数组)解构出独立变量,常用于vue中
  3. //解构数组
  4. let [a,b,c]=[1,2,3];
  5. console.log(a, b, c);
  6. //变量名多数值少,多出的变量会显示默认值
  7. [a, b, c, d] = [1, 2, 3];
  8. //变量名少数值多,有几个变量名显示几个数值
  9. [a, b] = [1, 2, 3];
  10. //解析a、b,剩下都放进数组
  11. [a,b,...c]=[1,2,3,4,5];
  12. //单独解析某个值,它是第几位就在前面加几个逗号,后面也得加上
  13. [,,a,,]=[1,2,3,4,5];
  14. //两个变量交换值就可以直接用解构来弄,不用再弄中间数了
  15. let x = 1,
  16. y = 2,
  17. // 中间量
  18. t;
  19. console.log("x=%d,y=%d", x, y);
  20. t = y;
  21. y = x;
  22. x = t;
  23. console.log("x=%d,y=%d", x, y);
  24. // 用解构函数
  25. [y, x] = [x, y];
  26. console.log("x=%d,y=%d", x, y);
  27. //对象解析,变量名必须一样,顺序是无所谓
  28. let {id,name}={id:10,name:"手机"};
  29. console.log(id, name);
  30. //用已有变量名来解析会导致覆盖已有的值,可以用别名的方式来解析
  31. let email="as@qq.com"
  32. let {name,email:asemail}={name:"电脑",email:"sd@qq.com"}
  33. //这样访问asemail会访问后面的值,访问原先email会访问到原先的值
  34. //参数解构,
  35. //数组传参
  36. let sum=([a,b])=>a+b;
  37. console.log(sum([10, 20]));
  38. // 对象传参
  39. let getUser = ({ name, email }) => [name, email];
  40. console.log(getUser({ email: "php.con", name: "老师" }));
  41. </script>

call,apply,bind

  1. <script>
  2. //创建函数
  3. function hello(name){
  4. this.name=name;
  5. console.log(this.name);
  6. }
  7. //创建一个对象
  8. const obj={name:"admin"};
  9. console.log(hello("朱老师"));
  10. //hello通过用bind绑定到obj上,因为需要参数,所以第二个写成参数
  11. let f = hello.bind(obj, "天蓬老师");
  12. //f()不会立刻执行,返回的是个函数声明
  13. console.log(f());
  14. //call/apply立即执行
  15. f = hello.call(obj, "灭绝老师");
  16. //这里就不用加括号了,因为是立即执行
  17. console.log(f);
  18. //用apply,参数必须数组
  19. f = hello.apply(obj, ["西门老师"]);
  20. console.log(f);
  21. </script>

访问器属性的原理与实现过程

  1. <script>
  2. const product = {
  3. data: [
  4. { name: "电脑", price: 5000, num: 5 },
  5. { name: "手机", price: 4000, num: 10 },
  6. { name: "相机", price: 7000, num: 3 },
  7. ],
  8. //计算多少钱
  9. getAmounts() {
  10. return this.data.reduce((t, c) => (t += c.price * c.num), 0);
  11. },
  12. //访问器属性
  13. //通过方法伪造成一个属性
  14. //通过get从新创建一个方法
  15. //这样就可以用属性来打到方法的效果,这就是访问器属性
  16. get ta() {
  17. return this.data.reduce((t, c) => (t += c.price * c.num), 0);
  18. },
  19. //用ser来修改其中某一个数值
  20. set setPrice(price) {
  21. //this就是指向当前data中的第二个的price属性,然后让它等于传进来的参数
  22. this.data[1].price = price;
  23. },
  24. };
  25. console.log("总额:", product.getAmounts());
  26. //通过属性访问
  27. console.log("总额:", product.ta);
  28. //先访问一些原先的属性
  29. console.log(product.data[1].price);
  30. //然后从新赋值一个
  31. product.setPrice = 9000;
  32. //然后再访问一些
  33. console.log(product.data[1].price);
  34. console.log("--------------------");
  35. //访问器属性的优先级高于同名的普通属性
  36. </script>

多分支与swithc转换的技巧

  1. <script>
  2. let cj=60;
  3. //单循环
  4. if(cj>=60){
  5. console.log('及格');
  6. }
  7. //加分支
  8. if(cj>=60){
  9. console.log('及格');
  10. }else{
  11. console.log('不及格');
  12. }
  13. //多分支
  14. if(cj>=60&&cj<=80){
  15. console.log('及格');
  16. }else if(cj>=80&&<=100){
  17. console.log('优秀')
  18. }else if(cj>100||cj<0){
  19. console.log('非法数据')
  20. }else{
  21. console.log('不及格')
  22. }
  23. //多分支用switch来写,switch是严格匹配,括号里面必须用true
  24. score = 100;
  25. switch (true) {
  26. // 第一种情况
  27. case score >= 60 && score < 80:
  28. console.log("合格");
  29. // 跳出来
  30. break;
  31. case score >= 80 && score <= 100:
  32. console.log("优秀");
  33. // 跳出来
  34. break;
  35. case score > 100 && score < 0:
  36. console.log("问题");
  37. // 跳出来
  38. break;
  39. // 默认分支
  40. default:
  41. console.log("补考");
  42. }
  43. // 一般用在单值判断
  44. let response = "Success";
  45. // 传递的值有可能会出现大小写错误
  46. // toLowerCase()会把传入的字符串全部改为小写
  47. // toUpperCase()全部改为大写
  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("位置分支");
  57. }
  58. </script>

三元运算

  1. <script>
  2. // 三元运算符简写法
  3. // 条件:如果为真执行第一个,如果为假执行第二个,中间用分号分开
  4. score = 50;
  5. console.log(score >= 60 ? "及格" : "补考");
  6. </script>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议