es6阮一峰 第三版pdf（ES6掌握指南——更加高效的JavaScript）

ES6掌握指南——更加高效的JavaScript ES6（ECMAScript2015）是JavaScript语言的一次重大更新，促进了JavaScript的常用设计模式，同时还引入了许多新的语言特性，包括块级作用域、箭头函数、模板字符串、解构赋值、扩展操作符、默认参数等等。这些新特性极大地提高了JavaScript的效率和可读性。在本文中，我们将深入探讨ES6的新特性，让你更好地掌握JavaScript。 一、块级作用域 1.1let和const关键字 ES6引入了let和const关键字，用于声明块级作用域的变量。与var关键字不同，let和const限制了变量的作用域，只在声明的块级范围内可见。 -let关键字：声明变量，可以在局部作用域中使用。通过let声明的变量不会被提升。 -const关键字：同样声明一个变量，但是声明后无法修改。 1.2块级作用域的应用 1.2.1循环计数器 在ES6之前，循环计数器只能在全局范围内使用或在函数内定义。这样会带来许多问题，特别是在多重嵌套循环时。ES6中可以使用let关键字在循环中创建局部区域。 for(leti=0;i<10;i++){ setTimeout(function(){ console.log(i); },1000); } 上面的代码会每隔一秒钟输出一个数字，但是使用var声明计数器会输出10个10。因为变量i在全局作用域中声明，所以每个setTimeout()调用中都指向同一个i值，而在loop中，setTimeout()只在最后一次“10次计算”时调用。 1.2.2函数作用域 ES6中let语句不仅可以创建全局作用域变量，还可以在块级作用域内创建函数作用域变量。这使得函数内和函数外的变量名可以相同。 { letfood=\"apple\"; functiongetFood(){ returnfood; } console.log(getFood());//\"apple\" } 1.2.3块级作用域的工具函数 我们可以通过块级作用域内定义的匿名函数，创建块级作用域模拟私有变量。这些“私有变量”仅在该函数内部可用，而不是全局范围内都可用。 (function(){ letfood=\"apple\"; letgetFood=function(){ returnfood; } console.log(getFood());//\"apple\" })(); 以上代码定义了一个名为“立即执行函数”的函数。在这个函数内部，我们声明了一个拥有food变量的函数getFood()。由于函数内部形成了紧凑的私有作用域，外部JavaScript无法访问这个变量。 二、箭头函数 在ES6中，箭头函数是一个新的函数语法。它通常比常规函数更简洁，并且不需要显式地使用return关键字。箭头函数可以省略函数体中的花括号和return关键字，并自动返回表达式的计算值。 2.1箭头函数语法 在函数的参数列表和函数体之间使用箭头符号（=>）来定义一个箭头函数。 varnumbers=[1,2,3,4,5]; vardouble=numbers.map((n)=>n*2); console.log(double);//[2,4,6,8,10] 上面的代码是将数组中的每个元素double起来。箭头函数的参数是n，箭头函数的函数体是n*2（即每个数乘以2）。 2.2this和箭头函数 在常规函数中，this关键字指向运行时定义的对象。但是在箭头函数中，this的值与包含它的上下文相关。这使得箭头函数在代码中更具可读性。 functionPerson(){ this.age=0; setInterval(()=>{ this.age++; },1000); } varp=newPerson(); setInterval中的函数使用箭头函数来定义。这是因为在箭头函数中，this关键字指向Person对象，而不是setInterval对象。 三、模板字符串 在ES6中，我们可以使用模板字符串来创建包含变量和表达式的字符串。 3.1JavaScript中的字符串拼接 在ES5之前，我们只能使用连字符（+）来连接字符串和变量。 varname=\"Tom\"; varage=21; console.log(\"Mynameis\"+name+\"andIam\"+age+\"yearsold.\"); 这种方法在一定程度上很麻烦，尤其是要在一句话中加入许多变量时。在ES6中，我们可以使用模板字符串（使用后标记为：）。 3.2模板字符串语法 可以使用反引号（而不是引号）来定义模板字符串，然后用变量等式（${}）括号括起来的表达式来插入变量。 varname=\"Tom\"; varage=21; console.log(`Mynameis${name}andIam${age}yearsold.`); 上面的代码输出与上面的代码一样，不过语法更简单。 总结 本文介绍了ES6中的一些新特性，如块级作用域、箭头函数和模板字符串。这些新特性有助于提高JavaScript代码的效率和可读性。当然，ES6还有很多其他的新特性，让你更好地掌握JavaScript。