ES6基础入门

console.log(b); //Uncaught ReferenceError: b is not defined

上面代码在代码块之中，分别用var和let声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效。

因为ES5只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景，所以需要块级作用域。下面场景中，内层变量可能会覆盖外层变量。

var tmp = new Date();

function fn(){

console.log(tmp);

if(false){

var tmp = ‘hello world’;

}

}

fn(); //undefined

上面代码中，函数f执行后，输出结果为undefined，原因在于变量提升，导致内层的tmp变量覆盖了外层的tmp变量。

[](()Let不存在变量提升

//var的情况

console.log(foo);

var foo = 2; //undefined

//let的情况

console.log(bar);

let bar = 2; //ReferenceError: Cannot access ‘bar’

上面代码中，变量foo用var命令声明，会发生变量提升，即脚本开始运行时，变量foo已经存在了，但是没有值，所以会输出undefined。 变量bar用let命令声明，不会发生变量提升。这表示在声明它之前，变量bar是不存在的，这时如果用到它，就会抛出一个错误。 因此，使用let声明变量，极大的消除了代码的潜在bug的隐患。

[](()Let暂时性死区

只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。

var temp = 123;

if(true){

temp = ‘abc’; //ReferenceError: Cannot access ‘temp’

let temp;

}

上面代码中，存在全局变量tmp，但是块级作用域内let又声明了一个 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 局部变量tmp，导致后者绑定这个块级作用域，所以在let声明变量前，对tmp赋值会报错。

[](()const 命令

---

const声明一个只读的常量。一旦声明，常量的值就不能改变。

const PI = 3.1415926;

PI = 3; //TypeError: Assignment to constant variable.

上面代码表明改变常量的值会报错。

[](()字符串的扩展-模板字符串

---

传统的JavaScript语言，输出模板通常是这样写的:

上面这种写法相当繁琐不方便，ES6引入了模板字符串解决这个问题。

运行结果：

注意：ES6模板字符串中必须要使用反引号。

[](()函数的扩展rest参数

---

ES6 引入 rest 参数（形式为“…变量名”），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

function add(…values) {

let sum = 0;

for(var val of values) {

sum += val;

}

return sum;

}

add(2, 5, 3) // 10

上面代码的add函数是一个求和函数，利用 rest 参数，可以向该函数传入任意数目的参数。

rest 参数中的变量代表一个数组，所以数组特有的方法都可以用于这个变量。下面是一个利用 rest 参数改写数组push方法的例子。

function push(array, …items) {

items.forEach(function(item) {

array.push(item);

console.log(item);

});

}

var a = [];

push(a, 1, 2, 3)

完整代码：

运行结果：

[](()函数的扩展-箭头函数

---

ES6允许使用“箭头”（=>）定义函数：

//ES5定义函数

var f = function(v) {

return v;

};

//ES6定义箭头函数

var f = v => v

[](()箭头函数的语法

1.如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

let f = () => 5;

// 等同于

let f = function() { return 5 };

let sum = (num1, num2) => {

return num1 + num2;

};

// 等同于

let sum = function(num1, num2) {

return num1 + num2;

};

2.如果只有一个参数，那么圆括号就可以省略了。

let f = str => {

console.log(str);

}

f(‘hello’);

3.如何函数体中的代码只有一句，那么大括号可以省略。

let f = str => console.log(str);

f(‘hello’);

4.但如果函数体中的代码只有一个return语句，那么return关键词也必须省略。

//这是错误的

let sum = (num1, num2) => return num1 + num2;

//这是正确的

let sum = (num1, num2) => num1 + num2;

5.由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号。

let getTempItem = id => ({ id:id, name:‘Temp’ })

[](()使用箭头函数的注意点

1.函数体内的this对象。

**函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

或者说：箭头函数当方法使用时没有定义this绑定，而是捕获所在上下文的 this ，作为自己的 this 。**

样例代码：

one点击(使用function)

two点击(使用箭头函数)