定制开发ES6笔记————let，箭头函数，剩余参数

目录

 

一.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. <!DOCTYPE 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>Document</title>
  9. </head>
  10. <!-- 点击按钮   2s后显示：文字被点击，在点击出现文字：点击被取消。 -->
  11. <!-- （附加：点击10次后提示“今日点击次数已上限，按钮变成灰色”） -->
  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);

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发