当前位置: 首页 > Web前端 > JavaScript

ES6知识点总结

时间:2023-03-27 17:27:55 JavaScript

1、let和块级作用域for(leti=0;i<3;i++){leti="foo";console.log(i)}打印输出等价于leti=0;if(i<3){leti="foo";console.log(i);}i++;if(i<3){让i="foo";console.log(i);}i++;if(i<3){让i="foo";console.log(i);}i++;2、constconst声明的常量是不可修改的,意思是声明后的常量不能重定向到新的地址,并不代表成员数据不能修改。最佳实践:不要用var,尽量用const,let3一起用,解构数组arrayconstarr=[1,2,3]const[a,b,c]=arr;console.log(a,b,c)打印1,2,3constarr=[1,2,3]const[,,c]=arr;console.log(c)打印3constarr=[1,2,3]const[a,...rest]=arr;console.log(rest)打印[2,3]...运算符只能放在在最后一个地方使用constarr=[1,2,3]const[a,b,c,d=4]=arr;console.log(a,b,c,d)的长度大于数组解构,如果不给默认值,会提示undefined。4.对象解构constobj={name:'a',age:1};常量名称=“b”;const{name:objName}=obj;console.log(name)当解构对象与定义的常量同名时,可以将解构后的变量重命名为objName。此时打印出来的名字是b,程序不会报错。5.templatestringtaggedtemplatestringconststr=console.log`howareyou`打印出来一个数组标签是一个函数。为什么数组constprint=(strs)=>{console.log(strs)}constname1='jim'constname2='tom'conststr=print`${name1}你好吗,${name2}`print打印的内容是模板标签分割后的内容。模板标签中可能有嵌入的表达式。数组其实就是按照表达式划分后的静态内容,所以是数组。模板标签函数也可以接收模板字符串中可能出现的表达式的返回值constname1='jim'constname2='tom'constprint=(strs,name1,name2)=>{console.log(strs,name1,name2)}conststr=print`${name1}howareyou,${name2}`print6、字符串扩展方法的开头和结尾,中间的查找方法startsWith()、endsWith(),包括().conststr='heisaman.'console.log(str.startsWith('he'),str.endsWith('.'),str.includes('is'),)7,默认值参数的是一个函数参数是可选的参数值。函数体中的判断方法应该判断是否为undefinedfunctionfoo(para){para=para===undefined?true:false}8、箭头函数和this。箭头函数中的this总是指向当前作用域。constperson={name:"tom",say:function(){console.log(`我的名字是${this.name}`)},arrowSay:()=>{console.log(`我的名字是${this.name}`)}}person.say();person.arrowSay()打印以下另一种情况constperson={name:"tom",asyncSay:function(){setTimeout(function(){console.log(`我的名字是${this.name}`)},(1000));},asyncArrowSay:function(){setTimeout(()=>{console.log(`mynameis${this.name}`)},(1000));}}person.asyncSay();person.asyncArrowSay()打印的第一行未定义是因为setTimeout中的函数最终会在全局对象对象上调用,当前作用域无法获取到对象,得到的是对象的全球范围。一般的解决办法是加一个_this来保存当前的this。借助闭包机制const_this=this;console.log(`mynameis${_this.name}`),第二行可以打印tom,因为当前的this总是指向当前作用域。9.计算属性名可以包含在[]中以指示动态属性名。constobj={[Math.random()]:1,method(){console.log(this);}}obj.method()10、Object.assign方法Object.assign()方法用于合并对象。第一个参数是目标对象,方法的返回值是目标对象。constsource={a:1,b:2,}consttarget={a:3,c:4}constresult=Object.assign(target,source);console.log(result)console.log(result===target)这个方法常用于复制一个对象11、Object.isObject.is()用于判断两个对象是否相等console.log(0==false,0===false,+0===-0,NaN===NaN,Object.is(+0,-0),Object.is(NaN,NaN))12、proxy没有多少目前联系。constperson={name:"tom",age:18,}constpersonProxy=newProxy(person,{//监听器对象访问get(target,property){returnpropertyintarget?target[property]:"default"},//为代理目标设置属性set(target,property,value){if(property==="age"){if(!Number.isInteger(value)){thrownewTypeError(`${value}isnotinteger`)}}target[property]=value}})personProxy.age=20personProxy.gender=trueconsole.log(personProxy.name)console.log(personProxy.any)他比defineProperty更强大,只能监听For对象读写,前者可以监控更多的操作,也可以监控数组的变化。constarr=[];constarrProxy=newProxy(arr,{set(target,property,value){console.log("Listeningto:",property,value);target[property]=value;returntrue;//表示设置成功}})arrProxy.push(1);arrProxy.push(2)可以确定下标13,for...of循环可以在for...of循环中使用break关键字,但是forEach不行。for...of不仅可以遍历数组,还可以遍历伪数组对象来遍历map对象constm=newMap();m.set('a',1);m.set('b',2);for(letiofm){console.log(i)}//使用数组结构的方法for(let[key,value]ofm){console.log(key,value)}14,Generator实现了一个数字Maker//惰性执行函数*createidMaker(){letid=1;while(true){yieldid++;}}constidMaker=createidMaker();console.log(idMaker.next());console.log(idMaker.next().value);console.log(idMaker.next().value);console.log(idMaker.next().value);console.log(idMaker.next().value);使用Generator函数迭代器方法constobj={value:[1,2,3],english:['a','b','c'],word:['one','two','three'],[Symbol.iterator]:function*(){constall=[...this.value,...this.english,...this.word]for(constitemofall){yielditem}}}for(constitemofobj){console.log(item)}15、ES2016includes()方法用于数组查找,indexOf方法找不到NaNconstarr=['a',1,NaN,false]console.log(arr.indexOf('a'));console.log(arr.indexOf(NaN));console.log(arr.indexOf(false));console.log(arr.includes(NaN))指数运算符console.log(Math.pow(2,10));console.log(2**10)16、ES2017对象扩展方法constobj={a:1,b:2}//Object.values()对象值集合console.log(Object.values(obj))//对象.entries()数组方法返回对象中的键值对,转换为Map结构console.log(Object.entries(obj))for(let[key,value]ofObject.entries(obj)){console.log(key,value)}console.log(newMap(Object.entries(obj)))String.property.padStart,String.property.padEnd打印对象时,因为长度不一样,看起来不一致//String.property.padStart,String.property.padEndconstperson={tom:5,jerry:16,williams:120}for(let[name,age]ofObject.entries(person)){console.log(name,age)}console.log('String.property.padStart,String.property.padEnd')console.log('用给定的字符串填充目标字符串的开始和结束位置')for(let[name,age]ofObject.entries(person)){//padEnd固定长度为15个字符,空白处用-console.log(`${name.padEnd(15,'-')}|${age.toString().padStart(3,'0')}`)}