Blogger Information
Blog 29
fans 0
comment 0
visits 19743
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
js:值传递引用传递、结构赋值、流程控制
手机用户1576673622
Original
717 people have browsed it

1. 实例演示值传递与引用传递的区别与联系

值传递
将a的值传递给b,此时更新a,b并不会随之变化。

  1. //值传递: 原始类型,string,number,bool
  2. let a = 1;
  3. let b = a;
  4. console.log("a = %d, b = %d", a, b);
  5. a = 2
  6. console.log("a = %d, b = %d", a, b);
  7. //更新a,不影响b。 b还等于1。

引用传递
将a的值传递给b,此时更新a,b同样变化。

  1. // 引用传递: 引用类型, object,array
  2. let obj1 = { a: 1, b: 2 };
  3. console.log(obj1);
  4. let obj2 = obj1;
  5. obj1.a = 10;
  6. // 更新obj1。 obj2同步更新。 a变成了10
  7. // 因为引用传递传递的是一个地址,其中内容变化会影响所以引用的。

传参

  1. //传参时,不论什么类型,都是"值传递"
  2. const f1 = x => (x = 10);
  3. m = 1;
  4. f1(m)
  5. console.log("m=%d", m);
  6. // m依旧等于1。
  7. // 函数中对参数的更新,并不会影响到入参
  8. // 入参: 调用函数是传入的参数,简称:"入参"
  1. const f2 = x => (x.a = 10);
  2. let o = { a: 1, b: 2 };
  3. console.log(o);
  4. f2(o);
  5. // 看上去函数中对于o.a的更新生效,实际上仍是值传递
  6. // 对与引用类型,只有全新赋值才算是更新,修改属性不算的
  7. console.log(o);

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

解构赋值:将数组或对象里面的东西结构到一个变量里面。

数组:按照数组索引和变量位置对应关系给变量赋值,和变量的书写顺序有关

  1. // 将1、2、3结构赋值给a、b、c。
  2. let [a, b, c] = [1, 2, 3];
  3. console.log(a, b, c);
  4. //赋值对象数量不一致也可以
  5. [a, b] = [1, 2, 3];
  6. console.log(a, b);
  7. [a, b, c, d = "xxxx"] = [1, 2, 3];
  8. console.log(a, b, c, d);
  9. // 变成集合
  10. [a, b, ...c] = [1, 2, 3, 4, 5];
  11. console.log(a, b, c);
  12. // 单独取出
  13. [, , a, ,] = [1, 2, 3, 4, 5];
  14. console.log(a);

对象:按照对象的属性名和变量的变量名一一对应来赋值,变量必须与属性同名,才能取到正确的值,而对象的属性没有次序,与书写顺序无关。

  1. let { name, id } = { id: 1, name: 3 }
  2. console.log(name, id);
  3. let email = "admin@php.cn";
  4. // email名字冲突会覆盖数据,解决方法,起一个useEmil的别名就行了
  5. let { role, email: userEmail } = { role: "user", email: "user@php.cn" };
  6. console.log(userEmail);
  7. console.log(email);

参数结构

  1. // 数组传参
  2. let sum = ([a, b]) => a + b;
  3. console.log(sum([10, 20]));
  4. // 对象传参
  5. let getUser = ({ name, email }) => [name, email];
  6. console.log(getUser({ email: "qq.cn", name: "张三" }));

3.call,apply,bind 的区别与联系

bind()方法后不会立即执行,只会返回一个函数声明。
call/apply 立即执行,他们两个的区别在于 apply()方法执行的参数是数组。

  1. function hello(name) {
  2. this.name = name;
  3. console.log(this.name);
  4. }
  5. const obj = {
  6. name: "admin",
  7. };
  8. //普通调用
  9. console.log(hello("张三"));
  10. // bind()不会立即执行,只返回一个函数声明
  11. let f = hello.bind(obj, "李四");
  12. console.log(f());

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

访问器属性的原理是将方法伪造成一个属性

  1. const product = {
  2. data: [
  3. { name: "电脑", price: 5000, num: 5 },
  4. { name: "手机", price: 4000, num: 10 },
  5. { name: "相机", price: 8000, num: 3 },
  6. ],
  7. get total() {
  8. return this.data.reduce((t, c) => (t += c.price * c.num), 0);
  9. },
  10. };
  11. // 通过属性total访问。
  12. console.log("总金额 :", product.total);

5. 多分支与 swithc 转换的技巧

  1. // 多分支
  2. score = 90;
  3. if (score >= 60 && score < 80) {
  4. console.log("合格");
  5. } else if (score >= 80 && score <= 100) {
  6. console.log("学霸");
  7. }
  8. else if (score > 100 || score < 0) {
  9. console.log("非法数据");
  10. } else {
  11. console.log("补考");
  12. }
  13. // switch简化多分支
  14. // switch是严格匹配
  15. score = 999;
  16. switch (true) {
  17. case score >= 60 && score < 80:
  18. console.log("合格");
  19. break;
  20. case score >= 80 && score <= 80:
  21. console.log("学霸");
  22. break;
  23. case score > 100 || score < 0:
  24. console.log("非法数据");
  25. break;
  26. default:
  27. console.log("补考");
  28. }
  29. </script>

6. 三元运算解决了什么问题,有什么限制?

简化双分支。

  1. score = 80;
  2. //使用“ ? ”
  3. console.log(score >= 60 ? "及格" : "补考");
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