search

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

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

xyphpblog
xyphpblog原创
2021年04月08日 19:59:04544浏览

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);
  5.         let stu = {
  6.             id: 1112,
  7.             name: "Em",
  8.             age: 25,
  9.             married: false
  10.         }
  11.         let stuInfo = `
  12.         <div>
  13.             <p>ID: ${stu.id}</p>
  14.             <p>姓名：${stu.name}</p>
  15.             <p>年龄：${stu.age}</p>
  16.             <p>已婚：${stu.married}</p>
  17.             </div>
  18.         `;
  19.         console.log(stuInfo);
  20.         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
  5.         let stu1 = ({ name, age }) => [name, age];
  6.         console.log(stu1({ name: "Em", age: 25 }));
  7.         //["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.         }
  6.         let name = "hehe";
  8.         let obj = {
  9.             name: "Tom",
  10.             age: 22,
  11.             foo: function () {
  12.                 console.log("Name: " + this.name);
  13.                 console.log("Age: " + this.age);
  14.             }
  15.         }
  16.         console.log(this.name);
  17.         obj.foo();
  19.         obj.foo.bind(stu)();
  20.         obj.foo.call(stu);
  21.         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.         }
  25.         item.addItem;
  26.         console.log(item.getAmount);
  27.         item.setName = "iPad";
  28.         console.log(item.getName);
  29.         item.setPrice = "199";
  30.         console.log(item.getPrice);
  31.         //1
  32.         //iPad
  33.         //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
上一条：PHP mkdir() Permission denied 文件权限不足解决办法下一条：JavaScript 之 作用域和闭包，类的继承
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多