210401 JavaScript 值传递与引用传递, 模板字面量, 标签函数, 解构, bind() call() apply() 函数, Getter Setter, 流程控制

2021年04月08日 19:59:04阅读数:20博客 / xyphpblog / JavaScript

1. 值传递与引用传递

1.1 值传递

  • 值传递发生在基本数据类型中
  1. let a = 10;
  2. let b = a;
  3. console.log(a, b); //10 10
  4. a = 5;
  5. console.log(a, b); //5 10

1.2 引用传递

  • 发生在引用类型,数组,对象
  1. let s1 = {
  2. x: 1,
  3. y: 1
  4. };
  5. console.log(s1);
  6. // {x:1, y:1}
  7. let s2 = s1;
  8. console.log(s2);
  9. // {x:1, y:1}
  10. console.log(s1 === s2);
  11. // true
  12. s1.x = 10;
  13. console.log(s1);
  14. // {x:10, y:1}
  15. console.log(s2);
  16. // {x:10, y:1}

1.3 传参

  • 函数中,始终是值传递
  • 传入对象,更新对象的属性仍属于值传递,因为对象没有被改变
  1. //基本类型
  2. const f1 = x => x = 10;
  3. let p = 5;
  4. f1(p);
  5. console.log(p);
  6. //对象
  7. const f2 = (obj) => { obj.age = 22; obj = {}; };
  8. let o = {
  9. age: 10,
  10. id: 0001
  11. }
  12. console.log(o);
  13. // {age:10, id:1}
  14. f2(o);
  15. console.log(o);
  16. // {age:22, id:1}

*

  • 深拷贝:值传递
  • 浅拷贝:引用传递

2. 模板字面量

  • 字符串字面量+变量插值(嵌入到字符串)
  1. let name = "Tom";
  2. let greet = `Hello, ${name}`;
  3. console.log(greet);
  4. let stu = {
  5. id: 1112,
  6. name: "Em",
  7. age: 25,
  8. married: false
  9. }
  10. let stuInfo = `
  11. <div>
  12. <p>ID: ${stu.id}</p>
  13. <p>姓名:${stu.name}</p>
  14. <p>年龄:${stu.age}</p>
  15. <p>已婚:${stu.married}</p>
  16. </div>
  17. `;
  18. console.log(stuInfo);
  19. document.write(stuInfo);

2.1 标签函数

  • 第一个参数:字符串本身元素组成的数组
  • 第二个及以后:插值/插值组成的数组
  1. //少量参数
  2. let sum = (strs, a, b) => {
  3. console.log(strs);
  4. console.log(a, b);
  5. }
  6. let a = 5;
  7. let b = 10;
  8. let c = 20;
  9. sum`${a}+${b}=`;
  10. //多个参数
  11. sum = (strs, ...arr) => {
  12. console.log(strs);
  13. console.log(arr);
  14. }
  15. sum`${a}+${b}+${c}=`;

3. 解构

3.1 数组解构

  1. let arr = [1, 2, 3];
  2. let [a, b] = arr;
  3. console.log(a, b);
  4. // 1 2
  5. let c;
  6. [a, b, c] = arr;
  7. console.log(c);
  8. // 3
  9. arr = [1, 2, 3, 4, 5, 6, 7];
  10. [a, b, ...c] = arr;
  11. console.log(a, b, ...c);
  12. // 1 2 3 4 5 6 7
  13. [, , , , , c,] = arr;
  14. console.log(c);
  15. // 6
  16. // let [x, y] = [8, 9];
  17. x = 80;
  18. y = 90;
  19. console.log(x, y);
  20. // 80 90
  21. [y, x] = [x, y];
  22. console.log(x, y)
  23. // 90 80

3.2 对象解构

  1. let stu = { name: "Tom", age: 22 };
  2. ({ name, age } = stu);
  3. // let { name, age } = stu;
  4. console.log(name, age)
  5. // Tom 22

3.3 参数解构

  1. let sum = ([a, b]) => a + b;
  2. console.log(sum([60, 60]));
  3. // 120
  4. let stu1 = ({ name, age }) => [name, age];
  5. console.log(stu1({ name: "Em", age: 25 }));
  6. //["Em", 25]

