前端-JavaScript1-4——JavaScript之变量

变量（Variables），和高中代数学习的x、y、z很像，它们不是字母，而是蕴含值的符号。

它和直接量不同，直接量5，就是数字5；直接量”你好”就是字符串“你好”。现在这个变量不一样了，你看见一个a，实际上它不是字母a，而是里面蕴含的不同的值。

4.1 整体感知

1 <script type="text/javascript">

2 //定义一个变量

3 var a;

4 //赋值

5 a = 100;

6 //输出变量a

7 console.log(a);

8 </script>

输出值为 100

我们使用var关键字来定义变量，所谓的关键字就是一些有特殊功能的小词语，关键字后面要有空格。

var就是英语variables变量的缩写，表示定义一个变量。一旦你

1 var a;

你的电脑内存中，就会开辟一个空间，来存储这个变量a。

现在就可以给这个变量赋值，JS中给变量赋值用等号，等号右边的值赋给左边。

1 a = 100;

现在a变量的值就是100。所以我们输出

1 console.log(a);

控制台就会输出a变量的值，就是100

4.2 变量必须先声明，才能使用

使用一个变量，必须先进行一个var，才能使用。var这个过程可以叫做声明declaration，也可以叫做定义definition。

现在我们直接运行语句：

1 console.log(b); //这个b没有被var过，所以要报错

因为b没有被定义，所以b现在不是一个变量，系统不认识这个b的。抛出引用错误。

变量的名称是标识符（identifiers），任何标识符的命名都需要遵守一定的规则：

在JavaScript语言中，一个标识符(identifier)可以由字母、下划线（_）、美元（$）符号、数字（0-9）组成，但不能以数字开头。也就是说，一个标识符必须由字母、下划线、美元符号开头，后续可以有字母、下划线、美元符号、数字。因为JavaScript语言是区分大小写的，所以A和a不是同一个变量。并且不能是JavaScript保留字、关键字。

保留字，是系统里面的有用途的字，为了不造成误会，不能成为标识符的名字。

保留字，不用背：

abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float
goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile

合法变量名的举例：

1
//
以下都是合法的变量名

2
var
a;

3
var
A;

4
var
b333;

5
var
_abc;

6
var
$;

7
var
$o0_0o$;

8
var
________;

9
var
_;

非法的：

1
var
123a; //不能数字开头

2
       var
12_a;   //不能数字开头

3
       var
abc@163;   //不能有特殊符号，符号只能有_和$

4
       var
abc￥;    //不能有特殊符号，符号只能有_和$

5
       var
var;     //不能是关键字

6
var class; //不能是保留字

变量的名字的长度实际上每个浏览器的规范不同，不用在意。

4.3 变量的赋值

变量的赋值用等号，等号就是赋值符号，在JS中等号没有其他的含义，等号就表示赋值。

1
var a; //定义

2
a = 100; //赋初值

3
console.log(a);

运行结果：

可以定义和赋初值一起写：

1
var a = 100;

2
console.log(a);

运行结果：

等号右边的值给左边，等号右边的值不变。

1
var a = 100;

2
var b = 200;

3
a = b; //在改变a变量的值，a的值变为200。b的值不变。

4
console.log(a);

5
console.log(b);

运行结果：

你会发现，变量只需要var一次，后面改变变量的值的时候，就不需要var了，可以直接改变它的值。

1
var a = 100;

2
a = 50;
//不需要写var

3
console.log(a);

如果一个变量，仅仅被var了，但是没有被赋初值呢，此时这个变量的值就是undefined;

1
var m;

2
console.log(m); //输出undefined

运行结果：

实际上我们已经var了这个m，已经定义了这个m，只不过这就是浏览器的一个规矩，如果这个变量没有被赋初值，那么这个变量就视为没有“定义完成”。值就是undefined。

4.4 变量声明的提升

这是js特有的一个特点，其他语言都没有这个特点。有些程序员挺反感这个特点的。

我们现在先去改变变量的值，然后定义变量，由于JS有一个机制，叫做变量声明的提升，所以现在程序在执行前会已经看见这个程序中有一行定义变量，所以就会提升到程序开头去运行。

1
<script
type="text/javascript">

2
a
= 100;

3
var
a; //这行定义变量会自动提升到所有语句之前

4
console.log(a);

5
</script>

记住，js只能提升变量的声明，而不能提升变量的赋初值

1 console.log(a);

2 var a = 100;

等价于：

1 var a; //自动升级

2 console.log(a);

3 a = 100; //赋初值还留在原地

4.5 不写var的情况

1 abc = 123;

2 console.log(abc);

定义abc的时候没有写var，程序没有报错，说明这个abc变量真的已经被定义成功了。现在你看不出来var和不var的区别，感觉都是成功的，但是日后你就会知道不写var定义了一个全局变量，作用域是不能控制的。

4.6 用逗号来隔开多个变量的定义

1 var a = 7 , b = 9 , c = 10;

逗号这个表示法，只能用于变量的连续定义，不要瞎用。

4.7 区分变量还是直接量

变量的时候，不能加引号。如果变量加上引号，就变成字符串了。

1
var a = 100;

2
console.log("a");

而不是输出100,

引号是“字符串”的定界符，所以在双引号里面的a已经失去了变量的意思，就是一个字符串a。

ok,附上代码

变量就是这个样子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        // //定义一个变量

        // var a;

        // //赋值

        // a = 100;

        // //输出变量a

        // console.log(a);

        // 这个语句将会引发错误，因为b没有进行定义

        // console.log(b);

        // // 以下都是合法的变量名

        // var a;

        // var A;

        // var b333;

        // var _abc;

        // var $;

        // var $o0_0o$;

        // var ________;

        // var _;

        // 以下都是非法的变量名

        // var 123a;

        // var 12_a;

        // var abc@163;

        // var abc￥;

        // var var;

        // var class;

        // var a;        //定义

        // a = 100;    //赋值

        // console.log(a);

        // var a = 100;

        // var b = 200;

        // a = b;        //在改变a变量的值，a的值变为200。b的值不变。

        // console.log(a);

        // console.log(b);

        // 定义不赋初值，值是undefined

        // var m;

        // console.log(m);

        // 不写var的时候实际上现在看不出来区别，今后就知道是一个全局变量

        // abc = 123;

        // console.log(abc);

        var a = 1 , b = 2 , c = 3;

        console.log(a);

        console.log(b);

        console.log(c);

    </script>

</head>

<body>

</body>

</html>

变量声明的提升

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>Document</title>

    <script type="text/javascript">

         a = 100;

         var a;        //这行定义会被自动提升

         console.log(a);

        console.log(b);        //提升只能提升定义，而不能提升赋初值。输出undefined

        var b = 100;        //提升定义，不能提升赋初值

    </script>

</head>

<body>

</body>

</html>

变量值的传递

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        var a = 1;

        var b = 2;

        var c = 3;

        a = b;     //这里改变a的值，a的值变为2，b的值不变仍是2

        b = c;    //这里改变b的值，b的值变为3，c的值不变仍是3

        c = a;  //这里改变c的值，c的值变为2，a的值不变仍是2

        console.log(a);    //2

        console.log(b);    //3

        console.log(c);    //2

    </script>

</head>

<body>

</body>

</html>

ojbk,下一篇走起。