1. From IIFEs to blocks
在ES5中，如果你想要定义一个块级作用域的变量，你需要使用IIFE（Immediately-Invoked Function Expression） 模式:
(function(){
var tmp=... ...
}());
console.log(tmp); //ReferenceError
在ES6中你可以更加简单的使用let或者const以及一个代码块来进行定义：
{
let tmp=... ...
}
console.log(tmp);//ReferenceError
2. From concatenating strings to template literals
从串联字符串到模板字符串 ？？应该是这个意思吧
单行字符串
在ES5中，你可以使用连接字符串将各个值拼接到一块：
var x=1;var y=2
console.log('('+x+','+y+')')
在ES6中你可以使用模板字符串来实现字符串的拼接：
let x=1;let y=2;
console.log(`(${x},${y})`)
多行字符串
var HTML5_SKELETON =
'<!doctype html>\n' +
'<html>\n' +
'<head>\n' +
' <meta charset="UTF-8">\n' +
' <title></title>\n' +
'</head>\n' +
'<body>\n' +
'</body>\n' +
'</html>\n';
我们可以看到原生ES5是十分麻烦的，而ES6中的模板字符串同样使用于该种情况：
let HTML5_SKELETON = `
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>`;
3.From function expressions to arrow functions
函数表达式到箭头函数，在ES5中当你使用方法是要注意this的作用域。下边的示例中使用了self来使this的作用域到其需要的位置：
function oldfun{
var self = this;
var button = document.getElementById('myButton');
button.addEventListener('click',function(){
console.log('click');
self.handleClick();
})
}
oldfun.prototype.handleClick=function(){
... ...
}
在ES6中，就可以使用不影响this作用域的箭头函数：
function es6fun{
let button = document.getElementById('myButton');
button.addEventListener('click', () => {
console.log('click');
this.handleClick();
});
}
箭头函数对于仅返回表达式结果的短回调非常有用，在ES5中,使用起来较为冗长：
var arr = [1, 2, 3];
var squares = arr.map(function (x) { return x * x });
而ES6中，箭头函数则更加整洁：
let arr = [1, 2, 3];
let squares = arr.map(x => x * x);
ps:箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this
作为一个90后，既然早早地抱起了保温杯，泡上了枸杞水，那就认真地过好每一天吧。
网友评论