好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

JavaScript 变量

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 数据类型 ? ?调试方案

查看更多关于JavaScript 变量的详细内容...

  阅读:54次

上一篇

下一篇

第1节:什么是 JavaScript    第2节:学习环境准备    第3节:调试方案    第4节:JavaScript 变量    第5节:JavaScript 数据类型    第6节:JavaScript if 语句    第7节:for 语句    第8节:JavaScript 算数运算符    第9节:JavaScript 比较运算符    第10节:JavaScript 逻辑运算符    第11节:JavaScript 函数    第12节:JavaScript 表达式    第13节:JavaScript 对象    第14节:JavaScript 字符串    第15节:JavaScript 数字    第16节:JavaScript 数组    第17节:JavaScript switch 语句    第18节:JavaScript while 语句    第19节:JavaScript 的 break 与 continue    第20节:JavaScript with    第21节:document.cookie    第22节:JavaScript Function    第23节:JavaScript Math    第24节:JavaScript Date    第25节:JavaScript RegExp    第26节:JavaScript JSON    第27节:什么是 DOM    第28节:DOM 和 JavaScript 的关系    第29节:获取和操作 DOM 节点    第30节:DOM 与事件    第31节:DOM 事件绑定    第32节:DOM 事件对象    第33节:DOM 事件流    第34节:事件相关的优化    第35节:自定义事件    第36节:表单校验    第37节:什么是 BOM    第38节:常用的 BOM 相关对象    第39节:BOM 常用属性和方法    第40节:AJAX    第41节:异常处理    第42节:三元运算符    第43节:逗号操作符    第44节:void    第45节:typeof    第46节:delete 操作符    第47节:debugger    第48节:getter & setter    第49节:new 运算符与构造函数    第50节:JavaScript 原型    第51节:JavaScript instanceof    第52节:JavaScript this    第53节:严格模式    第54节:作用域    第55节:闭包    第56节:变量提升    第57节:对象包装器    第58节:Lodash    第59节:moment    第60节:swiper    第61节:ECMAScript 6    第62节:Node.js    第63节:Babel    第64节:CSS 预处理器    第65节:代码规范    第66节:TypeScript    第67节:WebComponents    第68节:Vue、React、Angular    第69节:小程序    第70节:JavaScript 关键字    第71节:分号导致的问题    第72节:对象属性访问问题    第73节:this 使用问题    第74节:浮点数精度问题    第75节:独一无二的 NaN    第76节:避免全局污染    第77节:控制台观察对象问题    第78节:根据环境选择语言特性    第79节:相关资源