PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > ES6:JS基础知识扩展

ES6:JS基础知识扩展

李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰
李东亚¹⁸⁰³⁹⁵⁴⁰¹²⁰ 原创
2021年01月06日 15:23:23 810浏览

变量赋值

1.原始类型变量的值传递:把自己的值传个过去,后当前变量就和新变量没有关系了
2.数组以及对象的引用传递:两个变量指向同一个地址的值,等于起别名

  • 只要改变其值,所有引用的变量都同步改变

变量赋值在函数参数中全部都是值传递;

  • 数组和对象整体赋值更新才是值传递

模板字面量和标签函数

1.模板字面量:

  • 模板字面量用反引号` 作为界定符
  • 模板字面量中可以使用变量,用${}包括界定
  • 模板字面量可以保留多行中的格式

2.标签函数:

  • 标签函数定义与普通函数一样,但调用时实参是模板字面量
  • 参数:第一参数默认接收模板字面量中的字符组成的数组,后面的变量依次接收模板字面量中的参数
  • 标签函数在使用时:传入的值(实参)是模板字面量,不需要小括号,直接标签函数名+模板字面量即可

解构赋值

1.快速从集合数据(数组/对象)解构出独立变量
2.解构赋值两边类型必须一致
3.对象解构可以别名解构,例如

  1. ({name:username,age:userage}={name:"ldy",age:20});
  2. console.log(username,userage);

4.解构赋值也可以用于函数的参数中

对象简化:

1.属性,如果全局声明赋值了相同的变量,在对象内就可以简写:变量即可;
2.对象中的方法:可以通过匿名函数和箭头函数简写

bind|call|apply:把函数绑定到指定对象上

1.bind(obj,参数)返回的是一个函数声明,并不立即执行
2.apply和cal绑定并立即执行
3.如果函数中有this,bind|call|apply可以动态改变函数的this指向
4.apply的第二个参数必须是个数组;例如: func.apply(obj,[argumet])

对象的访问器属性

1.访问属性的关键字get(访问)和set(设置) ,后跟一个函数;
2.访问属性优先级高于同名普通属性

JS循环语句:

1.单分支if(){};
2.双分支if(){}else{};
3.多分支if(){}else if(){} …..else{};
4.switch(){case 值: 语句 break; ……;default:语句;}
5.break和continue关键字;

代码演练
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title></title>
  8. </head>
  9. <body>
  10. </body>
  11. <script type="text/javascript">
  12. // 箭头函数 中this指向
  13. let user={
  14. name:"ldy",
  15. age:20,
  16. getInfo:function(){
  17. console.log(this.name,this.age);
  18. console.log(this);
  19. }
  20. }
  21. user.getInfo();
  22. function get(){
  23. console.log(this);
  24. }
  25. get();
  26. // 原始类型的值传递
  27. let a=1;
  28. let b=a;
  29. console.log(a,b);
  30. a=2;
  31. console.log(a,b);
  32. // 数组和对象的引用传递,修改的是地址中的值,所有引用的输出值都改变,不论在什么位置使用,只要值改变都跟着改变
  33. let item1={
  34. name:"ldy",
  35. age:12,
  36. }
  37. let item2=item1;
  38. console.dir(item1);
  39. console.dir(item2);
  40. item1.age=30;
  41. console.dir(item1);
  42. console.dir(item2);
  43. // 函数参数值传递:数组和对象整体赋值
  44. console.log("&&&&&&&&&&&&&&");
  45. function add(o){
  46. o.a=10;
  47. console.log(o);
  48. }
  49. let o={
  50. a:1,
  51. b:"ldy"
  52. }
  53. console.dir(o);
  54. add(o);
  55. function add1(o){
  56. o={};
  57. console.dir(o);
  58. }
  59. add1(o);
  60. // 模板字面量
  61. let username="ldy";
  62. let userage=30;
  63. let User=`我是${username},今年${userage}岁`;
  64. console.log(User);
  65. // 标签函数
  66. console.log('00000000000000000000000000');
  67. function show(string,name,age){
  68. console.log(string);
  69. console.log(name,age);
  70. }
  71. show(User);
  72. // 标签函数:直接使用字面量为参数,不能用变量代替
  73. show`我是${username},今年${userage}岁`;
  74. //解构赋值
  75. let arr=[1,2,3,4];
  76. [a,b,c,d]=arr;
  77. console.log(a,b,c,d);
  78. ({name:username,age:userage}={name:"ldy",age:20})
  79. console.log(username,userage);
  80. // 对象简化
  81. console.log("对象简化");
  82. let user10={
  83. username,
  84. userage,
  85. getinput(){
  86. console.log(username,userage);
  87. },
  88. getin:()=>{
  89. console.log(username,userage);
  90. }
  91. }
  92. user10.getinput();
  93. user10.getin();
  94. console.log("&&&&&&&&&&&&&&&&&&&&&&&&&");
  95. // let func = ()=>console.dir(this);
  96. function func(name){
  97. // return this;
  98. console.log(this.name);
  99. this.name=name;
  100. console.log(this.name);
  101. console.log(this);
  102. }
  103. const obj={
  104. name:"ldy",
  105. }
  106. // console.log(func('ldy'));
  107. // func("dongya");
  108. // let f=func.bind(obj,"ddd");
  109. // f();
  110. func.apply(obj,["dy"]);//参数必须实个数组形式
  111. func.call(obj,"dy2");
  112. console.log("^^^^^^^^^^^^^^^^^^^^^^^^^");
  113. let obj1={
  114. name:'ldy',
  115. age:31,
  116. set sname(val){
  117. this.name=val;
  118. },
  119. get gname(){
  120. return this.name;
  121. }
  122. }
  123. console.log(obj1.name);
  124. obj1.sname="lll";
  125. console.log(obj1.name);
  126. if(obj1.age<18){
  127. console.log('未成年')
  128. }else if(obj1.age>18&&obj1.age<20){
  129. console.log('成年人')
  130. }else{
  131. console.log('无法判断');
  132. }
  133. </script>
  134. </html>

运行结果

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议