ES6是什么，为什么要学习它，不学习ES6会怎么样?

答：ES6是新一代的JS语言标准，对分JS语言核心内容做了升级优化，规范了JS使用标准，新增了JS原生方法，使得JS使用更加规范，更加优雅，更适合大型应用的开发。

学习ES6是成为专业前端正规军的必经之路。不学习ES6也可以写代码打鬼子，但是最多只能当个游击队长。

 

ES5、ES6和ES2015有什么区别?

答：ES2015特指在2015年发布的新一代JS语言标准，

ES6泛指下一代JS语言标准，包含ES2015、ES2016、ES2017、ES2018等。现阶段在绝大部分场景下，ES2015默认等同ES6。

ES5泛指上一代语言标准。ES2015可以理解为ES5和ES6的时间分界线。

 

babel是什么，有什么作用?

答：babel是一个 ES6 转码器，可以将 ES6 代码转为 ES5 代码，以便兼容那些还没支持ES6的平台。

 

let有什么用，有了var为什么还要用let？

答：在ES6之前，声明变量只能用var，var方式声明变量其实是很不合理的，准确的说，是因为ES5里面没有块级作用域是很不合理的，甚至可以说是一个语言层面的bug(这也是很多c++、JAVA开发人员看不懂，也瞧不起JS语言的劣势之一)。

没有块级作用域回来带很多难以理解的问题，比如for循环var变量泄露，变量覆盖等问题。

let 声明的变量拥有自己的块级作用域，且修复了var声明变量带来的变量提升问题。

 

问：举一些ES6对String字符串类型做的常用升级优化?

答：

优化部分：

