1. ES6第一天学习

# ES6 的概念以及运行环境

ES6 即是一个历史名词，也是一个泛指。含义是 5.1 版以后的 JavaScript 的下一代标准。涵盖 ES2015、ES2016、ES2017 等

# WebStorm 配置

找到左上角的 file，选择 setting
选择 Languages & Frameworks 设置 ES6 选项。
新版的 webstorm 已经默认是 es6 了

# Babel 编译器

其主要作用是用于将 ES2015 + 代码转化为向下兼容的 JavaScript 代码。

安装

	yarn add @babel/core @babel/cli @babel/preset-env -D
	yarn add @babel/polyfill

通过以上命令安装后会导致只有当前项目才可以使用 babel 工具，因此为了所有项目都可以使用 babel 工具，可以进行全局安装。

	yarn global add @babel/core @babel/cli @babel/preset-env
	yarn global add @babel/polyfill

创建配置文件
也就是在项目根目录创建 package.json 文件。
{
"presets": [
"latest"
],
"plugins": [],
"devDependencies": {
"babel-cli": "^6.0.0",
"babel-preset-latest": "^6.24.1"
},
"scripts": {
"build": "babel src -d lib"
}
}
配置完以上内容后，只需要在 scr 目录下进行开发，通过运行 yarn run build 即可将 src 目录下的 js 转换并放到 lib 目录下。

# let 关键字

let 存在块级作用域，例如

	if (true) {
	var a = 6;
	let b = 7;
	console.log(a); // 6
	console.log(b); // 7
	}
	console.log(a); // 6
	console.log(b); // b is not defined

在大括号内用 let 声明的变量无法在大括号外使用。

都可以在全局声明变量

	/**
	* let 与 var 关键字的区别 - 都是定义变量
	* let 提供了块级作用域
	* * 也可以在全局作用域和函数作用域定义变量
	* var 提供了全局作用域和函数作用域
	*/

	var m = 100;
	let n = 1000;

	console.log(m); // 100
	console.log(n); // 1000

let 声明没有变量提升
当使用 var 声明时，不会报错。
console.log(m); // undefined
var m = 10;
当使用 let 声明时则直接报错。
console.log(m);
let m = 10;
不允许重复声明
当使用 var 声明时，允许重复声明。
var v = 100;
var v = 1000;
console.log(v); // 1000
当使用 let 重复声明时则直接报错。
let v = 100;
let v = 1000;
console.log(v);
与函数的关系
块级作用域中如果没有声明与全局作用域变量同名的变量，那么在块级作用域中可以使用全局变量。
let v = 100;
function fn() {
// 全局作用域
console.log(v);
}
fn(); // 100
但如果在块级作用域中声明了与全局作用域变量同名的变量，那么会导致在块级作用域中无法使用全局作用域。无论在块级作用域中的哪里声明。
let v = 100;
function fn() {
// 全局作用域
console.log(v); // 由于在此作用域中还存在一个 v 的声明，因此 v 无法使用全局变量的 v
let v = 1000;
console.log(v);
}
fn();

函数参数

	function fn(a) {
	// 此时参数 a 相当于使用 let 关键字变量进行定义
	let a = 1000;
	console.log(a);
	}
	fn(100);

# 块级作用域

	let a = 100; // 全局变量

	(function () {
	// 函数作用域
	let b = 1000; // 局部变量
	})();
	if (true) {
	// 块级作用域
	let c = 10000;
	}
	// 此时只能找到 a, 而 b\c 会报错
	console.log(a);
	console.log(b);
	console.log(c);

# 为什么需要块级作用域

局部变量可能覆盖全局变量

在循环体中用于计数的变量可能会暴露

当使用 var 关键字声明时，实际上声明的是全局变量。

	for (var i = 0; i < 10; i++) {
	console.log(i);
	}
	console.log("跳出循环后: ", i); // 输出 10

使用 let 关键字声明则不会导致这种情况。

	for (let i = 0; i < 10; i++) {
	console.log(i);
	}
	console.log("跳出循环后: ", i); // i is not defined

一个闭包案例

	var arr = [];
	for (var i = 0; i < 10; i++) {
	arr[i] = function () {
	return i;
	};
	}
	console.log(arr[9]()); // 任意位置都为 10

当使用 var 关键字声明变量时，会导致数组所有元素的结果均为 10.

当使用 let 关键字即可避免这种情况

# 函数声明

在 ES5 中不可以在块级作用域和 try-catch 中声明函数。而这些在 ES6 中是允许的。

直接定义函数等于定于全局作用域函数

	if (true) {
	function fn() {
	console.log("块级作用域函数");
	}
	}
	fn(); // 块级作用域函数

虽然定义在了块里边，但外部还是可以调用。

通过变量定义不是全局变量。

	if (true) {
	let t = function () {
	console.log("函数t");
	};
	}
	t(); // 报错 t is not defined

ES6