php解析js变量技巧_一文详解JavaScript的变量超具体建议收藏

作者|慕课网精英讲师 然冬

变量便是存放一些内容的容器。

对付初学者，理解变量是主要的一环。

从剖析变量这个名词，可以知道他是一个可以改变的量，这里的量便是代表某一种值。

在 JavaScript 中，变量便是一个用来存放值的容器，并且可以对容器中的值做修正。

每个变量都有唯一的变量名，利用变量名来区分变量。

1. 声明变量

在 JavaScript 中利用var关键字来声明变量。

var 存放数字用的变量 = 996;console.log(存放数字用的变量); // 输出：996代码块123

上述这段代码便是申明了一个名为存放数字用的变量的变量，并且将它的值设为996。

利用 console.log，括号内放置变量名，即可将变量的值输出在掌握台。

个中 // 后面的内容为注释，代码实行过程中会被忽略。

虽然利用中文作为变量名在 chrome 浏览器下没有报错，但是还是不建议利用。

常规场景中不会有利用中文名作为变量的情形。

以是上述例子中的变量名不可取。

var number = 996;console.log(number); // 输出：996代码块123

将存放数字用的变量修正成 number ，实行结果是一样的。

给变量设置值的操作称为赋值操作。

var result = 0;console.log(result); // 输出：0代码块123

这是一个最大略的赋值操作，直接将值赋给变量。

常日只有一个等号涌现的情形下就存在赋值操作。

var result = 2 + 3;console.log(result); // 输出：5代码块123

这也是一个赋值操作，只不过等号右边的 2 + 3 会被打算出结果（打算的办法和小学开始学习的自然数学一样），再赋给变量 result。

将上面这个例子做一个大略的改写：

var number1 = 2;var number2 = 3;var result = number1 + number2; // 2 + 3console.log(result); // 输出：5代码块123456

原来 2 + 3 这部分也可以被变量所代替，参与打算的便是变量中的值。

var string = '本日加班？';console.log(string); // 输出：本日加班？string = '福报！
';console.log(string); // 输出：福报！
代码块1234567

把稳：

这里赋给变量的值和之前有点不一样，是中文笔墨。

当须要用变量存放一些“字”的时候，就须要用单引号'或者双引号"将须要存放的字包裹。

常日单个字会称之为字符，多个字的时候称为字符串。

这里做个理解，详细的会在后续数据类型章节详细展开谈论。

这段代码运行后可以在掌握台不雅观察到有两个输出，分别对应变量的值。

代码很大略，先声明了一个叫 string 的变量，并赋值字符串本日加班？并输出，随后修正了他的值，重新赋值了字符串福报！
。

这是变量最主要的一个特性：可变。

在 JavaScript 中变量名存在一定规范，所有变量名必须符合这些规范，否则程序无法实行。

只管之前的例子有用到中文作为变量名，但是是不推举的。

// 不会报错但是不推举var 数字 = 1;// 缺点var 1number = 1;// 缺点var number@a = 1;// 缺点var num+aa = 2;//下面是精确的办法var number1 = 1;var _number = 1;var $number = 1;代码块12345678910111213

以上是一些大略的示例，可以根据规则自己在掌握台考试测验探求规则。

3.2 变量对大小写敏感

// 这是两个不同的变量var firstName = 'Hello';var firstname = 'hello';代码块123

以上是两个不同的变量，在 JavaScript 中变量是对大小写敏感的。

两个变量名即便字母是相同的，但是大小写不同，就不能举措看成一个变量。

关键字便是指一些已经被 JavaScript 预定义或者保留下来的内容，如声明变量用的关键字 var 就不能作为变量名。

var var = 1; // Uncaught SyntaxError: Unexpected token 'var'代码块1

上面这段代码考试测验着将 var 作为变量，到掌握台运行是会报错的。

刚开始学习的读者，现在去穷究如何命名一个变量还有些尚早，由于结合了详细的需求场景才能体会到一个好的变量名的主要性。
可以先在此做个理解。

对付变量名，除了上面提到的变量命名的规范，最须要把稳的便是给变量起一个故意义的名字。

