乐趣区

关于javascript:从头学前端03这次我就搞懂了JavaScript中的变量

Hello 大家好,我是此岸繁華🌸,一个想进大厂的大三学生,为了有一个残缺的前端常识体系,当初我要从头开始学习、梳理、总结。

本系列文章在掘金首发,编写不易转载请取得容许

JavaScript 中的变量

写在后面

这篇文章咱们未来学习 JavaScript 中的变量,这篇文章蕴含了变量的概念、申明、调用,以及在申明变量时的非凡状况等内容。

什么是变量

变量 是一个领有名字的用来存储数据信息的容器。在 JavaScript 中,变量是弱类型的,所谓的弱类型法就是这个变量能够存储任何类型的数据信息。

强类型的编程语言只能存储指定类型的,否则就会报错。

咱们在开发中通过应用变量要达到的目标具备 2 个:

  • 存储数据信息:申明一个变量用来存储指定数据信息。
  • 读取数据信息:调用一个变量从而失去其存储的数据信息。

在 JavaScript 中如果应用一个未声明的变量,将会抛出异样,示例代码如下图:

下面的代码就抛出一个 ReferenceError,阐明这个变量a 没有定义。

变量的申明与应用

在 JavaScript 语言中申明一个变量须要应用 var 关键字,能够选择性的对这个变量进行初始化。

在 ECMAScript2015 中新增了 letconst关键字,在当初编写代码时,var根本曾经被淘汰了。对于 letconst关键字咱们会在ECMAScript 新特色 中学习。

语法结构如下:

var varname1 [= value1] [, varname2 [= value2] ... [, varnameN [= valueN]]];

下面的语法中 varname 示意变量名,如果只有一个变量名示意申明,value示意变量的值,如果申明一个变量,并为其赋值,示意申明初始化。

如下代码演示了 var 关键字的应用:

var value1  // 仅仅申明

console.log(value1) // 拜访仅申明的变量会失去一个 undefined

var value2 = 'this is value2'

console.log(value2) // 将会失去 this is value2

变量的值也能够被批改,示例代码如下:

var message = 'Hello'
message = 'World'
console.log(message)

如果变量被从新赋值的话,之前的那个值就会被删除 ( 之前的值还存在别的变量援用除外 ),变量的赋值过程通过下图更好了解

变量命名的约定

每个变量名最好有一个明确的含意,杜绝应用 ab 这样的变量名,还能够采纳一种变量的命名办法,具体如下所示:

var helloWorld = 'Hello World' // 小驼峰命名法
var HelloWorld = 'Hello World' // 大驼峰命名法
var hello_world = 'Hello World' // 下划线命名法

应用 var 申明变量存在的问题

在 JavaScript 语言中申明变量时,还有一些操作是值得注意的。有些操作尽管可能运行代码时不会报错,但并不举荐的一些做法。

没有应用 var 关键字进行申明

后面咱们介绍了申明一个变量应用的是 var 关键字,但实际上咱们在除了严格模式认为的任何时候,JavaScript 容许咱们不通过 var 关键字来申明一个变量,示例代码如下:

message = 'Hello World'

咱们拜访这个 message 变量也会失去 Hello World 这个内容。

尽管这样的容许的,然而在理论开发中,并不举荐这么应用。

反复申明

在 JavaScript 语言中应用 var 关键字反复申明变量是容许的,并且不会有任何问题。只不过因为 JavaScript 语言中的变量只能存储一个数据信息,所以当反复申明变量并进行初始化的话,之前的数据信息将会被笼罩。如下示例代码所示:

var msg = 'this is message' // 值为 this is message
var msg = 100 // 值为 100

变量晋升

JavaScript 引擎的工作形式是,先解析代码,获取所有被申明的变量,而后再逐行执行。这造成的后果,就是所有的变量的申明语句,都会被晋升到代码的头部,这就叫做 变量晋升

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

下面代码首先应用 console.log 办法,在控制台显示变量 a 的值。这时变量 a 还没有申明和赋值,所以这是一种谬误的做法,然而实际上不会报错。因为存在变量晋升,真正运行的是上面的代码。

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

最初的后果是显示 undefined,示意变量a 已申明,但还未赋值。

在 ECMAScript2015 中新增了 letconst关键字就不存在变量晋升和反复申明的问题。

总结

预报:下一篇文章咱们未来学习 JavaScript 中的数据类型

精彩文章

【从头学前端】02-JavaScript 词法构造

【从头学前端】01- 什么是 JavaScript

退出移动版