快速了解ES6部分新特性。。。
let
ES6新增了let命令，用于声明变量。其用法类似var，但是声明的变量只在let命令所在的代码块内有效。
{
let x = 10;
var y = 20;
}
x // ReferenceError: x is not defined
y // 20
var声明变量存在变量提升。也就是在声明变量之前就可以使用该变量。
console.log(x) // undefined，var声明变量之前可以使用该变量 var x = 10;
而let不会这样，let声明的变量不能在声明之前使用。
console.log(x) // ReferenceError: x is not defined，let声明变量之前不可以使用该变量 let x = 10;
注意：
let不允许在相同的作用域内重复声明同一个变量。
比如：
function foo(){
let x = 10;
var x = 20;
} // 报错
再比如：
function foo(){
let y = 10;
let y = 20;
} // 报错
ES5中只有全局作用域和函数作用域，并没有块级作用域。
请看下面的示例：
var name = ‘Q1mi‘
function foo(){
console.log(name)
if (false){
var name = ‘Bob‘
}
}
foo() // undefined
出现上述现象的原因就是在函数内部，由于变量提升导致内存的name变量覆盖了外层的name变量。
类似的情况还出现在 for循环的计数变量最后会泄露为全局变量。
for (var i=0;i<5;i++){
console.log(‘哈哈‘);
}
console.log(i); // 5
ES6中的let声明变量的方式实际上就为JavaScript新增了块级作用域。
var name = ‘Q1mi‘
function foo(){
console.log(name)
if (false){
let name = ‘Bob‘
}
}
foo() // Q1mi
此时，在foo函数内容，外层代码块就不再受内层代码块的影响。所以类似for循环的计数变量我们最好都是用let来声明。
const
const用来声明常量。const声明变量必须立即初始化，并且其值不能再改变。
const声明常量的作用域与let相同，只在声明所在的块级作用域内有效。
例如：
const PI = 3.14；
全局对象的属性：
ES6规定：var命令和function命令声明的全局变量依旧是全局对象的属性；let命令、const命令和class命令声明的全局变量不属于全局对象的属性。
查看下面的示例代码：
var x = 10; let y = 20; window.x // 10 window.y // undefined
变量的解构赋值
ES6允许按照一定的模式，从数组或对象中提取值，对变量进行赋值，这种方式被称为解构赋值。
var [x, y, z] = [10, 20, 30] x // 10 y // 20 z // 30
对象的解构赋值：
var {x, y} = {x: 10, y: 20}
x // 10
y // 20
模板字符串
模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。在模板字符串中嵌入变量，需要将变量名写入${}中。
var name = ‘Q1mi‘, age = 18;
`My name is ${name}, I’m ${age} years old.`
箭头函数
箭头函数中this指向会被固定化。这不是因为箭头函数内部有绑定this的机制。实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。
可以查看下面两段代码输出的区别：
var person = {
name: ‘Q1mi‘,
age:18,
func:function(){
console.log(this);
}
}
person.func() // person对象
和
var person = {
name: ‘Q1mi‘,
age:18,
func:()=>{
console.log(this);
}
}
person.func() // window对象
属性简洁表示法
ES6允许直接写入变量和函数作为对象的属性和方法。
function (x, y){
return {x, y}
}
上面的写法等同于：
function(x, y){
return {x: x, y: y}
}
对象的方法也可以使用简洁表示法：
var o = {
method(){
return “Hello!”;
}
}
等同于：
var o = {
method: function(){
return “Hello!”;
}
}
面向对象
ES5的构造对象的方式 使用构造函数来创造。构造函数唯一的不同是函数名首字母要大写。
function Person(name, age){
// 点方法 set方法和get方法
this.name = name;
this.age = age;
this.func = function(){
...
}
}
// 给父级绑定方法
Person.prototype.showName = function(){
console.log(this.name);
}
var p = new Person(‘q1mi’, 18);
console.log(p.name)
p.showName();
ES6 构造对象的方式：
class Person{
constructor(name, age){
this.name = name;
this.age = age;
} // 不要加逗号！！！
showName(){
console.log(this.name);
}
}
var p = new Person()
附：
有关ES6的其他新特性，推荐阅读：阮一峰的ECMAScript 6 入门
原文地址：https://www.cnblogs.com/liwenzhou/p/9249932.html