如求和：

var num1 = 1;var num2 = 2;var num3 = 3;var num4 = 4;var count = num1 + num2 + num3 + num4;代码块123456

个中num是number的缩写，是很常用的一种缩写。

count则是总数，表示求和的结果。

如果将上述例子做如下修正：

var a = 1;var b = 2;var c = 3;var d = 4;var e = a + b + c + d;代码块123456

短缺了故意义的变量名就比较丢脸出代码详细在做什么。
当然这段代码本身意义就不大，场景太过大略。

刚才提到的缩写，实在也是要把稳的一点，缩写上一定要利用通用的缩写，如含有fn表示一个功能或者函数，avg 表示均匀值，pwd 表示密码，i18n 为国际化。

这些缩写比较通用，大部分开拓者都可以看得懂。
随着编码履历的增加，会在他人代码里见到大量的缩写，从而累积到自己的大脑的缩写库中。

末了须要把稳的一点是业务中只管即便不要含有中文拼音或中文拼音的缩写，排开鄙视链的缘故原由，最大的问题是会让变量名变得冗长难懂。

以上内容在写 demo 或者测试功能的时候可以不须要考虑，写 demo 等大部分情形是为了验证自己的猜想。

// 不合理的变量名var ln = 'World'; // last namevar zs = 0; // 总数var jinNianDeNianShouRu = 1999999999; // 今年的年收入代码块1234

以上是针对变量名的意义展开的谈论。

还有须要把稳的是变量命名的格式，大部分前端程序员会利用驼峰命名法，也便是第一个字母小写，后续如果有新的单词来进行构成，单词的第一个字符都大写。

如：

var firstName = 'Hello';var lastName = 'world';var createAt = 1577895179196;var userInfo = '用户信息'; // Info => Informationvar isPaidUser = '是否付用度户';代码块123456789

可以见到上面的变量，从构成变量名的第二个单词开始，首字母都是大写，这便是驼峰命名的格式，本 Wiki 所有变量名利用的便是这种格式。

当然还有大驼峰，便是第一个字母也大写。

除此之外最常用的还有利用下划线分隔变量，如 user_info，还有按功能来划分的变量名，如利用匈牙利命名法，这里不再做展开。

变量在声明的时候，如果没有赋值，则变量就会有一个默认值 undefined。

var total;console.log(total); // 输出：undefined代码块123

undefined 是一种是数据类型，详细内容可以参考数据类型章节。

利用一个 var 关键字就可以直接声明多个变量。

var num1 = 0, num2 = 1;// 常日会换行，方便阅读代码var num3 = 2, num4 = 3, num5 = 4, num6, num7 = 6;代码块12345678

在一个变量声明后，利用逗号分隔，紧接着声明下一个变量即可。

常日利用一个 var 声明多个变量的时候也会换行，方便后续阅读，并保持代码格式上的整洁清晰，防止一行过长。

在最外层声明的变量（不包括 ES6 模块的情形），实际上是变成了 window 工具的一个属性。

var number = 996;console.log(number); // 输出：996console.log(window.number); // 输出：996代码块1234

上述代码实行后输出的两个内容是一样的，都为 996。
有关 window 工具的内容可以参考 BOM 章节。

细心的读者该当会把稳到最外层这个条件，由于变量还有可能声明在函数之中，函数有自己独立的浸染域，常日在函数中利用 var 关键字声明的变量，只在函数中有效。

至于为什么可以省略 window 直接访问到变量，可以参考浸染域链章节。

如果不该用 var 关键字，直接创建变量并赋值：

total = 10;console.log(total); // 输出：10代码块123

在掌握台运行后会创造实在并没有报错，输出的结果也正常。

在非ES6模块中，这样创建的变量和利用 var 创建的变量除了不能提前利用之外，没有其他大的差异，会被直接作为 window 工具的属性，成为全局变量。

即便是在函数或者其他存在块级浸染域的环境中，这样声明的变量也会作为全局变量。

var a = b = 1;代码块1

如果把上面这行代码拆开来可以理解成是这样的：

