Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 模板字面量、参数解构解释与函数bind,call,apply的理解
Blogger Information
Blog 29
fans 0
comment 0
visits 18424
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
模板字面量、参数解构解释与函数bind,call,apply的理解
CC
Original
578 people have browsed it

模板自变量与标签函数

  • 模板字面量写法

    模板字面量组成
    1.字符串 字面量
    2.// 2.变量或表达式: a, b, (a+b)

    1. let a = 1,b=2;
    2. let res = a+"+"+b+"="+(a+b);
    3. console.log(res);
    4. console.log('----');
    5. res=`${a}+${b}=${(a+b)};`
    6. console.log(res);
  • vue的模板字面量
    1. let menu = ['首页', "视频", "文章"];
    2. let htmlstr = ` 
    3. <ul>
    4. <li><a href="">${menu[0]}</a></li>
    5. <li><a href="">${menu[1]}</a></li>
    6. <li><a href="">${menu[2]}</a></li>
    7. </ul>`;
    8. console.log(htmlstr);
  • 标签函数
    1. // 箭头函数函数名（hello）=传参（name）=>return(alert)
    2. let hello=name =>alert(name);
    3. // 箭头函数无参数不能省（）
    4. let ren =()=>console.log('人');
    5. hello('天泵老师')
    6. hello`天彭老师`
    7. ren()

    解构赋值

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

    数组解构

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

    对象解构

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

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

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

    对象传参

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

对象字面量简化

  1. let user = {
  2.     userName: "天棚老师",
  3.     id: "001",
  4.     getinfo: function () {
  5.         // 模板字面量
  6.         return `${this.userName}(${this.id})`;
  7.     },
  9. }
  10. console.log(user.getinfo());
  11. let { userName, id } = user;
  12. console.log(userName, id)
  13. // 当属性与同一个作用域中的变量同名时，可以直接使用属性来引用变量值
  14. user = {
  15.     userName,
  16.     id,
  17.     getinfo: function () {
  18.         // 模板字面量
  19.         return `${this.userName}(${this.id})`;
  20.     },
  22. }
  24. console.log("简化后的：",userName, id)

bind,call,apply的解释

  1. function hello(name) {
  2.     this.name = name;
  3.     console.log(this.name);
  4.   }
  5.   const obj = {
  6.     name: "admin",
  7.   };
  9.   // 经典调用
  10.   console.log(hello("朱老师"));
  11.   // bind()不会立即执行,只返回一个函数声明
  12.   let f = hello.bind(obj, "天蓬老师");
  13.   console.log(f());
  15.   // call/apply立即执行
  16.   f = hello.call(obj, "灭绝老师");
  17.   console.log(f);
  18.   f = hello.apply(obj, ["西门老师"]);
  19.   console.log(f);
  21.   // bind()应用案例: 动态改变this
  22.   document.querySelector("button").addEventListener(
  23.     "click",
  24.     function () {
  25.       console.log(this.name);
  26.       console.log(this);
  27.     }.bind({ name: "猫科动物" })
  28.   );

访问器属性

将方法伪造成一个属性

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>访问器属性伪造属性</title>
  7.   </head>
  8.   <body>
  9.     <script>
  10.       const product = {
  11.         data: [
  12.           { name: "电脑", price: 5000, num: 5 },
  13.           { name: "手机", price: 4000, num: 10 },
  14.           { name: "相机", price: 8000, num: 3 },
  15.         ],
  16.         // getAmounts() {
  17.         //   return this.data.reduce((t, c) => (t += c.price * c.num), 0);
  18.         // },
  19.         // 访问器属性
  20.         // 将方法伪造成一个属性
  21.         get total() {
  22.           //   return this.getAmounts();
  23.           return this.data.reduce((t, c) => (t += c.price * c.num), 0);
  24.         },
  26.         set setPrice(price) {
  27.           this.data[1].price = price;
  28.         },
  29.       };
  31.       //   console.log("总金额 :", product.getAmounts());
  32.       console.log("总金额 :", product.total);
  33.       console.log(product.data[1].price);
  34.       product.setPrice = 9988;
  35.       console.log(product.data[1].price);
  36.     </script>
  37.   </body>
  38. </html>
  • 深拷贝：值传递
  • 浅拷贝：引用传递
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