ECMAScript6/ES6 入门
一、前言
由于最近本人在学习ES6,做一些笔记能够更好的熟悉,就趁此机会来写一篇关于ES6的新人学习摘要吧。希望大佬可以给出一些意见,也希望和我一样的新人能更好更快的了解和熟悉ES6。
首先在这边我要感谢阮大大~有这么好的入门教程(搬运工,部分内容不讲述)。
其次注明本文只用于本人和其他新手了解熟悉ES6,非其他用途。
下面就开始我们简单的学习吧~
二、浏览器兼容性
不多赘述,ES6兼容性
三、let和const命令
在学习let和const之前,我们先来了解一下块级作用域,块级作用域主要适用两种场景,一种是内层变量覆盖外层变量;第二种场景是用来计数的循环变量泄露为全局变量。
// 第一种场景
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
块级作用域能很好的解决这两方面的问题,如何增加块级作用域呢?等我们学习完let和const再来详述。
1、let和var一样,用来声明变量,差别在于let申明的变量的作用域只针对于let命令所在的代码块内。
{
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined.
b // 1
在代码块中我们分别以let和var申明了a,b两个变量,在打印a,b两个变量的时候发现用var声明的变量b的值是能正确打印的,但是用let申明的a变量报错,这表面两者申明的作用域不同。
用let申明的变量无变量提升
// var 的情况
console.log(foo); // 输出undefined
var foo = 2;
// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;
上面的代码中同样在声明变量前打印出该变量,var申明的变量输出undefined,而let报错,即变量bar不存在,所以使用let一定要在申明后进行使用。
暂时性死区
暂时性死区是什么意思呢,简单来说就是从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。
var tmp = 123;
if (true) {
tmp = 'abc'; // ReferenceError
let tmp;
}
不允许重复声明
let不允许在相同作用域内,重复声明同一个变量。
// 报错
function func() {
let a = 10;
let a = 1;
}
2、const声明一个只读的常量。一旦声明,常量的值就不能改变。
const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。
const的作用域与let命令相同:只在声明所在的块级作用域内有效。
const命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用。
const foo;
// SyntaxError: Missing initializer in const declaration
const PI = 3.1415;
PI // 3.1415
PI = 3;
// TypeError: Assignment to constant variable.
if (true) {
const MAX = 5;
}
MAX // Uncaught ReferenceError: MAX is not defined
3、块级作用域
新增方式:
- let和const实际上为 JavaScript 新增了块级作用域。
- 使用{}创建块级作用域(可以任意嵌套)
{{{{
let insane = 'Hello World';
{let insane = 'Hello World'}
}}}};
优点:使得获得广泛应用的立即执行函数表达式(IIFE)不再必要了。
// IIFE 写法
(function () {
var tmp = ...;
...
}());
// 块级作用域写法
{
let tmp = ...;
...
}
注意:只有在ES6中,允许以下三条规则(ES5不可)
- 允许在块级作用域内声明函数。
- 函数声明类似于var,即会提升到全局作用域或函数作用域的头部。
- 同时,函数声明还会提升到所在的块级作用域的头部。
4、do表达式(提案)
不赘述,使得块级作用域可以变为表达式,也就是说可以返回值
let x = do {
let t = f();
t * t + 1;
};