您好,登录后才能下订单哦!
今天小编给大家分享一下ES6之let、箭头函数和剩余参数怎么用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
关键字用来声明块级变量。
-- 特点就是在{}声明具有块级作用域,var变量无此特点。
-- 防止循环变量编程全局变量。
-- let 关键词无变量提升。
-- let 关键词有暂时性死区的特点。{先声明后使用}
声明常量,常量就是值(内存地址)不能变化的量。
对象的本身是可变的,所以可以添加属性,但是地址不可改变
使用 var 声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象
- 使用 let 声明的变量,其作用域为该语句所在的代码块内,不存在变量提升
- 使用 const 声明的是常量,在后面出现的代码中不能再修改该常量的值
- 使用let,const的声明的变量不属性顶层对象,返回undefined。
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,默认值才会生效。
根据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)//当属性没有的时候支持默认值
说明:对象的解构赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。
let [a,b,c] = "hello"; console.log(a);//h console.log(b);//e console.log(c);//l
//原js写法 function myFun(k,v){ return k + v; } //es6 写法 const myFun1 = (k,v) => { return k+v; }
如果形参或者代码块只有一句可以简写:
Const myFun = (k) => {return k+1;} 简写: Const myFun = k => k +1;
如果函数作为对象的方法调用,this指向的是这个上级对象,即调用方法的对象。
const person = { name:"张三", age:18, say:function(){ console.log(this.name);// 张三 这时候的this是person的对象 } } person.say();
myfun1();//对象是Windows myfun1.call(person1);//对象改变为person1
说明:两者的区别,myfun.call(person,18,29); myfun.apply(person,[18,29]);
箭头函数不绑定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: '张三'}
一:全局作用域下this指向 1:普通函数 function global(){ console.log(this);//window } global(); 2:箭头函数 const global = ()=>{ console.log(this);//window } global(); 二:对象里面的this指向 1:普通函数 const Person = {realname:"张三",age:19, say:function(){ console.log(this.realname);//当前的对象 "张三" } } Person.say(); 2:箭头函数 const Person = {realname:"张三",age:19, say:()=>{ console.log(this);//window } } Person.say(); 三:构造函数的this指向 1:普通函数 function Person(realname,age){ this.realname = realname; this.age = age; this.say = function(){ console.log(this); } } const P1 = new Person("张三",19); P1.say(); const P2 = new Person("李四",19); P2.say.call(P1);//原来李四,现在是张三 call和apply改变this指向,区别传输参数的区别 2:箭头函数 function Person(realname,age){ this.realname = realname; this.age = age; this.say = ()=>{ console.log(this); } } const P1 = new Person("张三",19); P1.say(); const P2 = new Person("李四",19); P2.say.call(P1);//不能改变箭头函数的this指向 总结:普通函数与箭头函数this的区别 1:普通的函数this与调用者有关,调用者是谁就是谁; 2:箭头函数的this与当时定义的上下文的this有关,this是静态的一旦定义了就无法改变
练习1:单击按钮2s后改变按钮文字:按钮被点击,在单击按钮改变文字:点击被取消。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <!-- 点击按钮 2s后显示:文字被点击,在点击出现文字:点击被取消。 --> <!-- (附加:点击10次后提示“今日点击次数已上限,按钮变成灰色”) --> <body> <button>点击</button> <script> let bth = document.querySelector("button") let flag = false let num=0 bth.addEventListener("click", function () { flag = !flag num++ if(num>10){ this.innerHTML="今日点击次数已上限" this.disabled=true this.style.backgroundColor="grey" return false } time1=setTimeout(() => { if (flag) { // console.log(this); this.innerHTML="文字被点击" } else{ this.innerHTML="点击被取消" } }, 100); }) </script> </body> </html>
剩余参数语法允许我们将一个不定数量的参数表示为一个数组,不定参数定义方式,这种方式很方便的去声明不知道参数情况下的一个函数。
1:rest参数 function demo(...nums){ console.log(nums);//数组 console.log(...nums);//解构数组 } demo(1,2,3); 2:rest参数 对象 function connect({username,...info}){ console.log(username); console.log(info); } connect( {username:"root",password:"123456",port:"3306"} ) 3:输出数组 const arr = [1,2,3]; console.log(...arr); 4:合并两个数组 const arr1 = [1,2,3]; const arr2 = [4,5,6]; console.log([...arr1,...arr2]); 5:将类数组转为数组 const liNode = document.querySelectorAll("li"); console.log(typeof [...liNode]); const arr1 = [1,2,3]; const arr2 = [...arr1];//复制数组 arr1[0] = 10; console.log(arr2); 6:剩余参数必须放入最后(rest参数) 不然报错 function demo(a,b,...nums){ console.log(nums);//数组 } demo(1,2,3,4,5);
以上就是“ES6之let、箭头函数和剩余参数怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。