search

博客列表 >Javascript中基础实用知识小汇总

Javascript中基础实用知识小汇总

a.
a.原创
2021年01月10日 16:05:59575浏览

JS 中值传递和引用传递解析

js 变量传递有那些类型？

1. 值传递：原始类型

  • string：字符串
  • number：数值
  • bool：布尔

2. 引用传递：引用类型

  • object 对象
  • array 数组

这两种传递有什么区别？

3. 解析

  • 原始类型的变量值传递是把值赋给另一个变量

如下代码 1 赋值给 a, 再把 a 的值赋给 b，修改 a 的值不会改变 b 的值，这就是值传递

  1. let a = 1;
  2. let b = a;
  4. a = 2;
  5. console.log(a, b);

slA0IO.md.png

  • 引用传递是把访问变量存放数据的内存地址传给另外一个变量，两个变量指向同一个内存地址

如下代码，其实两个变量访问的都是同一个变量内存地址，所以修改一个变量的数据，引用相同内存地址的数据也会直观的看到变化

  1. let arr = [1, 2, 3, 4, 5, 6, 0];
  2. let arr1 = arr;
  3. arr[0] = 9;
  5. console.log(arr[0], arr1[0]);

slEAw6.md.png

那么传递参数又是什么类型？

4. 传参

4.1 原始类型的传参

  • 函数中对参数的更新，并不会影响到入参

slmZDA.md.png

4.2 引用类型的传参

  • 引用类型传递的更新也不会影响入参，所以函数中传参都是值传递

sl8VKK.md.png

4.3 code

  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>Document</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       let a = 1;
  11.       let b = a;
  12.       a = 2;
  13.       console.log(a, b);
  15.       let arr = [1, 2, 3, 4, 5, 6, 0];
  16.       let arr1 = arr;
  17.       arr[0] = 9;
  19.       console.log(arr[0], arr1[0]);
  21.       //传递的原始类型时
  23.       //函数的传参对于函数内部对变量的更新无影响
  24.       const f1 = (x) => (x = 1);
  25.       let o = 10;
  26.       //入参：调用函数传入的参数
  27.       f1(o);
  28.       console.log(o);
  30.       //传递的是引用类型时
  32.       const f2 = (y) => (y.a = 9);
  33.       let ob1 = { a: 1, b: 2 };
  34.       f2(ob1);
  35.       //此时会发现对象中a的值被更新为9,这是为什么呢？
  37.       console.log(ob1);
  38.       //函数中对于ob1.a的更新生效了，实际上仍是值传递
  40.       //对于引用类型，只有全新赋值才算是更新，修改属性不算更新
  42.       const ob2 = { a: 10, b: 20 };
  43.       ob2.a = 0;
  44.       //ob2为一个常量，按理说修改会报错但是是正常的，说明修改对象中的一个属性不算更新
  46.       //ob2 = {};
  47.       //此时报错
  49.       const f3 = (z) => (z = {});
  50.       let c = { a: 1, b: 2 };
  51.       f3(c);
  53.       console.log(c);
  54.       //此时可以看到函数内对引用类型传递的更新也不会影响入参，所以函数中传参都是值传递
  55.     </script>
  56.   </body>
  57. </html>

数组与对象的解构赋值怎么做

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

1. 数组

  • 数组支持给变量添加默认值
  1. let [a, b, c] = [1, 2, 3];
  2. console.log(a, b, c);
  4. //支持默认值
  6. [a, b, c, d = "XXX"] = [1, 2, 3];

2. 对象

  1. let { name, id } = { id: "a100", name: "手机" };
  2. console.log(name);
  • 对象解构赋值支持别名，避免同名变量被更新
  1. let email = "admin@php.cn";
  2. ({ user, email } = { user: "name", email: "cp@php.cn" });
  3. console.log(email);
  5. //此时我们并不想更新email变量，可以给变量起一个别名
  6. email = "admin@php.cn";
  7. ({ user, email: useremail } = { user: "name", email: "cp@php.cn" });
  8. console.log(useremail);
  9. console.log(email);

