简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 《JS对象与流程控制》
Blogger Information
Blog 26
fans 1
comment 1
visits 19652
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
《JS对象与流程控制》
杨凡的博客
Original
730 people have browsed it

值传递与引用传递

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>

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！