3.4 对象简化

  • 如果对象的属性与变量作用域相同且同名,可以写作:
  1. x = 90, y = 80;
  2. let user = {
  3. x,
  4. y
  5. }
  6. console.log(user);
  7. // {x: 90, y: 80}

4 bind() call() apply() 函数

  • 默认的this关键字指向window
  • 在对象中作为属性的函数里,this指向的是当前的对象
  • 这三个函数用来改变this关键字的指向
  1. let stu = {
  2. name: "Em",
  3. age: 30
  4. }
  5. let name = "hehe";
  6. let obj = {
  7. name: "Tom",
  8. age: 22,
  9. foo: function () {
  10. console.log("Name: " + this.name);
  11. console.log("Age: " + this.age);
  12. }
  13. }
  14. console.log(this.name);
  15. obj.foo();
  16. obj.foo.bind(stu)();
  17. obj.foo.call(stu);
  18. obj.foo.apply(stu);

  • 若函数有参数需传入:
  1. obj = {
  2. name: "Tom",
  3. age: 22,
  4. foo: function (i, s) {
  5. console.log("Name: " + this.name);
  6. console.log("Age: " + this.age);
  7. console.log("Interest: " + i);
  8. console.log("Sport: " + s);
  9. }
  10. }
  11. obj.foo.bind(stu, "Xbox", "Tennis")();
  12. obj.foo.apply(stu, ["PS4", "Badminton"]);
  13. obj.foo.call(stu, "Switch", "Basketball");

5. 访问器属性 Getter Setter

  • 方法以属性的方式使用
  • 简化语法
  1. let item = {
  2. name: "unknown",
  3. price: 0,
  4. amount: 0,
  5. set setName(name) {
  6. this.name = name;
  7. },
  8. set setPrice(price) {
  9. this.price = price;
  10. },
  11. get addItem() {
  12. this.amount++;
  13. },
  14. get getName() {
  15. return this.name;
  16. },
  17. get getPrice() {
  18. return this.price;
  19. },
  20. get getAmount() {
  21. return this.amount;
  22. }
  23. }
  24. item.addItem;
  25. console.log(item.getAmount);
  26. item.setName = "iPad";
  27. console.log(item.getName);
  28. item.setPrice = "199";
  29. console.log(item.getPrice);
  30. //1
  31. //iPad
  32. //199

6. 流程控制

6.1 if 语句

  • 语法
    1. if(true) return a = 1;
    2. else return a = 2;
  • 当只有执行语句只有一行时,{}括号可以省略,多行时不可以
  1. let a = 1;
  2. if (a > 60)
  3. console.log(true);
  4. else
  5. console.log(false);
  6. // false
  • 多个分支时
  1. let foo = (speed) => {
  2. if (speed < 60 && speed >= 0) {
  3. console.log("too slow");
  4. } else if (speed >= 60 && speed <= 100) {
  5. console.log("just right");
  6. } else if (speed > 100 && speed < 200) {
  7. console.log("too fast");
  8. } else {
  9. console.log("???");
  10. }
  11. }
  12. let currentSpeed = 80;
  13. foo(currentSpeed);
  14. currentSpeed = 30;
  15. foo(currentSpeed);
  16. currentSpeed = 150;
  17. foo(currentSpeed);
  18. currentSpeed = -1;
  19. foo(currentSpeed);

6.2 switch 语句

  • 语法
    1. switch(true) {
    2. case a:
    3. ...;
    4. break;
    5. case b:
    6. ...;
    7. break;
    8. default:
    9. ...;
    10. break;
    11. }

*case 也可以是表达式表示多个值,如:

case a>0&&a<10:
console.log(true);

但多用于单个值的判断

  1. let animal = "cat";
  2. switch (animal) {
  3. case "cat":
  4. console.log("猫");
  5. break;
  6. case "dog":
  7. console.log("狗");
  8. break;
  9. default:
  10. break;
  11. }
  12. //猫

6.3 三元运算符

  • 用于简化双分支
  1. currentSpeed = 2000;
  2. animal = "cat";
  3. console.log(currentSpeed <= 200 ? "OK" : "Boom");
  4. //Boom
  5. console.log(animal === "cat" ? true : false);
  6. //true
批改状态:合格

老师批语:

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 博主信息
    xyphpblog
    博文
    11
    粉丝
    0
    评论
    0
    访问量
    356
    积分:0
    P豆:22