模板字面量、参数解构解释与函数bind,call,apply的理解 -

模板自变量与标签函数

模板字面量写法

模板字面量组成
1.字符串字面量
2.// 2.变量或表达式: a, b, (a+b)
let a = 1,b=2;
let res = a+"+"+b+"="+(a+b);
console.log(res);
console.log('----');
res=`${a}+${b}=${(a+b)};`
console.log(res);

vue的模板字面量

let menu = ['首页', "视频", "文章"];
let htmlstr = ` 
<ul>
<li><a href="">${menu[0]}</a></li>
<li><a href="">${menu[1]}</a></li>
<li><a href="">${menu[2]}</a></li>
</ul>`;
console.log(htmlstr);

标签函数

// 箭头函数函数名（hello）=传参（name）=>return(alert)
let hello=name =>alert(name);
// 箭头函数无参数不能省（）
let ren =()=>console.log('人');
hello('天泵老师')
hello`天彭老师`
ren()

解构赋值

快速从集合数据（数组/对象）解构出来

数组解构

let [a,b,c]=[1,2,3];
console.log(a,b,c);

let [a,b,...c]=[1,2,3,4,5];
console.log(a,b,c);

let [,,a,,]=[1,2,3,4,5];
console.log(a);

对象解构

let { id, name } = { id: 10, name: "手机" }
console.log(id, name)

参数解构（vue中常用）
数组传参

let sum =([a,b])=>a+b;
console.log(sum([1,2]))

对象传参

let tec= ({name,num})=>[name,num];
console.log(tec({name:"陈",num:"1511"}))

对象字面量简化

let user = {
    userName: "天棚老师",
    id: "001",
    getinfo: function () {
        // 模板字面量
        return `${this.userName}(${this.id})`;
    },
}
console.log(user.getinfo());
let { userName, id } = user;
console.log(userName, id)
// 当属性与同一个作用域中的变量同名时，可以直接使用属性来引用变量值
user = {
    userName,
    id,
    getinfo: function () {
        // 模板字面量
        return `${this.userName}(${this.id})`;
    },
}
console.log("简化后的：",userName, id)

bind,call,apply的解释

function hello(name) {
    this.name = name;
    console.log(this.name);
  }
  const obj = {
    name: "admin",
  };
  // 经典调用
  console.log(hello("朱老师"));
  // bind()不会立即执行,只返回一个函数声明
  let f = hello.bind(obj, "天蓬老师");
  console.log(f());
  // call/apply立即执行
  f = hello.call(obj, "灭绝老师");
  console.log(f);
  f = hello.apply(obj, ["西门老师"]);
  console.log(f);
  // bind()应用案例: 动态改变this
  document.querySelector("button").addEventListener(
    "click",
    function () {
      console.log(this.name);
      console.log(this);
    }.bind({ name: "猫科动物" })
  );

访问器属性

将方法伪造成一个属性

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>访问器属性伪造属性</title>
  </head>
  <body>
    <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>
  </body>
</html>

深拷贝：值传递
浅拷贝：引用传递