JavaScript 变量
变量来源于数学,是计算机语言中能储存计算结果或能表示值抽象概念。
变量就是 存放一些 内容 的 容器 。
对于初学者,理解变量是重要的一环。
从分析 变量 这个名词,可以知道他是 一个 可以改变的量 ,这里的量就是代表某一种 值 。
在 JavaScript 中,变量就是 一个 用来存放值的容器,并且可以对容器中的值做 修改 。
每个变量都有唯一的变量名,使用变量名来区分变量。
1. 声明变量
在 JavaScript 中使用 var 关键字来声明变量。
var 存放数字用的变量 = ; console . log ( 存放数字用的变量 ) ; // 输出 :996
上述这段 代码 就是 申明 了 一个 名为 存放数字用的变量 的变量,并且将它的值设为 996 。
使用 console.log ,括号内放置 变量名 ,即可将变量的值 输出 在控制台。
其中 // 后面的 内容 为 注释 , 代码 执行过程中会被忽略。
虽然使用 中文 作为变量名在 chrome 浏览器下没有报错,但是还是不建议使用。
常规场景中 不会有使用 中文 名作为变量的情况 。
所以上述例子中的变量名不可取。
var number = ; console . log ( number ) ; // 输出 :996
将 存放数字用的变量 修改 成 number ,执行结果是一样的。
2. 赋值
给变量设置值的操作称为 赋值 操作。
2.1 最简单的赋值操作
var result = ; console . log ( result ) ; // 输出 :0
这是 一个 最简单的赋值操作,直接将值赋给变量。
通常只有 一个 等号 出现的情况下就存在赋值操作。
2.2 将计算结果赋值给变量
var result = + ; console . log ( result ) ; // 输出 :5
这也是 一个 赋值操作,只不过等号右边的 2 + 3 会被计算出结果(计算的方式和小学开始学习的自然数学一样),再赋给变量 result 。
将上面这个例子做 一个 简单的改写:
2.3 让变量也参与计算
var number1 = ; var number2 = ; var result = number1 + number2 ; // 2 + 3 console . log ( result ) ; // 输出 :5
原本 2 + 3 这部分也可以被变量所代替,参与计算的就是变量中的值。
2.4 改变变量的值
var string = '今天加班?' ; console . log ( string ) ; // 输出 :今天加班? string = '福报!' ; console . log ( string ) ; // 输出 :福报!
注意:
这里赋给变量的值和之前有点不一样,是 中文 文字 。
当需要用变量存放一些“字”的时候,就需要用单引号 ' 或者双引号 " 将需要存放的字包裹。
通常单个字会称之为 字符 ,多个字的时候称为 字符串 。
这里做个了解,具体的会在后续 数据类型 章节详细展开讨论。
这段 代码 运行后可以在控制台观察到有两个 输出 ,分别对应变量的值。
代码 很简单,先声明了 一个 叫 string 的变量,并赋值字符串 今天加班? 并 输出 ,随后 修改 了他的值,重新赋值了字符串 福报! 。
这是变量最重要的 一个 特性: 可变 。
3. 变量的命名规范
在 JavaScript 中变量名存在一定规范,所有变量名必须符合这些规范,否则程序无法执行。
3.1 变量名必须使用 字母 、 下划线(_) 、 美元符号($) 开头
尽管之前的例子有用到 中文 作为变量名,但是是不推荐的。
// 不会报错但是不推荐 var 数字 = ; // 错误 var 1number = ; // 错误 var number@a = ; // 错误 var num + aa = ; //下面是正确的方式 var number1 = ; var _number = ; var $number = ;
以上是一些简单的示例,可以根据规则自己在控制台尝试寻找规则。
3.2 变量对大小写敏感
// 这是两个不同的变量 var f irs tName = 'Hello' ; var f irs tname = 'hello' ;
以上是两个不同的变量,在 JavaScript 中变量是对大小写敏感的。
两个变量名即便字母是相同的,但是大小写不同,就不能算做 一个 变量。
3.3 无法使用关键字作为变量名
关键字 就是指一些已经被 JavaScript 预定义或者保留下来的 内容 ,如声明变量用的关键字 var 就不能作为变量名。
var var = ; // Uncaught Syntax Error: Unexpected token 'var'
上面这段 代码 尝试着将 var 作为变量,到控制台运行是会报错的。
4. 合理规范的变量名
刚开始学习的读者,现在去深究如何命名 一个 变量还有些尚早,因为结合了具体的需求场景才能体会到 一个 好的变量名的重要性。可以先在此做个了解。
对于变量名,除了上面提到的变量命名的规范,最需要注意的就是给变量起 一个 有意义 的名字。
如求和:
var num1 = ; var num2 = ; var num3 = ; var num4 = ; var count = num1 + num2 + num3 + num4 ;
其中 num 是 number 的缩写,是很常用的一种缩写。
count 则是总数,表示求和的结果。
如果将上述例子做如下 修改 :
var a = ; var b = ; var c = ; var d = ; var e = a + b + c + d ;
缺少了有意义的变量名就比较难看出 代码 具体在做什么。当然这段 代码 本身意义就不大,场景太过简单。
刚才提到的缩写,其实也是要注意的一点,缩写上一定要使用通用的缩写,如含有 fn 表示 一个 功能 或者 函数 , avg 表示平均值, pwd 表示密码, i18n 为国际化。
这些缩写比较通用,大部分开发者都可以看得懂。随着编码经验的 增加 ,会在他人 代码 里见到大量的缩写,从而累积到自己的大脑的缩写库中。
最后需要注意的一点是业务中尽量不要含有 中文 拼音或 中文 拼音的缩写,排开鄙视链的原因,最大的问题是会让变量名变得冗长难懂。
以上 内容 在写 demo 或者测试 功能 的时候可以不需要考虑,写 demo 等大部分情况是为了验证自己的猜想。
// 不合理的变量名 var ln = 'World' ; // last name var zs = ; // 总数 var jinNianDeNianShouRu = ; // 今年的年收入
以上是针对 变量名的意义 展开的讨论。
还有需要注意的是变量命名的格式,大部分前端程序员会使用 驼峰命名法 ,也就是第 一个 字母小写,后续如果有新的单词来进行构成,单词的第 一个 字符都大写。
如:
var f irs tName = 'Hello' ; var lastName = 'world' ; var createAt = ; var userInfo = ' 用户 信息' ; // Info => @R_989_ 403 7@ion var isPaidUser = '是否付费 用户 ' ;
可以见到上面的变量,从构成变量名的第二个单词开始,首字母都是大写,这就是驼峰命名的格式,本 Wiki 所有变量名使用的就是这种格式。
当然还有大驼峰,就是第 一个 字母也大写。
除此之外最常用的还有使用下划线分隔变量,如 user_info ,还有按 功能 来划分的变量名,如使用 匈牙利命名 法,这里不再做展开。
5. 有关变量的其他知识
5.1 变量的 默 认值
变量在声明的时候,如果没有赋值,则变量就会有 一个 默 认值 undefined 。
var total ; console . log ( total ) ; // 输出 :undefined
undefined 是一种是数据类型,具体 内容 可以参考 数据类型 章节。
5.2 同时声明多个变量
使用 一个 var 关键字就可以直接声明多个变量。
var num1 = , num2 = ; // 通常会换行,方便阅读 代码 var num3 = , num4 = , num5 = , num6 , num7 = ;
在 一个 变量声明后,使用逗号分隔,紧接着声明下 一个 变量即可。
通常使用 一个 var 声明多个变量的时候也会换行,方便后续阅读,并保持 代码 格式上的整洁清晰,防止一行过长。
5.3 变量在 window 上
在最外层声明的变量(不 包括 ES6 模块的情况),实际上是变成了 window 对象的 一个 属性 。
var number = ; console . log ( number ) ; // 输出 :996 console . log ( window . number ) ; // 输出 :996
上述 代码 执行后 输出 的两个 内容 是一样的,都为 996。有关 window 对象的 内容 可以参考 BOM 章节。
细心的读者应该会注意到 最外层 这个条件,因为变量还有可能声明在 函数 之中, 函数 有自己独立的作用域,通常在 函数 中使用 var 关键字声明的变量,只在 函数 中有效。
至于为什么可以省略 window 直接访问到变量,可以参考 作用域链 章节。
5.4 不使用 var 关键字声明的变量
假如不使用 var 关键字,直接创建变量并赋值:
total = ; console . log ( total ) ; // 输出 :10
在控制台运行后会发现其实并没有报错, 输出 的结果也正常。
在非 ES6模块 中,这样创建的变量和使用 var 创建的变量除了不能提前使用之外,没有其他大的区别,会被直接作为 window 对象的 属性 ,成为 全局变量 。
即便是在 函数 或者其他存在块级作用域的环境中,这样声明的变量也会作为 全局变量 。
5.5 连续赋值
var a = b = ;
假如把上面这行 代码 拆开来可以理解成是这样的:
b = ; var a = b ;
看似没什么问题,许多开发者也会用这种方式同时声明多个变量,但如果在 函数 或者独立的作用域中, b 就会成为 全局变量 ,造成全局命名空 间的 污染。
5.6 重复声明变量
按照之前说的,变量在声明的时候如果没有赋值,则会是 undefined ,这个规则在重复声明的情况下不适用。
var num = ; var num ; console . log ( num ) ; // 输出 :1
观察上面这个例子 输出 的结果,可以发现变量 num 的值并没有改变。
但是如果重新声明的同时做赋值操作,值就会改变。
var num = ; var num = ; console . log ( num ) ; // 输出 :3
这个例子 输出 的结果,就是再次声明并赋值后的值。
5.7 提前使用变量
console . log ( number ) ; // 输出 :undefined var number = ;
这个例子先 输出 了 number 的值,再声明并对其进行赋值。
代码 并没有报错,但如果没有第二行声明,只 输出 number :
console . log ( number ) ; // Uncaught ReferenceError: number is not defined
这样子会爆出 变量未定义 的 错误 ,说明变量是可以被提前使用,只是没有值,或者说是 undefined 默 认值。
具体原因可以参考 执行上下文 章节。
这里简单的解释可以理解成,在浏览器执行的时候,会把 代码 调整成如下样子:
var number ; console . log ( number ) ; // 这个时候 number 还没有被赋值,所以 输出 undefined number = ;
5.8 常量
常量就是定义并赋值后再也不能 修改 的量,通常一些不会改变的量,如配置、物理值等会声明为常量,在 ES6 之前是没有提供常量这一特性的。
但是根据常量自身的特性, 定义赋值后不能被 修改 ,就可以通过一些方式来模拟常量。
第一种就是采用约定的形式,通常常量都是大写,不同单词之间用下划线分隔。
var PI = ; var DB_ACCOUNT = 'root' ; var DB_PASSWORD = 'root' ;
这种方式定义的 常量 本质上还是变量,值还是可以 修改 的,但因为命名格式采用 国际惯例 ,一眼就能看出是常量,不会对其 修改 。
这种方式是最简单的方式,但不安全。
第二种方式就是利用对象下 属性 的描述来控制可写性,将对象的 属性 设置为只读。
var CON fig = { } ; Object . defineProperty ( CON fig , 'DB_ACCOUNT' , { value : 'root' , writable : false , } ) ; console . log ( CON fig . DB_ACCOUNT ) ; // 输出 :root CON fig . DB_ACCOUNT = 'guest' ; console . log ( CON fig . DB_ACCOUNT ) ; // 因为不可被改写,所以 输出 :root
这种方式将常量都放在 一个 对象下,通过 Object.defineProperty 定义 属性 ,设定其 writable 为 false ,就可以防止被改写。
但有 一个 问题, CON fig 自身这个对象可能被 修改 。
换 一个 思路,既然在最外层声明的变量是放在 window 上的,那可以用这个方式往 window上挂不可改写的 属性 。
Object . defineProperty ( window , 'DB_ACCOUNT' , { value : 'root' , writable : false , } ) ; console . log ( DB_ACCOUNT ) ; // 输出 :root DB_ACCOUNT = 'guest' ; console . log ( DB_ACCOUNT ) ; // 因为不可被改写,所以 输出 :root
通常情况下 window 对象是不可被 修改 的,这样常量的安全系数就变得非常高,但缺点是可能性较差,通过一点 修改 可以提升可读性。
var define = function ( name , value ) { Object . defineProperty ( window , name , { value : value , writable : false , } ) ; } ; define ( 'DB_ACCOUNT' , 'root' ) ; define ( 'DB_PASSWORD' , 'root' ) ;
只要约定好使用 define 函数 定义的都为常量即可。
还有两种方式,就是结合 Object.seal 与 Object.freeze 的特性来声明常量。
前者可以使对象不能再被扩充,但是所有 属性 还需要再手动设置不可写,后者可以让对象不能扩充, 属性 也不能 修改 。
这里对这两个原生 方法 不再做过多描述,有兴趣可以查阅相关 API 资料。
6. 小结
变量就是存放值的容器。
变量名存在一些命名规则:
变量名必须使用 字母 、 下划线(_) 、 美元符号($) 开头; 变量对大小写敏感; 无法使用关键字作为变量名。
同时起变量名的时候需要有意义,靠近上下文场景。
JavaScript 数据类型 ? ?调试方案声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://haodehen.cn/did92404