search

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

《JS对象与流程控制》

杨凡的博客
杨凡的博客原创
2021年02月19日 11:42:16732浏览

值传递与引用传递

1、赋值

值传递

一般为原始类型，字符串（string）、数值（number）、布尔（bool）类型。

  1. <!DOCTYPE html>
  2. <html lang="en">
  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 a = 31;
  11.     let b = a;
  12.     console.log('a = %d,b = %d', a, b);
  13.     a = 35;
  14.     console.log('a = %d,b = %d', a, b);
  15. </script>
  16. </body>
  17. </html>

总结：原始类型是值传递，a的值传递给了b，因此更新a不影响b的值。

引用传递

一般为引用类型，对象（object）、数组（Array）。

  1. <!DOCTYPE html>
  2. <html lang="en">
  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 obj1 = {a:18,b:37,c:88};
  11.     console.log(obj1);
  12.     let obj2 = obj1;
  13.     console.log(obj2);
  14.     obj1.c = 99;
  15.     console.log(obj1);
  16.     console.log(obj2);
  17. </script>
  18. </body>
  19. </html>

总结：引用类型是引用传递，obj2引用了obj1的地址，更新obj1的内容，同步也更新了obj2的内容，两个变量共用了一个地址

2、传参

传参时，无论什么类型，最终都是值传递； 传入的参数简称入参

  1. <!DOCTYPE html>
  2. <html lang="en">
  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 f1 = x => (x = 77);
  11.     let m = 3;
  12.     console.log("m = %d",m);
  13.     f1(m);
  14.     console.log("m = %d",m);
  16.     const f2 = x => (x.a = 100);
  17.     let obj = {a:1,b:2,c:3};
  18.     console.log(obj);
  19.     f2(obj);
  20.     console.log(obj);
  21. </script>
  22. </body>
  23. </html>

总结：函数的传参都是值传递，再对象中更新部分内容称作属性变更，赋值一个全新的对象才是更新；函数中对于对象参数/引用参数的更新并不会影响到入参

深拷贝：可以理解为值传递
浅拷贝：可以理解为引用传递

模板字面量与标签函数

模板字面量

将表达式嵌入到字符串中

模板字面量的组成

  1. 字符串字面量：”+,=”
  2. 变量或表达式：a,b,(a+b)
  1. <!DOCTYPE html>
  2. <html lang="en">
  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 a = 1,b = 2;
  11.         let res = a + " + "+ b +" = "+(a+b);
  12.         console.log(res);
  13.         res = `${a} + ${b} = ${a+b}`;
  14.         console.log(res);
  15.         let menu = ["首页","视屏","文章"];
  16.         let htmlStr = `<ul>
  17.     <li><a href="">${menu[0]}</a></li>
  18.     <li><a href="">${menu[1]}</a></li>
  19.     <li><a href="">${menu[1]}</a></li>
  20. </ul>`;
  21.         console.log(htmlStr);
  22.         document.body.insertAdjacentHTML("beforeend",htmlStr);
  23.     </script>
  24. </body>
  25. </html>

