JS值传递|引用传递|数组和对象解构|函数传参|访问器属性原理实现|多分支与swithc转换|三元运实例演示

1. 实例演示值传递与引用传递的区别与联系;
2. 数组和对象解构的常用方法与函数传参
3. call,apply,bind的区别与联系，并试着实例演示一下
4. 访问器属性的原理与实现过程，并实例演示;
5. 多分支与swithc转换的技巧
6. 三元运算解决了什么问题,有什么限制？

一、值传递|引用传递

1.1 值传递: 原始类型,string,number,bool

<script>
     let a = 10;
     let b = a;
     console.log("a = %d, b = %d", a, b);
      a = 15;
      // 更新a,不影响b
      console.log("a = %d, b = %d", a, b);
</script>

图示：

1.2引用传递: object,array

<script>
   let obj1 = { a: 5, b: 18 };
      console.log(obj1);
      let obj2 = obj1;
      console.log(obj2);
      // 更新obj1
      obj1.b =30;
      console.log(obj1);
      // obj2同步更新
      console.log(obj2);
</script>

图示：

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

2.1数组解构

let [a, b, c] = [1, 2, 3];
      console.log(a, b, c);
      [a, b] = [1, 2, 3];
      console.log(a, b);
      [a, b, c, d = "xxxx"] = [1, 2, 3];
      console.log(a, b, c, d);
      [a, b, ...c] = [1, 2, 3, 4, 5];
      console.log(a, b, c);
      [, , a, ,] = [1, 2, 3, 4, 5];
      console.log(a);
      let x = 1,
        y = 2,
        t;
      console.log("x = %d, y = %d", x, y);
      //   t = x;
      //   x = y;
      //   y = t;
      //   console.log("x = %d, y = %d", x, y);
      [y, x] = [x, y];
      console.log("x = %d, y = %d", x, y);

图示：

2.2对象解构

<script>
   let { id, age,name } = { id: 10, age:3143,name:"北京"};
      console.log(id,age, name);
      // 属性名与变量名必须一一对应,顺序无所谓
      ({ id,age,name } = { id: 10, age:3143,name:"北京"});
      console.log(id, age,name);
      let email = "admin@php.cn";
      let { role, email: userEmail } = { role: "user", email: "user@php.cn" };
      console.log(userEmail);
      console.log(email);
</script>

图示：

2.3函数传参
数组传参

<script>
   let sum = ([a, b,c, d]) => a - b-c-d;
      console.log(sum([150, 27,29,14,33]));
</script>

图示：

对象传参

<script>
  let getUser = ({ name, age, sex}) => [name, age, sex];
   console.log(getUser({name:"黄蓉", age:18,sex:"girl"}));
</script>

图示：

三、call,apply,bind实例：

<script>
        function hello(name) {
        this.name = name;
        console.log(this.name);
      }
      const obj = {
        name: "admin",
      };
      console.log(hello("朱老师"));
      let f = hello.bind(obj, "天蓬老师");
      console.log(f());
      f = hello.call(obj, "灭绝老师");
      console.log(f);
      f = hello.apply(obj, ["西门老师"]);
      console.log(f);
      document.querySelector("button").addEventListener(
        "click",
        function () {
          console.log(this.name);
          console.log(this);
        }.bind({ name: "猫科动物" })
      );
</script>

图示：

call/apply立即执行
bind()不会立即执行,只返回一个函数声明
bind()应用案例: 动态改变this

四、访问器属性的原理与实现过程

实例：

<script>
     const product = {
        data: [
          { name: "电脑", price: 5000, num: 5 },
          { name: "手机", price: 4000, num: 10 },
          { name: "相机", price: 8000, num: 3 },
        ],
        // getAmounts() {
        //   return this.data.reduce((t, c) => (t += c.price * c.num), 0);
        // },
        // 访问器属性
        // 将方法伪造成一个属性
        get total() {
          //   return this.getAmounts();
          return this.data.reduce((t, c) => (t += c.price * c.num), 0);
        },
        set setPrice(price) {
          this.data[1].price = price;
        },
      };
      //   console.log("总金额 :", product.getAmounts());
      console.log("总金额 :", product.total);
      console.log(product.data[1].price);
      product.setPrice = 9988;
      console.log(product.data[1].price);
</script>

图示：

总结：访问器：将方法伪造成一个属性，访问器属性优先级高于同名的普通属性

五、多分支与swithc转换

多分支

<script>        
 let score = 120;
      if (score >= 60 && score < 80) {
        console.log("合格");
      } else if (score >= 80 && score <= 100) {
        console.log("学霸");
      }
      // 判断成绩是否合法
      else if (score > 100 || score < 0) {
        console.log("非法数据");
      } else {
        console.log("补考");
      }
  </script>

图示：

多分支与swithc转换

<script>
      let = 120;
      switch (true) {
        case score >= 60 && score < 80:
          console.log("合格");
          break;
        case score >= 80 && score <= 100:
          console.log("学霸");
          break;
        // 判断成绩是否合法
        case score > 100 || score < 0:
          console.log("非法数据");
          break;
        default:
          console.log("补考");
      }

switch来简化多分支
switch是严格匹配

六、三元运算

<script>
     let score = 90;
      console.log(score >= 60 ? "及格" : "补考");
</script>