
JavaScript系列一:语言基础
前言
在开始学习之前,我们想要告诉您的是,本文章是对JavaScript语言知识中 "语言基础-语法和变量" 部分的总结,如果您已掌握下面知识事项,则可跳过此环节直接进入题目练习
- JavaScript 语法
- 声明变量与赋值
汇总总结
第一段代码
在开始学习 JavaScript 时,我们先看一段 JavaScript 代码,如下:
你能猜到这段代码的结果吗?这段代码的操作就是在控制台输出结果是 Hello JavaScript!,到这里第一段代码就结束了。
JavaScript 语法
区分大小写
你需要知道,ECMAScript 中一切都区分大小写。无论是变量、函数名还是操作符,都区分大小写。举个例子,变量 XHS 和变量 xhs 是两个不同的变量。
标识符
所谓标识符,就是变量、函数、属性或函数参数的名称。标识符可以由一或多个下列字符组成:
- 第一个字符必须是一个字母、下划线(_)或美元符号($);
- 剩下的其他字符可以是字母、下划线、美元符号或数字。
标识符中的字母可以是扩展 ASCII(Extended ASCII) 中的字母,也可以是 Unicode 的字母字符.
按照惯例,ECMAScript 标识符使用驼峰大小写形式,即第一个单词的首字母小写,后面每个单词的首字母大写,如:
虽然这种写法并不是强制性的,但因为这种形式跟 ECMAScript 内置函数和对象的命名方式一致, 所以算是最佳实践。
注意 关键字、保留字、true、false 和 null 不能作为标识符。
代码注释
JavaScript 中有两种注释方式:单行注释和多行注释。
注释的代码在程序中不会执行
单行注释以两个斜杠字符开头,如:
多行注释以一个斜杠和一个星号(/*)开头,以它们的反向组合(*/)结尾,如:
严格模式
ECMAScript 5 增加了严格模式(strict mode)的概念。严格模式是一种不同的 JavaScript 解析和执行模型,ECMAScript 3 的一些不规范写法在这种模式下会被处理,对于不安全的活动将抛出错误。要对整个脚本启用严格模式,在脚本开头加上这一行:
虽然看起来像个没有赋值给任何变量的字符串,但它其实是一个预处理指令。任何支持 JavaScript 的引擎看到它都会切换到严格模式。选择这种语法形式的目的是不
破坏 ECMAScript 3 语法。
也可以单独指定一个函数在严格模式下执行,只要把这个预处理指令放到函数体开头即可:
严格模式会影响 JavaScript 执行的很多方面,所有现代浏览器都支持严格模式。
语句
ECMAScript 中的语句以分号结尾。省略分号意味着由解析器确定语句在哪里结尾,如下面的例子所示:
即使语句末尾的分号不是必需的,也应该加上。记着加分号有助于防止省略造成的问题,比如可以避免输入内容不完整。此外,加分号也便于开发者通过删除空行来压缩代码(如果没有结尾的分号,只删除空行,则会导致语法错误)。加分号也有助于在某些情况下提升性能,因为解析器会尝试在合适的位置补上分号以纠正语法错误。
关键字与保留字
ECMA-262 描述了一组保留的关键字,这些关键字有特殊用途,比如表示控制语句的开始和结束,或者执行特定的操作。按照规定,保留的关键字不能用作标识符或属性名。
规范中也描述了一组未来的保留字,同样不能用作标识符或属性名。虽然保留字在语言中没有特定用途,但它们是保留给将来做关键字用的。以下是 ECMA-262 第 6 版为将来保留的所有词汇。
始终保留:
严格模式下保留
模块代码中保留
声明变量并赋值
在 JavaScript 中,有 3 个关键字可以声明变量: var、const 和 let。其中,var 在 ECMAScript 的所有版本中都可以使用,而 const 和 let 只能在 ECMAScript 6 (将在后面学到) 及更晚的版本中使用。
var 关键字
要定义变量,可以使用 var 关键字,后跟变量名:
这行代码定义了一个名为 xhsRookies 的变量,可以用它保存任何类型的值。ECMAScript 实现变量初始化,因此可以同时定义变量并设置它的值:
xhsRookies 被定义为一个保存字符串值 hi 的变量。像这样初始化变量不会将它标识为字符串类型,只是一个简单的赋值而已。随后,不仅可以改变保存的值,也可以改变值的类型:
在这个例子中,变量 xhsRookies 首先被定义为一个保存字符串值 hi 的变量,然后又被重写为保存了数值 100 。虽然不推荐改变变量保存值的类型,但这在 ECMAScript 中是完全有效的。
1. var 声明作用域
使用 var 操作符定义的变量会成为包含它的函数的局部变量。比如,使用 var 在一个函数内部定义一个变量,就意味着该变量将在函数退出时被销毁:
这里,xhsRookies 变量是在函数内部使用 var 定义的。函数叫 xhsTest(),调用它会创建这个变量并给它赋值。调用之后变量随即被销毁,因此示例中的最后一行会导致错误。不过,在函数内定义变量时省略 var 操作符,可以创建一个全局变量:
去掉之前的 var 之后,xhsRookies 就变成了全局变量。只要调用一次函数 xhsTest(),就会定义这个变量,并且可以在函数外部访问到。
虽然可以通过省略 var 操作符定义全局变量,但不推荐这么做。在局部作用域中定义的全局变量很难维护,也会造成困惑。
如果需要定义多个变量,可以在一条语句中用逗号分隔每个变量(及可选的初始化):
这里定义并初始化了 3 个变量。
2. var 声明提升
使用 var 时,下面的代码不会报错。这是因为使用这个关键字声明的变量会自动提升到块作用域 5 顶部:
之所以不会报错,是因为 ECMAScript 运行时把它看成等价于如下代码:
这就是所谓的“提升”(hoist),也就是把所有变量声明都拉到块作用域的顶部。
let 声明
let 跟 var 的作用差不多,但有着非常重要的区别。最明显的区别是,let 声明的范围是块作用域, 而 var 声明的范围是函数作用域。
在这里,xhsNumber 变量之所以不能在块作用域外部被引用,是因为它的作用域仅限于该块内部。块作用域是函数作用域的子集,因此适用于 var 的作用域限制同样也适用于 let。
let也不允许同一个块作用域中出现冗余声明。这样会导致报错:
当然,JavaScript 引擎会记录用于变量声明的标识符及其所在的块作用域,因此嵌套使用相同的标识符不会报错,而这是因为同一个块中没有重复声明:
对声明冗余报错不会因混用 let 和 var 而受影响。这两个关键字声明的并不是不同类型的变量, 它们只是指出变量在相关作用域如何存在。
1. 全局声明
与var 关键字不同,使用 let 在全局作用域中声明的变量不会成为 window 对象的属性(var 声明的变量则会)。
不过,let 声明仍然是在全局作用域中发生的,相应变量会在页面的生命周期内存续。因此,为了 避免 SyntaxError,必须确保页面不会重复声明同一个变量。
2. let 作用域
在 let出现之前,代码块中定义的迭代变量会渗透到外部:
改成使用 let 之后,这个问题就消失了,因为 let 变量的作用域仅限于代码块内部:
const 声明
const 的行为与 let 基本相同,唯一一个重要的区别是用它声明变量时必须同时初始化变量,且尝试修改 const 声明的变量会导致运行时错误。
变量命名规则
- 严格区分大小写(大写的变量和小写的变量是不同的变量);
- 变量名可以由数字、字母(大小写都可以)、下划线、美元符($)组成,但是不能以数字开头;
- 不能是 javascript 中的关键字和保留字,如:if,else,function 等;
- 变量名需要有意义,即语义化,增强代码可读性,比如:存储年龄用 age,姓名用 name,可以防止过段时间就不理解代码是什么了,也可以防止合作时别人看不懂;
- 使用驼峰命名法:从第二个单词开始,首字母大写,如用户个人数据(userPersonalData);
题目自测
一:下列代码输出结果是什么?
A. hello
B. hi
C. hi hello
D. hello hi
二: 下列代码输出结果是什么?
三: 下列代码输出结果是什么?
题目解析
一、
Answer:A
这道题考查的是 var 声明作用域,在第一行 xhsRookies 变量在 textFun 函数作用域外使用 var 定义的,第三行 xhsRookies 变量是在 textFun 作用域内部使用 var 定义的。所以最后一行输出 xhsRookies 其实是第一行定义的,结果是:hello
二、
Answer:
undefined
ReferenceError: Cannot access 'xhsNumber' before initialization
此题考查的是变量的提升,输出 xshRookies 时,由于 xshRookies 使用 var 声明的,存在变量提升,所以在输出前会认为 var xshRookies 并未赋值,所以是undefind;在解析代码时,JavaScript 引擎也会注意出现在块后面的 let 声明,只不过在此之前不能以任何方式来引用未声明的变量。在 let 声明之前的执行瞬间被称为“暂时性死区”(temporal dead zone),在此阶段引用任何后面才声明的变量都会抛出 ReferenceError。
三、
Answer:
TypeError: Assignment to constant variable.
此题考查的是 const 声明特点,用它声明变量时必须同时初始化变量,且尝试修改 const 声明的变量会导致运行时错误。
