JavaScript漫谈之深入理解变量

2019-09-11 admin

更多内容请关注GitHub

变量是大多数编程语言的基础,并且是要掌握的第一个也是最重要的一个概念。在JavaScript中有许多变量属性以及需要遵守的规则。

一、理解变量

变量是用于存储值的命名容器。在JavaScript中,变量的值可以是任何数据类型,比如numberstringobject等。

ES6之前,声明变量只有一种方式,就是使用关键字var。以下就是使用var声明一个变量并赋值对其进行赋值。

var name = 'sueRimn';

// 变量的值可以是JavaScript中的任何数据类型
var age = 22; 
var friends = [1, 2, 3]; 
var family = {father: 'hui', mother: 'hua'};
var boy = false;
var nothing = null;
  • 变量将数据存储在内存中,之后可以访问和修改这些数据
  • 变量也可以重新分配并给定一个新值

下面演示了如何将数据存储到变量中,然后进行更新:

var name = 'sueRimn';
name = '八至';
console.log(name); // '八至'

二、命名变量

变量名在JavaScript中称为标识符。命名标识符在JavaScript中有一定的规则,如下:

  • 变量名只能由字母、数字、$符号以及下划线组成
  • 变量名不能包含任何空白字符(制表符或空格)
  • 变量名的首字符不能为数字
  • 个别保留字和关键字不能用作变量的名称
  • 变量名区分大小写

另外还有一些非强制但建议使用的规则可以使你的代码更具有规则、可读性以及二次维护性:

  • 变量名使用驼峰命名法
  • const声明的常量使用大写
  • 尽量使用let声明变量而不是var

在JavaScript中,使用三个关键字声明变量:

  • var:声明全局变量
  • let:声明局部变量
  • const:声明局部常量,不可更改值

下面讲讲述这三种声明方式的区别。

三、声明变量

变量声明,无论发生在何处,都在执行任何代码之前进行处理。使用varletconst声明的区别是基于作用域、提升以及重新分配定义的。

(1)使用var声明变量

1)声明变量

MDN这样解释:用 var 声明的变量的作用域是它当前的执行上下文,对于任何函数之外声明的变量,它要么是封闭函数,要么是全局的。如果您重新声明一个JavaScript变量,它将不会丢失自己的值。

为未声明的变量赋值时会悄咪咪地将其创建为全局变量(它将成为全局对象的属性)。

声明变量和未声明变量的区别如下:

  • 声明的变量局限于声明时所处的执行上下文,未声明的变量是全局的;
  • 声明的变量在执行任何代码之前被创建,未声明变量在分配给它们的代码执行之前不存在
  • 声明的变量是其执行上下文(函数或全局)的不可配置属性,未声明变量是可配置的(如:可删除)

因为没有声明的变量在严格模式下一定会报错,所以强烈建议不管在函数作用域还是全局作用域内,一定要声明变量

2)存在提升

因为变量声明是在执行任何代码之前执行的,所以在代码中的任何位置声明变量都是在代码顶部声明变量。这也意味着变量可以在声明之前出现。这种行为称为**”变量提升”**,因为变量声明总是被自动移动到函数或全局代码的顶部。当变量未赋值时,会报undefined错误,即未定义。 图片描述

上面代码可见name变量在声明前赋值了, 但是没有报错,那是因为自动变量提升,其实其执行顺序是这样的:

var name;
name = '八至';

图片描述

而以上代码这种情况就是,在声明之前未赋值的变量出现了,显示undefined,这是因为JavaScript仅提升声明,不提升初始化,如果先使用变量,在声明并初始化,变量的值将是undefined,其执行顺序是这样的:

var age;
console.log(age); 

建议不管是在函数内部还是全局作用域,变量声明都应该在代码顶部首先进行。

3)var声明的变量可重新分配值

使用var声明的变量可以重新被声明和重新被分配值。

var name = 'sueRimn';
name = '八至'; // 重新分配值
var name = '小九'; // 重新声明
console.log(name); // 小九

(2)使用let声明变量

let声明一个块级作用域的本地变量,并且可将其初始化。

let name = 'sueRimn';

1)声明变量

let允许声明一个块级作用域的变量、语句或者表达式。与 var关键字不同的是, var声明的变量是属于全局或者整个封闭函数块的。

图片描述

图片描述

看到上面代码的区别了吗,let声明的变量属于块级作用域({})的,if语句中属于块级作用域,var不局限于块级作用域,变量被从新赋值,所以打印的都是最新值;而let声明的变量局限于此,打印的是属于自己块级中的赋的值。

2) 不存在提升

let声明的变量是不存在变量提升的:

图片描述

这是因为在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区“。

如果使用typeof操作符检测处于暂存死区的变量,会抛出ReferenceError的错误:

图片描述

3)不允许重复声明

let声明的变量可以重新赋值,但是不能重新声明,重新声明会抛出SyntaxError的错误:

图片描述 图片描述

(3)使用const声明常量

1)声明

const声明的常量属于块级作用域,常量的值不能重新赋值,并且不能重新声明。

const AGE = 22;

const声明创建一个只读的值。但这并不意味着它所持有的值是不可变的,只是说变量标识符不能重新分配。

不可重新赋值

图片描述

不可重新声明

图片描述

声明常量的时候必须初始化

图片描述

2)不存在提升

const命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用。

(4)区别

关键字 变量作用域 存在提升 能否重新声明 能否重新分配值
var 函数作用域 YES YES YES
let 块级作用域 NO YES NO
const 块级作用域 NO NO NO

四、总结

本文中,讲述变量是什么、命名变量的规则以及声明变量的方式。知道了声明变量的三个关键字,并讲述了三种不同声明方式的区别以及变量所存在的作用域和是否存在提升,为了更好的执行JavaScript脚本,建议尽量多使用let以及const

[转载]原文链接:https://segmentfault.com/a/1190000020359839

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-74902.html

文章标题:JavaScript漫谈之深入理解变量

相关文章
JavaScript常用特效chm下载
下载地址:JavaScript常用特效chm下载 对了,如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
javascript是什么意思
avaScript是Netscape开发的一个对象脚本语言,它使用在世界各地数以百万计的网页和服务器应用程序上。 网景的JavaScript是ecma - 262版的标准脚本语言,和公布的标准只有轻微的差异。 与广为流行的错误理解相反,Ja...
2015-11-12
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
JavaScript变量的声明
声明变量 变量在脚本中的首次亮相是在其声明中。 在变量首次出现时将会在内存中设置它,因此您稍后可在脚本中引用它。 应在使用变量之前先声明变量。 可以使用 var 关键字实现此目的。 <span id=“mt9” class=“sent...
2015-11-12
jQuery中DOM树操作之使用反向插入方法实例分析
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用...
2015-11-13
7个提高效率的JavaScript调试工具
鐜板湪鐨凧avaScript浜嬪疄涓婂凡鐒舵垚涓轰簡娴佽�岀殑web璇�瑷€锛屽嵆浣垮畠骞朵笉瀹岀編銆傚緢澶氱▼搴忓憳涓嶅枩娆㈢敤JavaScript鍐欎唬鐮侊紝鏄�鍥犱负鍐欏埌鍚庢潵鎬讳細鍑虹幇鍚勭�嶈帿鍚嶅叾濡欑殑bug锛岃€屼笖鍦ㄥ紑...
2015-11-11
回到顶部