ES6这些就够了.docx

第PAGE页码9页/总页数NUMPAGES总页数9页ES6这些就够了ES6这些就够了刚开始用vue或者react，很多时候我们都会把ES6这个大兄弟加入我们的技术栈中。但是ES6那么多那么多特性，我们需要全部都掌握吗？秉着二八原则，掌握好常用的，有用的这个可以让我们快速起飞。接下来我们就聊聊ES6那些可爱的新特性吧。1.变量声明const和let我们都是知道在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如:functionaa(){if(bool){vartest=helloman}else{console.log(test)}}以上的代码实际上是：functionaa(){vartest//变量提升if(bool){test=helloman}else{//此处访问test值为undefinedconsole.log(test)}//此处访问test值为undefined}所以不用关心bool是否为trueorfalse。实际上，无论如何test都会被创建声明。接下来ES6主角登场：我们通常用let和const来声明，let表示变量、const表示常量。let和const都是块级作用域。怎么理解这个块级作用域？在一个函数内部在一个代码块内部说白了{}大括号内的代码块即为let和const的作用域。看以下代码：functionaa(){if(bool){lettest=helloman}else{//test在此处访问不到console.log(test)}}let的作用域是在它所在当前代码块，但不会被提升到当前函数的最顶部。再来说说const。constname=luxname=joe//再次赋值此时会报错说一道面试题varfuncs=[]for(vari=0;ihelloworld`对于字符串es6当然也提供了很多厉害的方法。说几个常用的。//1.includes：判断是否包含然后直接返回布尔值letstr=hahayconsole.log(str.includes(y))//true//2.repeat:获取字符串重复n次lets=heconsole.log(s.repeat(3))//hehehe//如果你带入小数,Math.floor(num)来处理3.函数函数默认参数在ES5我们给函数定义参数默认值是怎么样？functionaction(num){num=num||200//当传入num时，num为传入的值//当没传入参数时，num即有了默认值200returnnum}但细心观察的同学们肯定会发现，num传入为0的时候就是false，此时num=200与我们的实际要的效果明显不一样ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。functionaction(num=200){console.log(num)}action()//200action(300)//300箭头函数ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。箭头函数最直观的三个特点。不需要function关键字来创建函数省略return关键字继承当前上下文的this关键字//例如：[1,2,3].map(x=>x+1)//等同于：[1,2,3].map((function(x){returnx+1}).bind(this))说个小细节。当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略{}；例如:varpeople=name=>hello+name//参数name就没有括号作为参考varpeople=(name,age)=>{constfullName=h+namereturnfullName}//如果缺少()或者{}就会报错4.拓展的对象功能对象初始化简写ES5我们对于对象都是以键值对的形式书写，是有可能出现键值对重名的。例如：functionpeople(name,age){return{name:name,age:age};}键值对重名，ES6可以简写如下：functionpeople(name,age){return{name,age};}ES6同样改进了为对象字面量方法赋值的语法。ES5为对象添加方法：constpeople={name:lux,getName:function(){console.log(this.name)}}ES6通过省略冒号与function关键字，将这个语法变得更简洁constpeople={name:lux,getName(){console.log(this.name)}}ES6对象提供了Object.assig