ES6学习笔记（一）

以下内容根据阮一峰老师的ES6标准入门进行整理，若要深入学习，请点击：ES6入门

1. let、const、var的区别

• let和var用来声明变量，而const声明常量。

• var可以重复声明变量，let不可以重复声明变量

var name = 'zhangsan';
var name = 'lisi';
console.log(name);//lisi

let name = 'zhangsan';
let name = 'lisi';
console.log(name);//报错'name' has already been declared

• let和const有块级作用域，var没有块级作用域。
  ES5中只有全局作用域和函数作用域，这带来了很多不合理的场景。

第一种：内层变量可能覆盖外层变量

var tmp = new Date();
function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}
f(); // undefined

第二种：用来计数的循环变量泄露为全局变量。

var s = 'hello';
for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}
console.log(i); // 5

• var存在变量提升，即可以在声明的上面访问变量；而let有暂时性死区，在声明上访问变量会报错。

console.log(bosh);//undefined
var bosh = 100;

console.log(bosh);//ReferenceError: bosh is not defined
let bosh = 100;

• const有以下几个特性：
  1）const声明一个只读变量，一旦声明，常量的值就不能改变；
  2）const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值；
  3）const 的作用域和let 一样，只在其所在的块级作用域有效；
  4）const 只能在声明后才能使用；
  5）const 变量也不能重复声明；

ES6声明变量的六种方法
ES5只有两种声明变量的方法：var命令和function命令。ES6除了添加let和const命令，另外还有两种声明变量的方法：import命令和class命令。所以ES6一共有6种声明变量的方法。

2. 箭头函数

基本用法

• ES6允许使用箭头来定义函数。

let f =  v => v;
//等同于
let f = function (v) {
	return v;
}

• 如果箭头函数不需要参数或者需要多个参数，就写（）；

var f = () => 5;
//等同于
var f = function () {
	return 5
}

var sum = (num1, num2) => num1 + num2;
//等同于
var sum = function(num1, num2) {
	return num1 + num2;
}

• 如果箭头函数的代码块多于一条语句，就要使用大括号将他们括起来，并且使用return语句返回。

var sum = (num1, num2) => { return num1 + num2; }

• 箭头函数可以与变量解构结合使用

const full = ({first, last}) = > first + ' ' + last;
//等同于
function full(person) {
	return person.first + ' ' + person.last;
}

• 箭头函数的一个用处是简化回调函数

//正常函数写法
[1, 2, 3].map(function(x) {
	return x * x
});
//箭头函数写法
[1, 2, 3].map(x => x * x;)

箭头函数使用注意点
1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

接下来看下面这个例子：

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

// ES5
function foo() {
  var _this = this;

  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}

上面代码中，转换后的 ES5 版本清楚地说明了，箭头函数里面根本没有自己的this，而是引用外层的this。