【JS】js语言基础——语法之var，let与const

一、语法

• 语法宽松
• 借鉴了C语言和类C语言（如Java）的语法。

1. 区分大小写

• ECMASript中的一切都区分大小写。
• 像typeof这种关键字不能作为函数名，但是由于严格区分大小写，所以Typeof是一个完全有效的函数名。

2. 标识符

• 标识符是变量、函数、属性或函数参数的名称，标识符可以由一或多个下列字符组成：
  （1）第一个字符必须是一个字母、下划线( _ )或美元符号($);
  （2）剩下的其他字符可以是字母、下划线、美元符号或数字。
• 标识符中的字母可以是扩展ASCII（Extended ASCII）中的字母，也可以是Unicode的字母字符。
• 按照惯例，ECMAScript标识符使用驼峰大小写形式，即第一个单词的首字母小写，后面每个单词的首字母大写。
• 关键字、保留字、true、false和null不能作为标识符。

3.变量

• ECMAScript变量是松散类型的，意思是变量可以用于保存任何类型的数据。

（1）var关键字

• var声明作用域：使用var操作符定义的变量会成为包含它的函数的局部变量。比如，使用var在一个函数内部定义一个变量，就意味着该变量将在函数退出时被销毁。

不过，在函数内部定义变量时省略var操作符，可以创建一个全局变量。但是我们肯定不推荐这么做。

function test(){
	var message = "hi";	// 局部变量
}
test();
console.log(message);	//出错！
--------------------------------------------------------------------------------------------------
function test(){
	message = "hi"; //全局变量
}
test();
console.log(message);	//"hi"

• var声明提升：使用var定义的变量会自动提升到函数作用域，这就是所谓的“提升”，即把所有变量声明都拉到函数作用域的顶部。

function foo(){
	console.log((age);
	var age = 26;
}
foo();	//undefined
等同于：
function foo(){
	var age;
	console.log(age);
	age = 26;
}
foo();	//undefined

//另外，反复多次使用var声明同一个变量也是没有问题的：
function foo(){
	var age = 16;
	var age = 26;
	var age = 36;
	console.log(age);
}
foo();	//36

（2）let声明

• let与var的不同：a：let声明的范围是块作用域，而var声明的范围是函数作用域。b：let不允许同一个块作用域中出现冗余声明。c：let声明的变量不会再作用域中被提升

//a
if(true){
	var name = 'Matt';
	console.log(name);	//Matt
}
console.log(name);	//Matt

if(true){
	let age = 26;
	console.log(age);	//26
}
console.log(age);	//ReferenceError：age没有定义
--------------------------------------------------------------------------------------------------------
//b
var name;
var name;

let age;
let age;	//SyntaxError：标识符age已经声明过了
--------------------------------------------------------------------------------------------------------
//c
//name会被提升，age不会被提升
console.log(name)	//undefined 
var name = 'Matt';

console.log(age);	//ReferenceError：age没有定义
let age = 26;

• let的全局声明
  与var关键字不同，使用let在全局作用域中声明的变量不会成为window对象的属性(var声明的变量则会)。
  不过，let声明仍然是在全局作用域中发生的，相应变量会在页面的生命周期内存续，因此，为了避免SyntaxError，必须确保页面不会重复声明同一个变量。

var name = 'Matt';
console.log(window.name);	//'Matt'

let age = 26;
console.log(window.age);	//undefined 

• let的条件声明
  在使用var声明变量时，由于声明会被提升，js引擎会自动将多余的声明在作用域顶部合并为一个声明。因为let的作用域是块，所以不可能检查前面是否已经使用let声明过同名变量，同时也就不可能在没有声明的情况下声明它。

<script>
var name = 'Nicholas';
let age = 26;
</script>

<script>
//假设脚本不确定页面中是否已经声明了同名变量
//那他可以假设还没有声明过

var name = 'Matt';
//这里没有问题，因为可以被作为一个提升声明来处理
//不需要检查之前是否声明过同名变量

let age = 36;
//如果age之前声明过，这里会报错
</script>



//使用try/catch语句或typeof操作符也不能解决，因为条件中let声明的作用域仅限于该快。
<script>
var name = 'Nicholas';
let age = 36;
</script>

<script>
//假设脚本不确定页面中是否已经声明了同名变量
//那他可以假设还没有声明过

if(typeof name === 'undefined'){
	let name;
}
//name被限制在if()块的作用域内
//因此这个赋值形同全局赋值
name = 'Matt';

try{
	console.log(age);	//如果age没有声明过，则会报错
}
catch(error){
	let age;
}
//age被限制在catch{}块的作用域内
//因此这个赋值形同全局赋值
age = 36;
</script>

不能使用let进行条件是声明是件好事儿，因为条件声明是一种反模式，他让程序变得更难理解。

• for循环中的let声明
  使用var，for循环定义的迭代变量汇森偷盗循环体外部，改成使用let之后，这个问题就消失了，因为迭代变量的作用域仅限于for循环块内部：

for(var i = 0; i <5 ; ++i){
	//循环逻辑
}
console.log(i); //5

for(let i = 0; i<5 ; ++i){
	//循环逻辑
}
console.log(i);	//ReferenceError：没有定义

（3）const声明
const的行为与let基本相同，唯一一个重要的区别就是用const声明变量的时候必须同时初始化变量，且尝试修改const声明的变量会导致运行时错误。

const age = 26；
age = 36; // TypeError:给常量赋值

//const也不允许重复声明
const name = 'Matt';
const name = 'Nicholas';	//SyntaxError

//const声明的作用域也是块
const name = 'Matt';
if(true){
	const name = 'Nicholas';	
}
console.log(name);	//Matt

• 注意！const声明的限制只适用于它指向的变量的引用。说句人话，就是如果const变量引用的是一个对象，那么修改这个对象内部的属性并不违反const的限制。
• js引擎会为for循环中的let声明分别创建独立的变量实例，虽然const变量跟let变量很相似，但是不能用const来声明变量（因为迭代变量会自增）；
  不过，如果你只是想用const声明一个不会被修改的for循环变量，那也是可以的，也就是说，每次迭代只是创建一个新变量。这对for-of和for-in循环特别有意义：

let i = 0;
for(const j = 7; i<5 ; ++i){
	console.log(j);
}
// 7,7,7,7,7

for(const key in {a:1 , b:2}){
	console.log(key);
}
//a,b

for(const value of [1,2,3,4,5]){
	console.log(value);
}
//1,2,3,4,5

(4)有关声明变量关键字的总结

• 不要再使用var了！
  限制自己只使用let和const有助于提升代码质量，因为变量有了明确的作用域、声明位置，以及不变的值。
• const优先，let次之
  使用const声明可以让浏览器运行时强制保持变量不变，也可以让静态代码分析工具提前发现不合法的赋值操作。只是在提前知道未来会有修改时，才使用let。