javascript实践教程-03-变量

晴空闲云
• 阅读 943

本节目标

  1. 掌握声明变量的方式。
  2. 掌握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关键词进行声明

本节总结

  1. js中声明变量可以使用var和let,现在多用let。
  2. 变量命名需要一定的规则,另外需要见名识义。

练习题

  1. 请尝试声明相关变量来表示一个视频信息,如:视频id、视频地址,至少5个,可以参考视频应用。
  2. 请尝试声明相关变量来表示一个商品信息,如:商品id、商品名称,至少5个,可以参考电商应用。
  3. 请尝试声明相关变量来表示一篇文章信息,如:文章id、文章标题,至少5个,可以参考新闻应用。
  4. 请尝试声明相关变量来表示一条评论信息,如:评论id、评论内容,至少5个,可以各应用相关的评论功能。
  5. Number_hits,temp99,function, $credit,_name,9age,name$ 请问哪些变量不合法?
  6. var和let声明有什么不同?
  7. 变量提升是怎么一回事?
点赞
收藏
评论区
推荐文章
Souleigh ✨ Souleigh ✨
1年前
JavaScript - 关于 var、let、const 的区别使用
一、var在ES5中,顶层对象的属性和全局变量是等价的,用var声明的变量既是全局变量,也是顶层变量注意:顶层对象,在浏览器环境指的是window对象,在 Node 指的是global对象var a  10; console.log(window.a) // 10 使用var声明的变量存在变量提升的情况console.log(a) // undefine
郜小超 郜小超
1年前
面试问题总结(持续更新中。。。)
1.let const var 的区别 在JavaScript中,有三个关键字可用于声明一个变量,并且每个关键字都有其不同之处。分别var,let和const。一个简单粗暴的解释:使用const关键字声明的变量不能被重新赋值,let而且var可以。也可以这么说:const只可以声明一个常量(js中一旦被定义就无法再被修改的变量,称之为常量)。 eg:
Wesley13 Wesley13
1年前
ES6之常用开发知识点:入门(一)
ES6介绍 ----- ES6, 全称 ECMAScript 6.0 ,2015.06 发版。 let 和 const命令 ------------- ### let命令 let 命令,用来声明变量。它的用法类似于var,区别在于var声明的变量全局有效,let 声明的变量只在它所在的代码块内有效。 使用var声明: var a = []
Wesley13 Wesley13
1年前
ES6 常用语法
### 什么是ES6 ECMAScript 6 简称ES6, 在2015年6月正式发布~  ECMAScript 是JavaScript语言的国际标准。 我们本着二八原则,掌握好常用的,有用的~能让我们更快的上手~~~ ### 1  声明变量const  let  var ES6以前 var关键字来声明变量,无论声明在何处都存在变量提升这个事情~~会
Stella981 Stella981
1年前
Rust学习笔记#2:变量声明、绑定与引用
![](https://oscimg.oschina.net/oscnet/up-2a26b061f3ae6214fc3a12b58a2ad0e8433.JPEG) ### 变量声明 #### 基础知识 Rust中的变量分局部变量和全局变量两种,且必须先声明后使用,常见的声明语法为: // 声明局部变量,使用let关键字 let va
Wesley13 Wesley13
1年前
java与golang语法比较(一)
变量声明与赋值 ------- * Java int i; // 声明 int j = 1; // 声明+赋值 * Go var i int // 声明 i := 1 // 声明+赋值 1. 变量声明:var是关键字,格式:var
Wesley13 Wesley13
1年前
ES6学习笔记(一)
1.let 和 const 命令 let用法和var类似,但是声明的变量只在let命令所在的代码块内有效 { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 上面代码在代码块之中,分别用let和var声明了两
Wesley13 Wesley13
1年前
ES6快速入门
快速了解ES6部分新特性。。。 let和const  ---------- ### let ES6新增了let命令,用于声明变量。其用法类似var,但是声明的变量只在let命令所在的代码块内有效。 { let x = 10; var y = 20; } x // ReferenceE
Easter79 Easter79
1年前
Systemverilog for design 笔记(四)
### 转载请标明出处 **数组、结构体和联合体** ============== 1. **结构体(struct)** ------------------ ### 1.1. **结构体声明** 结构体默认是变量,也可以声明为线网 **var struct** { // 通过var进行结构体变量声明 logic \[31:0\] a, b;
Stella981 Stella981
1年前
JavaScript 声明全局变量的三种方式
JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍。 **声明方式一:** 使用var(关键字)+变量名(标识符)的方式在function外部声明,即为全局变量,否则在function声明的是局部变量。 **声明方式二:** 没有使用var,直接给标识符e赋值,这样会隐式的声明了全局变量e。即使该语句是在一个function内,当该funct
晴空闲云
晴空闲云
Lv1
教师
专注前端,把复杂的编程讲简单,又不失深度。@公众号:晴空闲云
26
文章
4
粉丝
2
获赞