ES6新增了字符串模板，在拼接大段字符串时，用反斜杠(`)取代以往的字符串相加的形式，能保留所有空格和换行，使得字符串拼接看起来更加直观，更加优雅。

升级部分:

ES6在String原型上新增了includes()方法，用于取代传统的只能用indexOf查找包含字符的方法(indexOf返回-1表示没查到不如includes方法返回false更明确，语义更清晰),

此外还新增了startsWith(), endsWith(), padStart(),padEnd(),repeat()等方法，可方便的用于查找，补全字符串。

 

举一些ES6对Array数组类型做的常用升级优化?

答：

优化部分：

数组解构赋值：ES6可以直接以let [a,b,c] = [1,2,3]形式进行变量赋值，在声明较多变量时，不用再写很多let(var),且映射关系清晰，且支持赋默认值。

扩展运算符：ES6新增的扩展运算符(...)(重要),可以轻松的实现数组和松散序列的相互转化，可以取代arguments对象和Apply方法，轻松获取未知参数个数情况下的参数集合。

（尤其是在ES5中，arguments并不是一个真正的数组，而是一个类数组的对象，但是扩展运算符的逆运算却可以返回一个真正的数组）。

扩展运算符还可以轻松方便的实现数组的复制和解构赋值（let a = [2,3,4]; let b = [...a]）。

升级部分:

ES6在Array原型上新增了find()方法，用于取代传统的只能用indexOf查找包含数组项目的方法,且修复了indexOf查找不到NaN的bug([NaN].indexOf(NaN) === -1)，

此外还新增了copyWithin(), includes(), fill(),flat()等方法，可方便的用于字符串的查找，补全,转换等。

 

据一些ES6对Number数字类型做的常用升级优化?

答：

优化部分：

ES6在Number原型上新增了isFinite(), isNaN()方法，用来取代传统的全局isFinite(), isNaN()方法检测数值是否有限、是否是NaN。

ES5的isFinite(), isNaN()方法都会先将非数值类型的参数转化为Number类型再做判断，这其实是不合理的，最造成isNaN('NaN') === true的奇怪行为--'NaN'是一个字符串，但是isNaN却说这就是NaN。

而Number.isFinite()和Number.isNaN()则不会有此类问题(Number.isNaN('NaN') === false)。（isFinite()同上）

升级部分:

ES6在Math对象上新增了Math.cbrt()，trunc()，hypot()等等较多的科学计数法运算方法，可以更加全面的进行立方根、求和立方根等等科学计算。

 

举一些ES6对Object类型做的常用升级优化?(重要)

答：

优化部分：

1.对象属性变量式声明：ES6可以直接以变量形式声明对象属性或者方法，比传统的键值对形式声明更加简洁，更加方便，语义更加清晰。

let [apple, orange] = ['red appe', 'yellow orange'];
let myFruits = {apple, orange};    // let myFruits = {apple: 'red appe', orange: 'yellow orange'};

尤其在对象解构赋值(见优化部分2.)或者模块输出变量时，这种写法的好处体现的最为明显:

let {keys, values, entries} = Object;
let MyOwnMethods = {keys, values, entries}; // let MyOwnMethods = {keys: keys, values: values, entries: entries}

可以看到属性变量式声明属性看起来更加简洁明了。方法也可以采用简洁写法：

let es5Fun = { 
  			method: function(){}
}; let es6Fun = {    
			  method(){}}

2.对象的解构赋值：ES6对象也可以像数组解构赋值那样，进行变量的解构赋值：

let {apple, orange} = {apple: 'red appe', orange: 'yellow orange'};

3.对象的扩展运算符(...)：ES6对象的扩展运算符和数组扩展运算符用法本质上差别不大，毕竟数组也就是特殊的对象。

对象的扩展运算符一个最常用也最好用的用处就在于可以轻松的取出一个目标对象内部全部或者部分的可遍历属性，从而进行对象的合并和分解。

let {apple, orange, ...otherFruits} = {apple: 'red apple', orange: 'yellow orange', grape: 'purple grape', peach: 'sweet peach'}; 
// otherFruits  {grape: 'purple grape', peach: 'sweet peach'}
// 注意: 对象的扩展运算符用在解构赋值时，扩展运算符只能用在最有一个参数(otherFruits后面不能再跟其他参数)let moreFruits = {watermelon: 'nice watermelon'};
let allFruits = {apple, orange, ...otherFruits, ...moreFruits};

4.super 关键字：ES6在Class类里新增了类似this的关键字super。同this总是指向当前函数所在的对象不同，super关键字总是指向当前函数所在对象的原型对象。

 

升级部分:

1.ES6在Object原型上新增了is()方法，做两个目标对象的相等比较，用来完善'==='方法。'==='方法中NaN === NaN //false其实是不合理的，Object.is修复了这个小bug。(Object.is(NaN, NaN) // true)

2.ES6在Object原型上新增了assign()方法，用于对象新增属性或者多个对象合并。

const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

注意:

assign合并的对象target只能合并source1、source2中的自身属性，

并不会合并source1、source2中的继承属性，也不会合并不可枚举的属性，且无法正确复制get和set属性（会直接执行get/set函数，取return的值）。

3.ES6在Object原型上新增了getOwnPropertyDescriptors()方法，此方法增强了ES5中getOwnPropertyDescriptor()方法，可以获取指定对象所有自身属性的描述对象。

结合defineProperties()方法，可以完美复制对象，包括复制get和set属性。

4.ES6在Object原型上新增了getPrototypeOf()和setPrototypeOf()方法，用来获取或设置当前对象的prototype对象。

这个方法存在的意义在于，ES5中获取设置prototype对象是通过__proto__属性来实现的，

然而__proto__属性并不是ES规范中的明文规定的属性，只是浏览器各大厂商“私自”加上去的属性，只不过因为适用范围广而被默认使用了，在非浏览器环境中并不一定就可以使用，

所以为了稳妥起见，获取或设置当前对象的prototype对象时，都应该采用ES6新增的标准用法。

5.ES6在Object原型上还新增了Object.keys()，Object.values()，Object.entries()方法，用来获取对象的所有键、所有值和所有键值对数组。

举一些ES6对Function函数类型做的常用升级优化?(重要)

答：

1.箭头函数(核心)：箭头函数是ES6核心的升级项之一，箭头函数里没有自己的this,这改变了以往JS函数中最让人难以理解的this运行机制。

主要优化点:

箭头函数内的this指向的是函数定义时所在的对象，而不是函数执行时所在的对象。

ES5函数里的this总是指向函数执行时所在的对象，这使得在很多情况下this的指向变得很难理解，尤其是非严格模式情况下，this有时候会指向全局对象，这甚至也可以归结为语言层面的bug之一。

ES6的箭头函数优化了这一点，它的内部没有自己的this,这也就导致了this总是指向上一层的this，如果上一层还是箭头函数，则继续向上指，直到指向到有自己this的函数为止，并作为自己的this；

箭头函数不能用作构造函数，因为它没有自己的this，无法实例化；

也是因为箭头函数没有自己的this,所以箭头函数 内也不存在arguments对象。（可以用扩展运算符代替）

2.函数默认赋值：ES6之前，函数的形参是无法给默认值的，只能在函数内部通过变通方法实现。ES6以更简洁更明确的方式进行函数默认赋值。

function es6Fuc (x, y = 'default') { 
  	console.log(x, y);
}es6Fuc(4) // 4, default

升级部分:

ES6新增了双冒号运算符，用来取代以往的bind，call,和apply。(浏览器暂不支持，Babel已经支持转码)

foo::bar;
// 等同于
bar.bind(foo);foo::bar(...arguments);// 等同于
bar.apply(foo, arguments);

 

喜欢的老铁，加个关注！今后会分享更多的前端干货，欢迎点赞转发关注

 

作者丨StevenLikeWatermelon
https://juejin.im/post/5c061ed2f265da61357258ee