查询浏览器对ES6的支持情况https://kangax.github.io/compat-table/es6/
Chrome、MS Edge、Firefox、Safari、Node和其它很多环境都已经嵌入程序以支持 JavaScript ES6 的大部分功能。
一、变量和变量的作用域
ES5：
定义变量用 var=5；
使用var来定义变量会使变量泄露到其他的代码块，并且使用var来定义变量会产生预解析，即变量的声明提前了，但是变量的初始化并没有提前，如果想使用var来声明变量，一定要在函数的顶部声明；
ES6：
定义变量加入了 let const
1》使用let来定义变量
let 会将变量提升到块顶部（而非像ES5是函数顶部）。
但是在变量声明前引用变量会造成错误。
let 是块作用域的，不可以在声明前使用。
块开始到变量生的区域：temporal dead zone；
2》const
如果不希望变量的值在发生改变，使用const声明变量。
总结：使用let和const代替var，尽量使用const来定义变量，如果变量在后续代码中需要更改变化，则使用let来声明
二、封闭空间
ES5：
(function(参数){})(传参);
ES5中封闭空间避免了污染全局环境
ES6：
为了避免污染全局环境污染不必再使用封闭空间，在局部环境中使用let来定义变量就解决了所有问题
{
let a=5;
}
alert(a); //undefined
三、字符串和变量的拼接
1》单行字符串和变量的拼接
ES5：
字符串和变量的拼接：变量不加‘‘，字符串加‘‘，字符串和变量的拼接使用+
eg：
var name=jason;
var age=18;
alert(‘His name is‘+name+‘,He is‘+age);
ES6:
字符串和变量的拼接，在拼接的整个作用域内加‘‘，变量和字符串都不再加‘‘，变量使用${变量名}；
eg：
const name=jason;
const age=18;
alert(‘His name is ${name},He is ${age}‘);
2》多行字符串
在进行DOM操作的时候免不了需要进行多行字符串的操作
ES5:
eg：
var oLi=‘<li>n‘+
<div>我是ES5</div>n‘+
‘<p>这是我的拼接</p>n‘+
‘</li>‘;
ES6:
eg:
const oLi=‘<li>
<div>我是ES6</div>
<p>这是我的拼接</p>
</li>‘
四、解构赋值
1》数组的操作
ES5：
var arr=[1,2,3,4,5];
var s=arr[0];
var n=arr[4];
alert(s,n);//1,5
ES6：
const arr=[1,2,3,4,5];
const [s,,,,n]=arr;
alert(s,n);
2》值的对调：例如冒泡排序中的数组的值的对调
ES5：
function BubbleSort(arr){
for(var i=0;i<arr.length;i++){
for(var j=0;j<arr.length-1;j++){
if(arr[j]>arr[j+1]){
var tmp=arr[j];
arr[j]=arr[j+1];
arr[j+1]=tmp
}
}
}
return arr;
}
ES6:
function BubbleSort(arr){
for(var i=0;i<arr.length;i++){
for(var j=0;j<arr.length-1;j++){
if(arr[j]>arr[j+1]){
[arr[j],arr[j+1]]=[arr[j+1],arr[j]];
}
}
}
return arr;
}
3》查找返回值(包含多个值的时候)；
ES5:
function obj() {
var left=1, right=2, top=3, bottom=4;
return { left: left, right: right, top: top, bottom: bottom };
}
var data = obj();
var left = data.left;
var bottom = data.bottom;
console.log(left, bottom); // 1 4
ES6:
function obj(){
const left=1, right=2, top=3, bottom=4;
return {left,right,top,bottom};
}
const {left,bottom}=obj();
console.log(left, bottom); // 1 4
还有
ES5：
function settings() {
return { display: { color: ‘red‘ }, keyboard: { layout: ‘querty‘} };
}
var tmp = settings();
var displayColor = tmp.display.color;
var keyboardLayout = tmp.keyboard.layout;
console.log(displayColor, keyboardLayout); // red querty
ES6：
function settings() {
return { display: { color: ‘red‘ }, keyboard: { layout: ‘querty‘} };
}
const { display: { color: displayColor }, keyboard: { layout: keyboardLayout }} = settings();
console.log(displayColor, keyboardLayout); // red querty
五、类和面向对象
在 JavaScript 中，每个对象都有原型对象。所有 JavaScript 对象都从原型上继承方法和属性。
ES5中，属性放在构造函数（constructor）里，方法放在原型(prototype)上;
ES6中引入了类（class）来代替构造函数（constructor）；
1》面向对象：ES6中引入了类（class）
ES5:
function Person(name,age){
this.name=name;
this.age=age;
}
Person.prototype.showName=function(){
return this.name;
}
var P1 = new Person(‘jason‘,‘18‘);
alert(P1.showName());//jason
ES6:
class Person {
constructor(name) {
this.name = name;
}
showName() {
return this.name;
}
}
const P1 = new Person(‘jason‘);
alert(P1.showName()); //jason
2》继承：提供了新的关键字 extends 和 super
ES5：
function Person (name,age){
this.name = name;
this.age = age;
}
Person.prototype.showName = function(){
return this.name;
};
Person.prototype.showAge = function(){
return this.age;
};
function Worker (name,age,job){
//属性继承
Person.call(this,name,age);
//Person.apply(this,arguments);
this.job = job;
}
//方法继承
Worker.prototype = new Person();
Worker.prototype.constructor = Worker;
Worker.prototype.showJob = function(){
return this.job;
};
//
var w1 = new Worker(‘jason‘,18,‘要饭的‘);
alert(w1.showJob());//要饭的
ES6：
class Person {
constructor(name,age) {
this.name = name;
this.age=age;
}
showName() {
return this.name;
}
showAge(){
return this.age;
}
}
class Worker extends Person {
constructor(name,age,job){
super(name,age);
this.job=job;
}
showJob(){
return this.job;
}
}
const W1 = new Worker(‘jason‘,18,‘要饭的‘);
alert(W1.showJob()); // 要饭的
转载请注明‘转载于Jason齐齐的博客http://www.cnblogs.com/jasonwang2y60/’