• ES6笔记————let，箭头函数，剩余参数

    目录

    一.let,var,const区别

    let

    const

    区别

    二，解构 

    1 数组解构

    2对象解构

    三，箭头函数 

    1 基础语法

    2 省略写法

    3 对象方法里的this

    4 apply/call调用时的this

    5 箭头函数中this

    8 箭头函数应用

    四，剩余函数

     

    一.let,var,const区别

    let

    关键字用来声明块级变量。

    -- 特点就是在{}声明具有块级作用域，var变量无此特点。

    -- 防止循环变量编程全局变量。

    -- let 关键词无变量提升。

    -- let 关键词有暂时性死区的特点。{先声明后使用}

    const

    声明常量，常量就是值（内存地址）不能变化的量。

    对象的本身是可变的，所以可以添加属性，但是地址不可改变

    区别

     使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象

    - 使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升

    - 使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值

    - 使用let，const的声明的变量不属性顶层对象，返回undefined。

    二，解构 

    1 数组解构

    let [x, y, ...z] = ['a'];

    x // "a"

    y // undefined

    z // []

    let[a,...c] = [1,2,3];//合并运算符可以展开数组也可合并数组

    console.log(c);//[2, 3]

    console.log(...c);//2 3

    let [x,y='2'] = ['a',undefined];

    console.log(y);//如果没有定义，可以用默认值

    说明：ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。

    2对象解构

    根据key解构

    let person = {name:"小帅",age:18};

    let {name,age,height} = person;

    console.log(name);//小帅

    console.log(age);//18

    console.log(height);//undefined

    说明：对象的解构与数组有一个重要的不同。数组的元素是按顺序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值，否则解构失败就是undefined。

    let { realname: myname,height=173 } = { realname: '张三', age: 18};

    console.log(Myname);//张三

    console.log(Myage)//18

    console.log(realname)//realname is not defined

    console.log(height)//当属性没有的时候支持默认值

    说明：对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

    .3 字符串解构

    let [a,b,c] = "hello";

    console.log(a);//h

    console.log(b);//e

    console.log(c);//l

    三，箭头函数 

    1 基础语法

    //原js写法

    function myFun(k,v){   

            return k + v;

    }

    //es6 写法

    const myFun1 = (k,v) => {

            return k+v;

    }

    2 省略写法

    如果形参或者代码块只有一句可以简写：

    Const myFun = (k) => {return k+1;} 简写：

    Const myFun = k =>  k +1;

    3 对象方法里的this

    如果函数作为对象的方法调用，this指向的是这个上级对象，即调用方法的对象。

    const person = {

                               name:"张三",

                               age:18,

                               say:function(){

                                      console.log(this.name);// 张三 这时候的this是person的对象

                               }

     }

    person.say();

    4 apply/call调用时的this

    myfun1();//对象是Windows

    myfun1.call(person1);//对象改变为person1

    说明：两者的区别，myfun.call(person,18,29); myfun.apply(person,[18,29]);

    5 箭头函数中this

    箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this。

    箭头函数中的this指向是它所定义（声明）的位置，可以简单理解成，定义箭头函数中的作用域的this指向谁，它就指向谁。

    const obj = { name: '张三'}

                     function fn () {

                             console.log(this);//this 指向 是obj对象

                             return () => {

                                     console.log(this);//this 指向 的是箭头函数定义的位置，那么这个箭头函数定义在fn里面，而这个fn指向是的obj对象，所以这个this也指向是obj对象

                             }

                     }

                   

    const resFn = fn.call(obj); //{ name: '张三'}

    resFn();//{ name: '张三'}

    1. 一：全局作用域下this指向
    2. 			1:普通函数
    3. 			function global(){
    4. 				console.log(this);//window
    5. 			}
    6. 			global();
    7. 			2：箭头函数
    8. 			const global = ()=>{
    9. 				console.log(this);//window
    10. 			}
    11. 			global();
    12. 			
    13. 			
    14. 			二：对象里面的this指向
    15. 			1:普通函数
    16. 			const Person = {realname:"张三",age:19,
    17. 			   say:function(){
    18. 				   console.log(this.realname);//当前的对象 "张三"
    19. 			   }
    20. 			}
    21. 			Person.say();
    22. 			
    23. 			2:箭头函数
    24. 			const Person = {realname:"张三",age:19,
    25. 			   say:()=>{
    26. 				   console.log(this);//window
    27. 			   }
    28. 			}
    29. 			Person.say();
    30. 			
    31. 			三：构造函数的this指向
    32. 			1:普通函数
    33. 			
    34. 			function  Person(realname,age){
    35. 				this.realname = realname;
    36. 				this.age = age;
    37. 				this.say = function(){
    38. 					console.log(this);
    39. 				}
    40. 			}
    41. 			const P1 = new Person("张三",19);
    42. 			P1.say();
    43. 			
    44. 			const P2 = new Person("李四",19);
    45. 			P2.say.call(P1);//原来李四，现在是张三 call和apply改变this指向，区别传输参数的区别
    46. 			
    47. 			
    48. 			2:箭头函数
    49. 			
    50. 			function  Person(realname,age){
    51. 				this.realname = realname;
    52. 				this.age = age;
    53. 				this.say = ()=>{
    54. 					console.log(this);
    55. 				}
    56. 			}
    57. 			const P1 = new Person("张三",19); 
    58. 			P1.say();
    59.  
    60. 			const P2 = new Person("李四",19);
    61. 			P2.say.call(P1);//不能改变箭头函数的this指向
    62. 			
    63. 			
    64. 			总结：普通函数与箭头函数this的区别
    65. 			1：普通的函数this与调用者有关，调用者是谁就是谁;
    66. 			2：箭头函数的this与当时定义的上下文的this有关，this是静态的一旦定义了就无法改变

    8 箭头函数应用

    练习1：单击按钮2s后改变按钮文字：按钮被点击，在单击按钮改变文字：点击被取消。

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9. head>
    12.  
    13. <body>
    14.     <button>点击button>
    15.     <script>
    16.         let bth = document.querySelector("button")
    17.         let flag = false
    18.         let num=0
    19.         bth.addEventListener("click", function () {
    20.             flag = !flag
    21.             num++
    22.             if(num>10){   
    23.                 this.innerHTML="今日点击次数已上限"
    24.                 this.disabled=true
    25.                 this.style.backgroundColor="grey"
    26.                 return false
    27.             }
    28.             time1=setTimeout(() => { 
    29.                 if (flag) {
    30.                     // console.log(this);
    31.                     this.innerHTML="文字被点击"
    32.                 }
    33.                 else{
    34.                     this.innerHTML="点击被取消"
    35.                 }
    36.             }, 100);
    37.  
    38.         })
    39.     script>
    40. body>
    41.  
    42. html>

    四，剩余函数

    剩余参数语法允许我们将一个不定数量的参数表示为一个数组，不定参数定义方式，这种方式很方便的去声明不知道参数情况下的一个函数。

    1. 1:rest参数
    2. 			function demo(...nums){
    3. 				console.log(nums);//数组
    4. 				console.log(...nums);//解构数组
    5. 			}
    6. 			demo(1,2,3);
    7. 			
    8. 			2:rest参数 对象
    9. 			function connect({username,...info}){
    10. 				console.log(username);
    11. 				console.log(info);
    12. 			}
    13. 			connect(
    14. 			   {username:"root",password:"123456",port:"3306"}
    15. 			)
    16. 			
    17. 			3:输出数组
    18. 			const arr = [1,2,3];
    19. 			console.log(...arr);
    20. 			
    21. 			4:合并两个数组
    22. 			const arr1 = [1,2,3];
    23. 			const arr2 = [4,5,6];
    24. 			console.log([...arr1,...arr2]);
    25. 			
    26. 			
    27. 			5:将类数组转为数组
    28. 			const liNode = document.querySelectorAll("li");
    29. 			console.log(typeof [...liNode]);
    30. 			
    31. 			const arr1 =  [1,2,3];
    32. 			const arr2 =  [...arr1];//复制数组
    33. 			arr1[0] = 10;
    34. 			console.log(arr2);
    35. 			
    36. 			
    37. 			6:剩余参数必须放入最后(rest参数) 不然报错
    38. 			function demo(a,b,...nums){
    39. 				console.log(nums);//数组
    40. 			}
    41. 			demo(1,2,3,4,5);

  • 相关阅读:
    【uni-app】常用组件和 API
    Edge的使用心得与深度探索
    在同一局域网中使用电脑访问手机内容
    hdu7419 2022杭电杯 Alice and Bob(博弈)(思维)
    C++多态
    【物联网】常见电子元器件（电阻、电容、电感、二极管、三极管）综合，详细分析原理及其应用
    Docker自定义镜像
    Centos Web Proxy(nginx)配置
    请问各位程序员，是我的思维方式有错误吗？
    在UnityUI中绘制线状统计图
  • 原文地址：https://blog.csdn.net/m0_45293340/article/details/126724657