前端知识点总结--ES6入门

1.var,let,constES6建议在函数中使用let来定义变量const来声明一个常量（类似于value不可更改的值,并且引用类型的地址不能改变)let和const只在最新的块中使用(花括号内)//1.let不能重复声明varn=10;varn=100;console.log(n)//100leta=10leta=100console.log(a)//SyntaxError'a'hasalreadybeendeclared//2.var可以改变全局作用域（变量提升）letcannotvarb=1{varb=10}console.log(b)//10letc=1{letc=10}console.log(c)//1//3。不能在同一范围内重新声明vard=1letd=2console.log(d)//SyntaxError'd'hasalreadybeendeclaredletd=1vard=2console.log(d)//SyntaxError'd'hasalreadybeendeclared//4.var改变同一个变量，不管范围vare=1{lete=2}console.log(e)//1letf=1{varf=2}console.log(f)//SyntaxError'f'已经声明//5。常量不能被重新赋值constA=[1,2];A.push=3;console.日志（A）；//[1,2,push:3]A=10;//Error这里的地址变了2.箭头函数，这个ES6箭头函数中的this指向函数定义的对象，而不是函数执行的对象。箭头函数后面没有自己的this，而this总是指向上一层的this，一层一层往上传递，直到找到自己的this函数。ES5函数中的this总是指向函数执行的对象，尤其是在非严格模式下，this有时会指向全局对象。b.箭头函数不能使用构造函数，因为它没有自己的this，无法实例化。C。箭头函数没有自己的this，所以函数中没有arguments对象。这里可以使用ES6扩展运算符代替。d.ES5函数的默认值赋值，函数的形参不能赋默认值，只能通过函数内部的workaround来实现。在ES6中，函数可以默认赋值。varfoo=function(){return1;};//等价于让foo=()=>1;箭头函数中的this指的不是窗口，而是对象本身。函数aa(){this.bb=1;setTimeout(()=>{this.bb++;//this指向aaconsole.log(this.bb);},500);}aa();//23。字符串模板语法不使用模板字符串varname='Yournameis'+first+''+last+'.'使用模板字符串varname=Yournameis${first}${last}.4.class提供关键字class来定义类。提供了关键字extends。继承一个类super()来执行父类的初始化函数。提供一个对象字面量并定义一个函数classAnimal{constructor(){console.log('Iamananimal');}}classPersonextendsAnimal{constructor(){super();console.log('我是程序员');}}letaa=newPerson();//我是动物//我是程序员5.解构解构赋值是ES6引入的一种高效简洁的赋值方式//通常是varfirst=someArray[0];var第二=someArray[1];var第三=someArray[2];//解构赋值let[first,second,third]=someArray;//比上面简洁多了//还有下面的例子let[,,third]=[1,2,3];控制台日志（第三）；//3let[first,...last]=[1,2,3];console.log(last);//[2,3]//对象解构let{name,age}={name:"lisi",age:"20"};console.log(name);//lisiconsole.log(年龄);//20//注意让{ept1}={};console.log(ept1);//undefinedlet{ept2}={undefined};控制台日志（ept2);//undefinedlet{ept3}={null};console.log(ept3);//空6。新方法is()方法比较两个目标对象，用于改进“===”方法NaN===NaN//falseObject.is(NaN,NaN);//trueassign()方法，用于给对象添加新的属性或者合并多个对象。consttarget={a:1};constsource1={b:2};constsource2={c:3};Object.assign(target,source1,source2);console.log(target);//{a:1,b:2,c:3}ES6为原型添加了一个新的Includes()方法，取代了传统的用于查找字符串的indexOf()方法。includes()：找到则返回true，未找到则返回false。indexOf()：返回元素的下标，不存在则返回-1。此外，还增加了startsWith()、endsWith()、padStart()、padEnd()、repeat()等方法，可用于搜索和补全字符串。letstr=`xiaoming`;console.log(str.includes(`xiao`));//true7.Symbol类型Symbol是ES6引入的第七种原始数据类型，Symbol()生成的所有值都是唯一的，可以从根本上解决对象属性过多导致属性名冲突被覆盖的问题。符号值由符号函数生成。一个对象的属性名现在可以有两种类型，一种是原来的字符串，一种是新加的符号类型。所有属于符号类型的属性名都是唯一的，可以保证不会与其他属性名不同而冲突。符号值可以显式转换为字符串。另外，Symbol值也可以转为布尔值，但不能转为数值。lets1=Symbol('foo');lets2=Symbol('foo');console.log(s1===s2)//falselets1=Symbol('foo');lets2=Symbol('bar');console.log(s1,typeof(s1));console.log(s2);s1.toString()//"Symbol(foo)"s2.toString()//"Symbol(bar)"console.log(s1,typeof(s1.toString()))console.log(s2)8.Set新的数据结构Set实例的成员类似于Array，是唯一的，不重复的。此功能使删除重复数据变得容易。让数组=[1,2,3,2,3];让set=newSet(array);控制台日志（设置）；//[1,2,3]leto1={age:11}leto2={age:12}letset=newSet([o1,o2]);console.log(set);//结果有两个对象，因为对象的内存地址不同leto2=o1;letset=newSet([o1,o2]);console.log(set);//结果中有一个对象，该对象的内存地址与property.size相同返回set集合方法的大小.add()<相当于数组的入栈()>.delete(value).has(value).clear()清除数组9.MapMap是ES6引入的一种类似于Object的新数据结构。Map可以理解为Object的超集，打破了传统的Objects以键值对的形式定义。对象的key不再局限于字符串，也可以是Object。letmap1=newMap()letobj={name:'tiger'}map1.set(obj,'hello')//设置键值对console.log(map1)//{{name:tiger}:hello}map1.set(1,'hello1')map1.set(2,'hello2')console.log(map1)//{{name:tiger}:hello,1=>"hello1",2=>"hello2"}//遍历键值对for(letitemofmap1){console.log(item);}//遍历键for(letitemofmap1.keys()){console.log(item);}//TraversingValuefor(letitemofmap1.value()){console.log(item);}10.PromiseobjectfunctionajaxPromise(){returnnewPromise(function(reslove,reject){console.log("正在执行。..");if(true){reslove("success")}else{reject("fail")}})}ajaxPromise().then(value=>{console.log(value);}).catch(err=>{console.log(err);})11、Generator函数执行Generator函数，返回一个遍历器对象，Generator函数中的每一次yield都相当于遍历器对象的next()方法，而可以通过next(value)方法传入一个自定义值来改变Generator函数的行为。定义函数时，需要加星号。例如：functiontest(){}在函数体中包含yield（暂停执行的标志）。当代码运行到yield时，会暂停执行，然后通过.next()让代码继续执行，直到下一次yield或函数体结束。function*demo(){console.log(1)yield111console.log(2)yield222console.log(3)return333}letg=demo()letval1=g.next()console.log('val1',val1)//print1,val1={value:111,done:false}letval2=g.next()//print2,val2={value:222,done:false}console.log('val2',val2)letval3=g.next()console.log('val3',val3)12.asyncfunctionasync函数是将Generator函数的星号（*）替换为async，yield替换为await，仅此而已。constgen=function*(){constf1=yieldreadFile('/etc/fstab');constf2=yieldreadFile('/etc/shells');console.log(f1.toString());console.log(f2.toString());};constasyncReadFile=asyncfunction(){constf1=awaitreadFile('/etc/fstab');constf2=awaitreadFile('/etc/shells');console.log(f1.toString());console.log(f2.toString());};async函数返回一个Promise对象，可以使用then方法添加回调函数。函数在执行时，一旦遇到await，会先返回，等待异步操作完成，然后在函数体中执行下面的语句。异步函数t(){vara=newPromise(function(resolve,reject){console.log(1);resolve(9);console.log(2);})varb=newPromise(function(resolve,reject){console.log(3);resolve(8);console.log(4);})console.log(5);b=等待b；一个=等待一个；控制台日志（b）；控制台日志（一）；console.log(6);}t();console.log(7);//12345789613.模块使用import取代require。//badconstmoduleA=require('moduleA');constfunc1=moduleA.func1;constfunc2=moduleA.func2;//goodimport{func1,func2}from'moduleA';//commonJS的写法varReact=require('react');varBreadcrumbs=React.createClass({render(){return