3.传参同样可以用解构赋值

  1. //数组传参
  3. let sum = ([a, b]) => a + b;
  4. console.log(sum([10, 11]));
  5. //对象传参
  7. let ar = ({ c, d }) => [c, d];
  8. console.log(ar({ c: "我是C", d: "我是D" }));

4. code

slc4KO.md.png

  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.       //解构赋值：快速从集合数据（数组/对象）解构出独立变量
  12.       //1.数组
  14.       let [a, b, c] = [1, 2, 3];
  15.       console.log(a, b, c);
  17.       //支持默认值
  19.       [a, b, c, d = "XXX"] = [1, 2, 3];
  21.       //2.对象
  23.       let { name, id } = { id: "a100", name: "手机" };
  24.       console.log(name);
  26.       //3.对象解构赋值支持别名，避免同名变量被更新
  27.       //这里声明一个与对象解构变量同名的变量
  29.       let email = "admin@php.cn";
  30.       ({ user, email } = { user: "name", email: "cp@php.cn" });
  31.       console.log(email);
  33.       //此时我们并不想更新email变量，可以给变量起一个别名
  34.       email = "admin@php.cn";
  35.       ({ user, email: useremail } = { user: "name", email: "cp@php.cn" });
  36.       console.log(useremail);
  37.       console.log(email);
  39.       //参数解构
  41.       //数组传参
  43.       let sum = ([a, b]) => a + b;
  44.       console.log(sum([10, 11]));
  45.       //对象传参
  47.       let ar = ({ c, d }) => [c, d];
  48.       console.log(ar({ c: "我是C", d: "我是D" }));
  49.     </script>
  50.   </body>
  51. </html>

call,apply,bind 是什么？

作用是改变函数运行时 this 的指向

slgkR0.md.png

code

  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>Document</title>
  7.   </head>
  8.   <body>
  9.     <button>click</button>
  11.     <script>
  12.       function hello(name) {
  13.         this.name = name;
  14.         console.log(this.name);
  15.       }
  16.       const obj = { name: "admin" };
  17.       //经典调用
  18.       hello("朱老师");
  20.       //bind()不会立即执行，只返回一个函数声明
  21.       let f = hello.bind(obj, "bind");
  22.       console.log(f);
  23.       f();
  25.       //call/apply立即执行
  26.       f = hello.call(obj, "call");
  27.       console.log(f);
  28.       // apply要求第二个参数必须是数组
  30.       f = hello.apply(obj, ["apply"]);
  31.       console.log(f);
  33.       //bind()用处
  35.       //动态改变this指向
  36.       document.querySelector("button").addEventListener(
  37.         "click",
  38.         function () {
  39.           console.log(this);
  41.           console.log(this.name);
  42.         }.bind({ name: "bind啊" })
  43.       );
  44.     </script>
  45.   </body>
  46. </html>

javascript 访问器原理与实现

1. 访问器原理就是用set,get将方法伪造成一个属性

2. get用于访问 set用于传值

3. 代码演示

slgfFs.md.png

  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 product = {
  11.         data: [
  12.           { name: "电脑", price: 5000, num: 5 },
  13.           { name: "手机", price: 4000, num: 9 },
  14.           { name: "相机", price: 5500, num: 1 },
  15.         ],
  17.         getAmounts() {
  18.           return this.data.reduce((t, c) => (t += c.price * c.num), 0);
  19.         },
  21.         //将方法伪造成一个属性
  22.         get getprice() {
  23.           return this.data.reduce((t, c) => (t += c.price * c.num), 0);
  24.         },
  25.         //设置价格
  26.         set setprice(price) {
  27.           this.data[1].price = price;
  28.         },
  29.       };
  30.       //普通方式访问
  31.       console.log(product.getAmounts());
  33.       //访问器方法访问
  34.       console.log(product.getprice);
  36.       //设置价格
  37.       product.setprice = 200;
  38.       console.log(product.getprice);
  40.       //访问器优先级高于普通属性
  42.       let us = {
  43.         name: "朱老师",
  44.         get name() {
  45.           return "不是朱老师";
  46.         },
  47.         set name(value) {
  48.           this.name = value;
  49.         },
  50.       };
  52.       console.log(us.name);
  54.       //解决同名优先级问题
  55.       let us1 = {
  56.         data: { name: "朱老师" },
  57.         get name() {
  58.           return this.data.name;
  59.         },
  60.         set name(value) {
  61.           this.data.name = value;
  62.         },
  63.       };
  64.       us1.name = "000";
  65.       console.log(us1.name);
  66.     </script>
  67.   </body>
  68. </html>