b = 1;var a = b;代码块12

看似没什么问题，许多开拓者也会用这种办法同时声明多个变量，但如果在函数或者独立的浸染域中，b 就会成为全局变量，造玉成局命名空间的污染。

按照之前说的，变量在声明的时候如果没有赋值，则会是 undefined，这个规则在重复声明的情形下不适用。

var num = 1;var num;console.log(num); // 输出：1代码块1234

不雅观察上面这个例子输出的结果，可以创造变量 num 的值并没有改变。

但是如果重新声明的同时做赋值操作，值就会改变。

var num = 1;var num = 3;console.log(num); // 输出：3代码块1234

这个例子输出的结果，便是再次声明并赋值后的值。

console.log(number); // 输出：undefinedvar number = 1;代码块123

这个例子先输出了 number 的值，再声明并对其进行赋值。

代码并没有报错，但如果没有第二行声明，只输出 number：

console.log(number); // Uncaught ReferenceError: number is not defined代码块1

这样子会爆出变量未定义的缺点，解释变量是可以被提前利用，只是没有值，或者说是 undefined 默认值。

详细缘故原由可以参考实行高下文章节。

这里大略的阐明可以理解成，在浏览器实行的时候，会把代码调度成如下样子：

var number;console.log(number); // 这个时候 number 还没有被赋值，以是输出 undefinednumber = 1;代码块123455.8 常量

常量便是定义并赋值后再也不能修正的量，常日一些不会改变的量，如配置、物理值等会声明为常量，在 ES6 之前是没有供应常量这一特性的。

但是根据常量自身的特性，定义赋值后不能被修正，就可以通过一些办法来仿照常量。

第一种便是采取约定的形式，常日常量都是大写，不同单词之间用下划线分隔。

var PI = 3.1415926535;var DB_ACCOUNT = 'root';var DB_PASSWORD = 'root';代码块1234

这种办法定义的常量实质上还是变量，值还是可以修正的，但由于命名格式采取国际老例，一眼就能看出是常量，不会对其修正。

这种办法是最大略的办法，但不屈安。

第二种办法便是利用工具下属性的描述来掌握可写性，将工具的属性设置为只读。

var CONFIG = {};Object.defineProperty(CONFIG, 'DB_ACCOUNT', { value: 'root', writable: false,});console.log(CONFIG.DB_ACCOUNT); // 输出：rootCONFIG.DB_ACCOUNT = 'guest';console.log(CONFIG.DB_ACCOUNT); // 由于不可被改写，以是输出：root代码块123456789101112

这种办法将常量都放在一个工具下，通过Object.defineProperty定义属性，设定其writable为false，就可以防止被改写。

但有一个问题，CONFIG自身这个工具可能被修正。

换一个思路，既然在最外层声明的变量是放在window上的，那可以用这个办法往 window上挂不可改写的属性。

Object.defineProperty(window, 'DB_ACCOUNT', { value: 'root', writable: false,});console.log(DB_ACCOUNT); // 输出：rootDB_ACCOUNT = 'guest';console.log(DB_ACCOUNT); // 由于不可被改写，以是输出：root代码块12345678910

常日情形下 window 工具是不可被修正的，这样常量的安全系数就变得非常高，但缺陷是可能性较差，通过一点修正可以提升可读性。

var define = function(name, value) { Object.defineProperty(window, name, { value: value, writable: false, });};define('DB_ACCOUNT', 'root');define('DB_PASSWORD', 'root');代码块123456789

只要约定好利用 define 函数定义的都为常量即可。

还有两种办法，便是结合Object.seal与Object.freeze的特性来声明常量。

前者可以使工具不能再被扩充，但是所有属性还须要再手动设置不可写，后者可以让工具不能扩充，属性也不能修正。

这里对这两个原生方法不再做过多描述，有兴趣可以查阅干系 API 资料。

变量便是存放值的容器。

变量名存在一些命名规则：

同时起变量名的时候须要故意义，靠近高下文场景。

欢迎关注「慕课网」，创造更多IT圈优质内容，分享干货知识，帮助你成为更好的程序员！