标签：bubble tin javascrip 环境污染 ext dead ret ++ 字符串
查询浏览器对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/’
标签：bubble tin javascrip 环境污染 ext dead ret ++ 字符串
原文地址：http://www.cnblogs.com/jasonwang2y60/p/6105683.html
