简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > Javascript中基础实用知识小汇总
Blogger Information
Blog 23
fans 0
comment 3
visits 23404
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
Javascript中基础实用知识小汇总
a.
Original
564 people have browsed it

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>
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！