1. 模板字面量创建多行字符串可以保留格式
2. 模板字面量使用反引号:”`”

标签函数

  1. <!DOCTYPE html>
  2. <html lang="en">
  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.         let hello = name =>alert(name);
  12.         // 使用自定义函数来处理模板字面量，它的参数约定
  13.         // 1、第一个参数：模板字面量中的字符串字面量组成的数组
  14.         // 2、从第二个参数开始，讲模板字面量中的变量一次传入
  15.         hello`百万弟弟`;
  16.     </script>
  17.     <iframe src="" frameborder="0"></iframe>
  18. </body>
  19. </html>

1. 标签函数定义与普通函数一样,但调用时实参是模板字面量
2. 参数:第一参数默认接收模板字面量中的字符组成的数组,后面的变量依次接收模板字面量中的参数
3. 标签函数在使用时:传入的值(实参)是模板字面量,不需要小括号,直接标签函数名+模板字面量即可

解构赋值

快速从集合数据中（数组/对象）解构出独立变量

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>解构赋值</title>
  9. </head>
  10. <body>
  11. <script>
  12.     //解构赋值：快速从集合数据（数组/对象）解析出独立变量
  13.     //1、数组
  14.     let [a,b,c] = [1,2,3];
  15.     console.log(a,b,c);
  17.     [a,b] = [5,6,7];
  18.     console.log(a,b);
  20.     [a,b,c,d] = [8,9,10];
  21.     console.log(a,b,c,d);
  23.     [a,b,...c] = [11,12,13,14,15,16];
  24.     console.log(a,b,c);
  26.     [,,a,] = [17,18,19,20];
  27.     console.log(a);
  28.     // 交换数值
  29.     let x=66,y=99,t;
  30.     console.log("x = %d, y = %d",x,y);
  31.     [y,x] = [x,y];
  32.     console.log("x = %d, y = %d",x,y);
  33.     //2、对象解构
  34.     let {id,name}={id:8999,name:'苹果12'};
  35.     console.log(name,id);
  36.     //属性名与变量名必须一一对应，顺序无所谓
  37.     //3、参数解构
  38.     // 数组传参
  39.     let sum = ([a,b])=> a + b;
  40.     console.log(sum([33,66]));
  41.     // 对象传参
  42.     let obj = ({name,age})=> [name,age];
  43.     console.log(obj({name:"百万弟弟",age:"30"}));
  44. </script>
  45. </body>
  46. </html>

总结
对象解构：属性名与变量名必须一一对应，顺序无所谓

call,apply,bind的区别与联系

bind()绑定，返回一个函数声明， 不会立即执行
call和apply会立即执行

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>bind,call,apply</title>
  9. </head>
  10. <body>
  11.     <button>按钮</button>
  12.     <script>
  13.         function hello(name) {
  14.             this.name = name;
  15.             console.log(this.name);
  16.         }
  17.         const obj = {name:'yangfan',};
  18.         console.log(hello("百万弟弟"));
  20.         let f = hello.bind(obj,"PHP中文网");
  21.         console.log(f());
  23.         f = hello.call(obj,"西门老师");
  24.         console.log(f);
  26.         f = hello.apply(obj,["灭绝师太"]);
  27.         console.log(f);
  28.     </script>
  31. </body>
  32. </html>

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

访问器：将方法伪造成一个属性，访问器属性优先级高于同名的普通属性

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>访问器属性</title>
  9. </head>
  10. <body>
  11.     <script>
  12.         const product = {
  13.             data:[
  14.                 {name:"西门官人",age:28,sex:"男"},
  15.                 {name:"灭绝师太",age:30,sex:"女"},
  16.                 {name:"皮特朱",age:40,sex:"男"},
  17.             ],
  18.             getAmounts(){
  19.                 return this.data.reduce((t,c)=>(t += c.age),0);
  20.             },
  21.             get total(){
  22.                 return this.data.reduce((t,c)=>(t += c.age),0);
  23.             },
  24.         };
  25.         console.log('总年纪：',product.getAmounts());
  26.         console.log('总年纪：',product.total);
  28.     </script>
  29. </body>
  30. </html>

多分支与swithc转换的技巧

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>流程控制-分支</title>
  9. </head>
  10. <body>
  11. <script>
  12.     let score = 80;
  13.     //单分支
  14.     if(score >= 60){
  15.         console.log("及格");
  16.     }
  17.     // 双分支
  18.     score = 57;
  19.     if(score >= 60){
  20.         console.log("及格");
  21.     }else {
  22.         console.log("不及格，补考");
  23.     }
  24.     // 多分支
  25.     score = 90;
  26.     if(score >= 60 && score < 80){
  27.         console.log("合格");
  28.     }else if (score >= 80 && score <= 100){
  29.         console.log("优秀");
  30.     }else if (score > 100 || score < 0){
  31.         // 判断成绩是否合法
  32.         console.log("非法数据");
  33.     }else {
  34.         console.log("不合格，补考");
  35.     }
  36.     // switch来简化多分支，switch是严格匹配
  37.     score = 43;
  38.     switch (true) {
  39.         case score >= 60 && score < 80 :
  40.             console.log("合格");
  41.             break;
  42.         case score >= 80 && score <= 100 :
  43.             console.log("优秀");
  44.             break;
  45.         case score > 100 || score < 0 :
  46.             console.log("非法数据");
  47.             break;
  48.         default:
  49.             console.log("不合格，补考");
  50.     }
  51. </script>
  52. </body>
  53. </html>

多分枝可以使用switch来简化
switch一般用于单值判断较多

三元运算解决了什么问题,有何限制

三元运算解决了双分支的简化，也可以多分支，但不适合于没有返回值的判断

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>流程控制-分支</title>
  9. </head>
  10. <body>
  11. <script>
  12.     let age = 30;
  13.     console.log(age >= 35 ? "中年" : "青年");
  14. </script>
  15. </body>
  16. </html>

上一条：1223 京东移动端首页下一条：轮播图与懒加载
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多