javascript 分支 与三元运算

分支用于逻辑判断，让代码有了灵魂

  • if...else

常用区间判断

  1. let score = 81;
  2. //单分支
  3. if (score >= 60) {
  4.   console.log("及格");
  5. }
  7. //双分支
  9. if (score >= 60) {
  10.   console.log("及格 ");
  11. } else {
  12.   console.log("不及格");
  13. }
  15. //多分支
  16. score = 101;
  17. if (score > 100 || score < 0) {
  18.   console.log("成绩不合法");
  19. } else if (score >= 60 && score < 80) {
  20.   console.log("合格");
  21. } else if (score >= 80 && score <= 100) {
  22.   console.log("优秀");
  23. } else {
  24.   console.log("不及格");
  25. }
  • switch

一般用于单值判断

  1. score = 19;
  2. //switch 来简化分支
  3. //多值区间断送
  4. switch (true) {
  5.   case score > 100 || score < 0:
  6.     console.log("成绩不合法");
  7.     break;
  8.   case score >= 60 && score < 80:
  9.     console.log("合格");
  10.     break;
  11.   case score >= 80 && score <= 100:
  12.     console.log("优秀");
  13.     break;
  14.   default:
  15.     console.log("不及格");
  16. }
  18. //switch 单值判断
  20. let response = "success";
  21. switch (response.toLowerCase()) {
  22.   case "fail":
  23.     console.log("请求失败");
  24.     break;
  25.   case "success":
  26.     console.log("请求成功");
  27.     break;
  28.   default:
  29.     console.log("未知错误 ");
  30. }
  • 条件 ？ true : false 用于二分支运算

三元运算简化了代码，但是只有用于二分支

  1. //   语法：条件 ?　true : false
  3. console.log(score >= 60 ? "及格" : "不及格 ");

code

  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>javascript分支</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       let score = 81;
  11.       //单分支
  12.       if (score >= 60) {
  13.         console.log("及格");
  14.       }
  16.       //双分支
  18.       if (score >= 60) {
  19.         console.log("及格 ");
  20.       } else {
  21.         console.log("不及格");
  22.       }
  24.       //多分支
  25.       score = 101;
  26.       if (score > 100 || score < 0) {
  27.         console.log("成绩不合法");
  28.       } else if (score >= 60 && score < 80) {
  29.         console.log("合格");
  30.       } else if (score >= 80 && score <= 100) {
  31.         console.log("优秀");
  32.       } else {
  33.         console.log("不及格");
  34.       }
  36.       score = 19;
  37.       //switch 来简化分支
  38.       //多值区间断送
  39.       switch (true) {
  40.         case score > 100 || score < 0:
  41.           console.log("成绩不合法");
  42.           break;
  43.         case score >= 60 && score < 80:
  44.           console.log("合格");
  45.           break;
  46.         case score >= 80 && score <= 100:
  47.           console.log("优秀");
  48.           break;
  49.         default:
  50.           console.log("不及格");
  51.       }
  53.       //switch 单值判断
  55.       let response = "success";
  56.       switch (response.toLowerCase()) {
  57.         case "fail":
  58.           console.log("请求失败");
  59.           break;
  60.         case "success":
  61.           console.log("请求成功");
  62.           break;
  63.         default:
  64.           console.log("未知错误 ");
  65.       }
  67.       //三元运算
  69.       //   语法：条件 ?　true : false
  71.       console.log(score >= 60 ? "及格" : "不及格 ");
  72.     </script>
  73.   </body>
  74. </html>
上一条：Json和Ajax相关概念（文末有数组函数的小彩蛋）下一条：Vue自学：v-if和v-on登录切换的小案例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多