ECMAScript笔记——新增变量声明

ES6的变量声明

ES6中新增了let和const来定义变量：

• var：ES5和ES6中，定义全局变量（是variable的简写）。
• let：定义局部变量，替代var。
• const：定义常量（定义后，不可修改）。

Var 全局变量

{
	var a = 1;
}

console.log(a);

上方代码输出结果为1。因为var是全局声明的，所以，即使是在区块里声明，也会在全局起作用。

var a = 1;
{
	var a =2;
}

console.log(a);

同理，输出结果为2。用var定义的全部变量，有时候会污染整个JS的作用域。

Let 定义局部变量

var a = 1;
{
	let a = 2;
}

console.log(a);

输出结果为1。用let声明的变量，只在局部（块级作用域）内起作用，使用let声明变量可以防止数据污染。

举例1： for循环（用var声明变量）

<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>10</button>

<script>
	var allBtn = document.querySelectorAll('button');
	for (var i = 0; i < 10; i++) {
		allBtn[i].onclick = (function(){
			console.log(i)
		})
	}
</script>

使用var声明变量，点击按钮输出结果都为11（说明循环体外定义的变量i，是在全局起作用的）。

举例2： for循环（使用let声明变量）

<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>10</button>

<script>
	let allBtn = document.querySelectorAll('button');
	for (let i = 1; i <= 10; i++) {
		allBtn[i-1].onclick = (function(){
			console.log(i)
		})
	}
</script>

改为使用let来声明变量后，点击按钮能输出对应的值（说明循环体外定义的变量i，只在块级作用域内起作用）。

举例3： for循环（使用var声明变量，闭包写法实现效果）

<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>10</button>

<script>
	var allBtn = document.querySelectorAll('button');
	for (var i = 1; i <= 10; i++) {
		allBtn[i-1].onclick = (function(index){
			return function(){
				console.log(index);
			}
		})(i)
	}
</script>

要习惯使用let声明，减少var声明带来的污染全局空间。

Const 定义常量

在程序开发中，有些变量希望声明后，在业务层就不再发生变化，此时可以用const来定义。

const IP = "192.168.1.1";

用const声明的变量，只在局部（块级作用域）内起作用。

let 和 const 的作用【重要】

• 禁止重复声明。
• 支持块级作用域。
• 控制修改。

相反，用var声明的的变量：可以重复声明、没有块级作用域、不能限制。