es6ie不兼容函数_前端基础面试：平常工作中，最常用的ES6特性有哪些？请举例说明...

最常用的ES6特性 let, const, class, extends, super, arrow functions, template string, destructuring, default, rest arguments。

这两个的用途与var类似&＃xff0c;都是用来声明变量的&＃xff0c;但在实际运用中他俩都有各自的特殊用途。

首先来看下面这个例子&＃xff1a;

使用var两次输出都是obama&＃xff0c;这是因为ES5只有全局作用域和函数作用域&＃xff0c;没有块级作用域&＃xff0c;这带来很多不合理的场景。第一种场景就是你现在看到的内层变量覆盖外层变量。而let则实际上为Javascript新增了块级作用域。用它所声明的变量&＃xff0c;只在let命令所在的代码块内有效。

另外一个var带来的不合理场景就是用来计数的循环变量泄露为全局变量&＃xff0c;看下面的例子&＃xff1a;

上面代码中&＃xff0c;变量i是var声明的&＃xff0c;在全局范围内都有效。所以每一次循环&＃xff0c;新的i值都会覆盖旧值&＃xff0c;导致最后输出的是最后一轮的i的值&＃xff0c;即函数值都是10。而使用let则不会出现这个问题。

再来看一个更常见的例子&＃xff0c;了解下如果不用ES6&＃xff0c;而用闭包如何解决这个问题。

我们本来希望的是点击不同的clickBox&＃xff0c;显示不同的i&＃xff0c;但事实是无论我们点击哪个clickBox&＃xff0c;输出的都是5。下面我们来看下&＃xff0c;如何用闭包搞定它。

const也用来声明变量&＃xff0c;但是声明的是常量。一旦声明&＃xff0c;常量的值就不能改变。(注意这里指的是内存地址&＃xff0c;类似数组&＃xff0c;对象成为引用时&＃xff0c;还是可以修改的)

const PI &＃61; Math.PIPI &＃61; 23 //Module build failed: SyntaxError: /es6/app.js: "PI" is read-only

当我们尝试去改变用const声明的常量时&＃xff0c;浏览器就会报错。

const有一个很好的应用场景&＃xff0c;就是当我们引用第三方库的时声明的变量&＃xff0c;用const来声明可以避免未来不小心重命名而导致出现bug&＃xff1a;

const monent &＃61; require(&＃39;moment&＃39;)

这三个特性涉及了ES5中最令人头疼的的几个部分&＃xff1a;原型、构造函数&＃xff0c;继承...你还在为它们复杂难懂的语法而烦恼吗&＃xff1f;你还在为指针到底指向哪里而纠结万分吗&＃xff1f;

有了ES6我们不再烦恼&＃xff01;

ES6提供了更接近传统语言的写法&＃xff0c;引入了Class(类)这个概念。新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法&＃xff0c;也更加通俗易懂。

上面代码首先用class定义了一个“类”&＃xff0c;可以看到里面有一个constructor方法&＃xff0c;这就是构造方法&＃xff0c;而this关键字则代表实例对象。简单地说&＃xff0c;constructor内定义的方法和属性是实例对象自己的&＃xff0c;而constructor外定义的方法和属性则是所有实例对象可以共享的。

Class之间可以通过extends关键字实现继承&＃xff0c;这比ES5的通过修改原型链实现继承&＃xff0c;要清晰和方便很多。上面定义了一个Cat类&＃xff0c;该类通过extends关键字&＃xff0c;继承了Animal类的所有属性和方法。

super关键字&＃xff0c;它指代父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法&＃xff0c;否则新建实例时会报错。这是因为子类没有自己的this对象&＃xff0c;而是继承父类的this对象&＃xff0c;然后对其进行加工。如果不调用super方法&＃xff0c;子类就得不到this对象。

ES6的继承机制&＃xff0c;实质是先创造父类的实例对象this(所以必须先调用super方法)&＃xff0c;然后再用子类的构造函数修改this。

如果你写react的话&＃xff0c;就会发现以上三个东西在最新版React中出现得很多。创建的每个component都是一个继承React.Component的类。

这个恐怕是ES6最最常用的一个新特性了&＃xff0c;用它来写function比原来的写法要简洁清晰很多:

function(i){ return i &＃43; 1; } //ES5(i) &＃61;> i &＃43; 1 // ES6

简直是简单的不像话对吧(但是滥用也不见得好&＃xff0c;就是遇到jQuery等等需要兼容老式代码&＃xff0c;报错&＃xff0c;除非摒弃不用&＃xff0c;包括老式库&＃xff0c;只能babel转一下)

如果方程比较复杂&＃xff0c;则需要用{}把代码包起来&＃xff1a;

除了看上去更简洁以外&＃xff0c;arrow function还有一项超级无敌的功能&＃xff01;

长期以来&＃xff0c;Javascript语言的this对象一直是一个令人头痛的问题&＃xff0c;在对象方法中使用this&＃xff0c;必须非常小心。例如&＃xff1a;

运行上面的代码会报错&＃xff0c;这是因为setTimeout中的this指向的是全局对象。所以为了让它能够正确的运行&＃xff0c;传统的解决方法有两种&＃xff1a;

当我们使用箭头函数时&＃xff0c;函数体内的this对象&＃xff0c;就是定义时所在的对象&＃xff0c;而不是使用时所在的对象。

并不是因为箭头函数内部有绑定this的机制&＃xff0c;实际原因是箭头函数根本没有自己的this&＃xff0c;它的this是继承外面的&＃xff0c;因此内部的this就是外层代码块的this。

这个东西也是非常有用&＃xff0c;当我们要插入大段的html内容到文档中时&＃xff0c;传统的写法非常麻烦&＃xff0c;所以之前我们通常会引用一些模板工具库&＃xff0c;比如mustache等等。

大家可以先看下面一段代码&＃xff1a;

我们要用一堆的&＃39;&＃43;&＃39;号来连接文本与变量&＃xff0c;而使用ES6的新特性模板字符串&＃96;&＃96;后&＃xff0c;我们可以直接这么来写&＃xff1a;

用反引号&＃96; &＃96;(Tab键上面那个)来标识起始&＃xff0c;用${}来引用变量&＃xff0c;而且所有的空格和缩进都会被保留在输出之中&＃xff0c;是不是非常爽?

ES6允许按照一定模式&＃xff0c;从数组和对象中提取值&＃xff0c;对变量进行赋值&＃xff0c;这被称为解构(Destructuring)。

看下面的例子&＃xff1a;

let cat &＃61; &＃39;ken&＃39;let dog &＃61; &＃39;lili&＃39;let zoo &＃61; {cat: cat, dog: dog}console.log(zoo) //Object {cat: "ken