变量

JavaScript 变量的学习免费看

变量声明、变量的命名规则、同时声明多个变量、重复声明变量

2020-05-20侠课岛    基础入门       

前端/前端必修/JavaScript 基础知识梳理 16     0     610

JavaScript 中变量是用于存储数据值的容器,举个例子,例如 var a = 1 , 其中 a 就是一个变量,1是存入变量的值,也叫做字面量。 在实际应用中,变量很频繁的被使用,所以我们接下来好好学习一下变量。

变量声明

我们可以使用关键字 var 来声明变量,变量定义好后可以给它赋值,给变量赋值时可以使用等号 =

当然为了方便我们也可以在声明变量的同时直接给变量赋值,这样更方便,使用 var 关键字声明变量后,可以对变量进行修改。

注意哟,如果声明一个变量之后,不给这个变量赋值,那么这个变量是空的(其值实际上是 undefined)。

示例:

例如下面的我们定义了变量名为 a、b 的变量,并向其赋值:

<script>
  var a;       // 定义变量
  a = 10       // 给变量赋值
  var b = 35;  // 定义变量并赋值
</script>

从上面代码我们可以看出变量 a 储存的值为10,变量 b 储存的值为 35。而变量 ab 是我们给变量定义的变量名。

这很简单对不对,现在你已经学会使用关键字 var 声明变量了吗?假设现有一个变量名为 my_name,请你将自己的名字赋值给这个变量吧。

变量的命名规则

我们定义变量的时候,是不是随便我们怎么定义呢?给变量命名也是有规则的,我们来看一下:

  • 变量名区分大小写,例如TesttestmyNamemyname 是不一样的。
  • 变量名可以包含字母、数字、美元符号 $ 和下划线 _,不允许包含空格和其他标点符号。
  • 注意变量名的第一个字符不允许是数字,即不能以数字开头,例如 9xkd 这样的变量名是错误的。
  • 变量命名长度应该尽可能的短,并抓住要点,尽量在变量名中体现出值的类型。
  • 禁止使用 JavaScript 关键词、保留字全名作为变量名,例如varbreakfunction 等不能作为变量名。
  • 变量名命名方法一般用驼峰命名法,例如firstNamemyLastName,这样的变量名看上去就像骆驼峰一样此起彼伏。
  • 一般虽然使用中文作为变量名也不会报错,但是我们并不建议这样做。

我们来总结一下比较重要的点,首先变量名可以是由 英文字母、数字、下划线_、美元符号 $ 组合而成,但是不以数字开头,不可以使用关键字作为变量名。

学到这里你应该差不多懂了如何给变量命名了吧,那请你定义五个不同的变量名吧。

同时声明多个变量

JavaScript 语言中,我们可以在一条语句中,同时声明很多个变量,语句同样是以关键字 var 开头,且使用逗号分隔变量。

示例:

例如像下面这样同时声明三个变量:

// 同时声明三个变量
var name = "xkd", age = 20, sex = "男";

// 输出变量的值
console.log(name, age, sex);  // xkd 20 男

或者也可以像下面这样写,定义多个变量时,是否换行并不会造成影响:

var name = "summer",
age = 20, 
sex = "女";

需要注意一下,虽然 JavaScript 可以同时声明多个变量,但是 JavaScript 并不支持同时给多个变量赋同一个值,如果你这样做,那么只有最靠近等号 = 的那个变量才能会被赋值成功。

示例:

例如我们来看下面这段代码,同时给变量 ab 赋值为1:

<body>
  <p>var a, b = 1;的写法只能给b成功赋值,不能给a赋值</p>
<script>
  var a, b = 1;
  console.log(a);
  console.log(b);
</script>
</body>

在浏览器中打开页面,截图如下:

如上图所示,最终结果只有变量b 被赋值成功,而 a 没有被赋值,没有被赋值的变量默认值为 undefined。

重复声明变量

如果我们对已经声明好的变量再次进行声明赋值,变量的值会被改变。

示例:

例如我们已经声明好了一个变量 a,并给它赋值为1 :

var a = 1;
console.log(a);  // 1

此时如果我们再次声明变量 a 并对它赋值为10,此时a 的值会被改变,如下所示:

var a = 1;
console.log(a);  // 1

var a = 10;
console.log(a);  // 10

前面说过如果只声明变量,不给这个变量赋值,那么变量的值默认为 undefined。但是在重复声明变量时不是这样的,看下面这个代码:

var a = 1;
console.log(a);  // 1

var a
console.log(a);  // 1

动手小练习

  1. 请声明三个不同的变量并给它们赋值。
  2. 在浏览器的控制台,输出你定义好的变量的值。
  3. 请问下面的代码如果在浏览器中执行,输出结果会是什么?
var a = 1;
var a, b = 10;
var c;
var b, c = 15;

console.log(a);
console.log(b);
console.log(c);

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

16

本课评分:
  •     非常好
难易程度:
  •     适中的

内容目录


本文索引


|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?