本节目标
- 掌握声明变量的方式。
- 掌握var和let的区别。
内容摘要
本篇讲解了变量声明的两种方式var和let,并对比var和let声明变量的差别,最后对变量名名称规则进行了总结。
阅读时间10~15分钟
变量基础
js中声明变量可以使用var和let关键词。其中var是es5的语法,let是es6的语法。
var声明变量
var可以用来声明局部变量和全局变量。语法格式如下:
声明:var 变量名;
声明并赋值:var 变量名 = 值;
声明多个变量:var 变量1, 变量2;
声明多个变量并赋值:var 变量1 = 值, 变量2 = 值;
其中:
1. 变量可以看做是存储数据的容器。
2. javascript是弱类型语言,值可以是数字、字符串、数组等等都行。
简单示例:
var a;
a = 1;
var i, j;
i = 8;
j = 9;
var x = 1, y = 2, z = 3;
示例1,已知魔方的边长为5.6厘米,计算出单个面周长和面积,并在控制台打印。
var x = 5.6; // x表示边长
var c, a; // c表示周长,a表示面试
c = x * 4;
a = x * x;
console.log("魔方的单个面周长为:", c);
console.log("魔方的单个面面积为:", a);
示例2,已知一个球的半径为r,接收用户输入的值,计算出横截面周长和面积,并在控制台打印。
var r; // r表示球半径
var c, a; // c表示周长,a表示面试
r = window.prompt("请输入球的半径(单位米):");
c = 2 * Math.PI * r;
a = Math.PI * r * r;
console.log("周长:", c, "米");
console.log("面积:", a, "平方米");
变量命名规则
另外变量名有一定的规则:
1. 变量必须以字母开头、也能以 $ 和 _ 符号开头。
2. 变量名称对大小写敏感(y 和 Y 是不同的变量)。
3. 变量名不能是javascript关键词(例如:var let function class等等)。
思考:
下面不符合变量名规则的是:
_this 4age while name10 $class let Score
let声明变量
let可以用来声明块作用域的局部变量。在相同的作用域内,已被let声明的变量无法被var和let声明第二次。
语法格式和var一致,只是关键词替换成let:
声明:let 变量名;
声明并赋值:let 变量名 = 值;
声明多个变量:let 变量1, 变量2;
声明多个变量并赋值:let 变量1 = 值, 变量2 = 值;
简单示例:
let sum = 0;
let money = 9.9;
let i = 10, j, k;
j = 11;
k = 12;
let的使用也和var类似,就不再举例说明,下面我们说下let和var的区别,这个在面试中也经常会问到。
let和var区别:
1. let声明的变量不能被重新定义,var的可以。
2. let不能在定义之前访问该变量,但是var可以。
3. 作用域不同,var是函数作用域,let是块作用域。
下面将对每个不同点进行说明。
1)let声明的变量不能被重新定义,var的可以。
let声明的变量,如果再次声明,会报错。
let x = 1;
let x = 2; // 这行会报错
错误信息:
Uncaught SyntaxError: Identifier 'x' has already been declared
意思就是变量x已经定义了。
再看看var情况:
var x = 1;
var x = 2;
一切正常。
2)let声明的变量不能在定义之前访问,但是var可以。
let必须要先声明变量才能访问,和C、java等类似。var可以先使用变量再声明,只是在声明前会是undefined值。
先看看let情况:
console.log(x);
let x = 1;
运行如上代码会报错误信息:
index.html:9 Uncaught ReferenceError: Cannot access 'x' before initialization
at index.html:9
意思就是x需要在声明之后才能访问。
再看看var情况:
console.log(x); // undefined
var x = 1;
运行如上代码控制台打印:
undefined
这个俗称变量提升,根据变量的提升原则,var x会被优先提升到最前面编译,但赋值是在运行的时候完成的。
所以上例代码相当于:
var x;
console.log(x); // undefined
x = 1;
3)作用域不同,let是块作用域,var是函数作用域。
变量的作用域涉及到函数、原型链等,我们讲完面向对象章节后再进行讲解。
因为let使用更加严格和规范,后续都推荐使用let关键词进行声明。
本节总结
- js中声明变量可以使用var和let,现在多用let。
- 变量命名需要一定的规则,另外需要见名识义。
练习题
- 请尝试声明相关变量来表示一个视频信息,如:视频id、视频地址,至少5个,可以参考视频应用。
- 请尝试声明相关变量来表示一个商品信息,如:商品id、商品名称,至少5个,可以参考电商应用。
- 请尝试声明相关变量来表示一篇文章信息,如:文章id、文章标题,至少5个,可以参考新闻应用。
- 请尝试声明相关变量来表示一条评论信息,如:评论id、评论内容,至少5个,可以各应用相关的评论功能。
- Number_hits,temp99,function, $credit,_name,9age,name$ 请问哪些变量不合法?
- var和let声明有什么不同?
- 变量提升是怎么一回事?