Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 4.01模板字面量和标签函数
Blogger Information
Blog 33
fans 1
comment 0
visits 21896
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
4.01模板字面量和标签函数
冰雪琉璃
Original
501 people have browsed it

值传递

1.适用类型

  • 基本数据类型
    1.string，number,boolean,undefined, null.
  • 传参
  • 深拷贝
  1. 实例代码
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>值传递和引用传递</title>
    6. </head>
    7. <body>
    8. <script type="text/javascript">
    9. //赋值
    10. let a=1;
    11. let b=2;
    12. console.log("a=%d",b=%d",a,b");
    13. //更新a
    14. a=3;
    15. console.log("a=%d,b=%d",a,b);
    16. </script>
    17. </body>
    18. </html>

    引用传递

    1.适用类型
  • 引用数据类型
    1.Array, Function,object.
  • 浅拷贝
    2.实例代码
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>值传递和引用传递</title>
    6. </head>
    7. <body>
    8. <script type="text/javascript">
    9. let obj1={
    10. a:1,
    11. b:2,
    12. }
    13. console.log("obj1=%o",obj1);
    14. let obj2=obj1;
    15. console.log("obj2=%o",obj2);
    16. console.log(obj1===obj2);
    17. //更新obj1.
    18. //对象使用点来访问内部成员.
    19. obj1.a=4;
    20. console.log("obj1=%o",obj1);console.log("obj2=%o",obj2);
    21.  </script>
    22. </body>
    23. </html>
    3.传参
    1.实例代码
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>值传递和引用传递</title>
    6. </head>
    7. <body>
    8. <script type="text/javascript">
    9. const f1=function(x){
    10.    x=10;
    11. };
    12. let m=5;
    13. //m是入参
    14. f1(m);
    15. console.log("m=%o",m);//5
    16. //上述代码的简化.
    17. const f1=(x)=>(x=10);
    18. let m=5;
    19. f1(m);
    20. console.log("m=%o",m);
    21. const f2=(x)=>(x.a=10);
    22. let o={a:1,b:2};
    23. f2(o);
    24. console.log("0.a=",o.a);
    25.  </script>
    26. </body>
    27. </html>
    2.模板字面量
    1.组成部分
    • 字符串字面量
    • 插值
    1. 实例代码
      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4. <meta charset="UTF-8">
      5. <title>模板字面量和标签函数</title>
      6. </head>
      7. <body>
      8. <script type="text/javascript">
      9. let name="赵老师";
      10. // let str="hello"+name;//hello 赵老师(传统方式)
      11. //运用${name}插值方式获取元素
      12. let str=`hello ${name}`;
      13. console.log(str)//hello 赵老师
      14. //模板字面量将表达式和插值嵌入到字符串
      15. let menus=['首页','导航','个人中心'];//menus[0],menus[1],menus[2]
      16. //字符串字面量
      17. let htmlStr=`
      18. <nav>
      19. <a href="">${menus[0]}</a>
      20. <a href="">${menus[1]}</a>
      21. <a href="">${menus[2]}</a>
      22. </nav>
      23. `;
      24. console.log(htmlStr);
      25. </script>
      26. </body>
      27. </html>
      3.标签函数
    2. 参数约定
    • 第一个参数:所有字符串字面量组成的数组
    • 第二个参数:插值组成的数组
      2.实例代码
      1. <!DOCTYPE html>
      2. <html lang="en">
      3. <head>
      4. <meta charset="UTF-8">
      5. <title>标签函数</title>
      6. </head>
      7. <body>
      8. <script type="text/javascript">
      9. // a,b代表插值,strs代表字符串字面量
      10. let sum=(strs,a,b)=>{
      11. console.log(strs);
      12. console.log(a,b);
      13. }
      14. let a=48;
      15. let b=12;
      16. sum `${a}+${b}=`;//60
      17. //归并参数
      18. let sum=(strs,...arr)=>{
      19. console.log(strs);
      20. console.log(arr);
      21. }
      22. let c=12;
      23. sum `${a}+${b}+${c}=`;//72
      24. </script>
      25. </body>
      26. </html>
      4.解构赋值
      • 对象解构
      • 参数解构
        1要求
      • 等号左边要求与等号右边一样.
        5.实例代码1
        1. <!DOCTYPE html>
        2. <html lang="en">
        3. <head>
        4. <meta charset="UTF-8">
        5. <title>数组解构</title>
        6. </head>
        7. <body>
        8. <script type="text/javascript">
        9. let [a,b,c]=[1,2,3];
        10. console.log(a,b,c);//123
        11. let [a,b]=[1,2,3]
        12. console.log(a,b,c)//c is undefined;
        13. [a,b]=[1,2,3]
        14. console.log(a,b)//1,2
        15. [a,b,c="js"]=[1,2]
        16. console.log(a,b,c)//1,2 js
        17. [a,b,...c]=[1,2,3,4,5,6,7,8];
        18. console.log(a,b,...c);//1,2,3,4,5,6,7,8
        19. [,,,a,,,,]=[1,2,3,4,5,6,7,8]
        20. console.log(a);//4
        21. </script>
        22. </body>
        23. </html>
        6.实例代码2
        1. <!DOCTYPE html>
        2. <html lang="en">
        3. <head>
        4. <meta charset="UTF-8">
        5. <title>传统的数字交换</title>
        6. </head>
        7. <body>
        8. <script type="text/javascript">
        9. //传统的数字交换
        10. let x=1;
        11. y=10;
        12. t;
        13. t=x;
        14. t=y;
        15. x=y;
        16. console.log(x,y)//x=10,y=1
        17. //简便方法是
        18. let a=10;b=1;
        19. [a,b]=[b,a]//a=1,b=10
        20. </script>
        21. </body>
        22. </html>
        7.对象解构
        1. <!DOCTYPE html>
        2. <html lang="en">
        3. <head>
        4. <meta charset="UTF-8">
        5. <title>对象解构</title>
        6. </head>
        7. <body>
        8. <script type="text/javascript">
        9. let item={
        10. id:10,
        11. name:"小红"
        12. };
        13. let id=item.id;
        14. let name=item.name;
        15. console.log(id,name);//id:10,name:小红
        16. //一致
        17. //{id,name}={id:10,name:"小红"}
        18. ({id,name}={id:10,name:"电脑"});
        19. console.log("id=%o,name=%o",id,name);//id:10,name:电脑
        20. </script>
        21. </body>
        22. </html>
        8.数组传参
        1. <!DOCTYPE html>
        2. <html lang="en">
        3. <head>
        4. <meta charset="UTF-8">
        5. <title>数组传参</title>
        6. </head>
        7. <body>
        8. <script type="text/javascript">
        9. let sum=([a,b])=>a+b;
        10. console.log(sum([1,2]));//3
        11. </script>
        12. </body>
        13. </html>
        9.对象传参
        1. <!DOCTYPE html>
        2. <html lang="en">
        3. <head>
        4. <meta charset="UTF-8">
        5. <title>对象传参</title>
        6. </head>
        7. <body>
        8. <script type="text/javascript">
        9. let getUser=({name,email})=>[name,email];
        10. console.log(getUser({name:"小红",email:"12@qq.X-UA-Compatible"}));
        11. </script>
        12. </body>
        13. </html>
        10.bind, apply,call介绍
        共同点：三种都可以改变this的指向。
        不同点：
        1. bind只绑定不执行。
          2.call，apply，绑定后立即执行，但参数不一样。
          3.call，参数是离散一个一个传入的。
          4.apply参数以数组得形式统一传入。
          实例演示：
          1. <!DOCTYPE html>
          2. <html lang="en">
          3. <head>
          4. <meta charset="UTF-8">
          5. <title>数组传参</title>
          6. </head>
          7. <body>
          8. <script type="text/javascript">
          9. function hello(name, name2){
          10. //this:执行上下文，程序运行环境。
          11. //this当前是全局window
          12. this.name=name;
          13. console.log(this)//window
          14. }
          15. hello("小明");
          16. //使用bind()改变函数中this的指向。
          17. const obj={
          18. name:"小李",
          19. };
          20. //bind()只绑定不执行
          21. let f=hello .bind(obj."admin");
          22. console.log(f())//undefined
          23. console.log(this)//name:admin
          24. //如果函数中的this被重新绑定之后，要求立即执行用apply, call.
          25. f=helo.call(obj,"小红");
          26. console.log(this)//name:小红
          27. hello.apply(obj,['小李','小红','小刘']);
          28. console.log(this)//name:小李，小红，小刘
          29. </script>
          30. </body>
          31. </html>
  1. 访问器属性
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>访问器属性</title>
    6. </head>
    7. <body>
    8. <script type="text/javascript">
    9. //对象成员：属性，方法
    10. //属性：类似于变量
    11. //方法：类似于函数
    12. const product={
    13. data:[
    14. {id:1,name:"电脑",price:20000, num:1},
    15. {id:2,name:"手机",price:10000, num:1},
    16. {id:3,name:"idpan",price:20000, num:1},
    17. {id:4,name:"电视机",price:20000, num:1},
    18. ],
    19. //计算总金额
    20. //方法
    21. getAmounts：function(){
    22. return this.data.reduce((t,c)=>(t+=c.price*c.num),0);
    23. },
    24. };
    25. console.log("总金额=",product.getAmounts());
    26. //将一个方法包装成一个属性,get是访问器属性的读操作
    27. get total(){
    28. return this.data.reduce((t,c)=>(t+=c.price*c.num),0)
    29. }
    30. //set 是访问器属性的写操作，
    31. set serPrice(price){
    32. this.data[1].price=price;
    33. };
    34. product.serPrice=8000;
    35. console.log(product.data[1].price);//将改变product第一个产品的价格
    36. //用属性的方式来获取总金额
    37. console.log("总金额=",product.total);
    38. </script>
    39. </body>
    40. </html>
  2. 访问器属性的优先级
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>访问器属性的优先级</title>
    6. </head>
    7. <body>
    8. <script type="text/javascript">
    9. let user={
    10. data:{name},
    11. get name(){
    12. return this.data.name;
    13. },
    14. set name(v){
    15. this .data.name=v;
    16. },
    17. };
    18. //访问器属性的优先级高于同名的普通属性。
    19. user.name="小六";
    20. console.log(user.name);//name:小六
    21. </script>
    22. </body>
    23. </html>
    3.作用域和闭包
    作用域的分类
    1.函数作用域
    2.块作用域
    3.全局作用域
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>数组传参</title>
    6. </head>
    7. <body>
    8. <script type="text/javascript">
    9. //全局作用域对象是window
    10. console.log(this)//window
    11. //函数作用域
    12. let site="我是全局变量"
    13. function getSize(){
    14. //site是声明在函数外部的全局变量
    15. //在函数内部可以访问外部的变量，但是函数外部的不能访问内部的变量。
    16. return size;
    17. }
    18. console.log(getSize());//我是全局变量
    19. //块作用域
    20. //用于if，while语句中
    21. if(条件){
    22.  //满足条件的语句
    23. };
    24. while(条件){
    25.   //满足条件的语句
    26. }
    27. </script>
    28. </body>
    29. </html>
  • 总结：函数作用域是一个查询的过程，先在自身查找要输出的变量，如果没有则一级一级往上查找，一直没有则返回undefined;它的查找过程构成了作用域链。var声明的变量不支持块作用域。
  1. 闭包
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>访问器属性</title>
    6. </head>
    7. <body>
    8. <script type="text/javascript">
    9. let c=100;
    10. function  sum(a,b){
    11. return a+b+c;
    12. }
    13. console.log(sum(4,5));109
    14. //上述产生了闭包
    15. //通过sum()函数之外的c变量可以产生闭包
    16. //c属于自由变量
    17. </script>
    18. </body>
    19. </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