【前端｜Javascript第1篇】一文搞懂Javascript的基本语法

欢迎来到JavaScript的奇妙世界！作为前端开发的基石，JavaScript为网页增色不少，赋予了静态页面活力与交互性。如果你是一名前端小白，对编程一无所知，或者只是听说过JavaScript却从未涉足过，那么你来对了地方！本篇博客将带领你逐步进入JavaScript的大门，一步一步地探索这门语言的基本语法和应用。无论你是想为网页添加动态效果，或是构建一个全功能的Web应用程序，学习JavaScript都是你迈向成功的必经之路。准备好了吗？让我们一起踏上这段令人兴奋的学习旅程吧！

本文目录

• 1. 变量
• • 变量初始化
• 2. 词法语法
• • 区分大小写
  • • 代码示例：
  • 注释
  • • 单行注释
    • 多行注释
  • 直接量
  • • 空直接量
    • 布尔直接量
    • 数值直接量
    • 字符串直接量
    • 对象直接量
    • 数组直接量
  • 标识符
  • 关键字和保留字
  • • 保留字
    • 关键字
    • 未来保留字
    • • 预定义变量和函数
  • 分号
• 3. 数据类型
• • 原始数据类型
  • • 空值
    • 未定义值
    • 布尔值
    • 数字
    • • 进制数
      • 浮点数
      • 数字的范围
      • NaN
    • 字符串
    • 符号
  • 引用数据类型
  • 类型检测
  • • typeof
    • instanceof
    • Object.prototype.toString
    • constructor
    • 数组检测
• 4. 表达式
• • 字面量
  • 数组初始化表达式
  • • 逗号分隔
    • 嵌套数组
    • 可省略元素
    • 索引赋值
  • 对象初始化表达式
  • 属性访问器
  • 语法
  • 示例
• 5. 运算符
• • in
  • • 语法
    • 参数
    • 示例
  • instanceof
  • • 检测类型
  • typeof
  • • 语法
    • 参数
    • 返回值
  • 算术运算符
  • • 实践示例
    • • 实现指数运算符
  • 更新表达式
  • • 示例
    • • 前自增
      • 前自减
      • 后自增
      • 后自减
  • 赋值运算符
  • 比较运算符
  • • 关系运算符
    • 等值运算符
    • • 抽象相等比较算法
      • 引用数据类型间比较
  • 条件运算符
  • 逻辑运算符
  • • 逻辑与
    • 逻辑或
    • 逻辑非
• 6. 语句
• • if 语句
  • • 单层条件判断
    • 多层条件判断
  • for 语句
  • • 语法
    • 最佳实践
    • • 代码示例
      • 从尾部向前循环
      • 位数的整倍循环
      • 涉及多个变量的循环
  • while 语句
  • • 语法
    • 参数
    • 示例
    • • 代码示例
  • switch 语句
  • • 语法
    • 参数
    • 关键词
    • 示例
  • continue 语句
  • • 示例
  • break 语句
  • • 示例
  • try-catch 语句
  • • catch
• 总结

1. 变量

在编程语言中，变量用于存储数据值。

JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值。

变量初始化

1. var是一个JS关键字，用来声明变量(variable变量的意思)。使用该关键字声明变量后，计算机会自动为变量分配内存空间。
2. age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间。

//声明变量同时赋值为18 var age = 18; //同时声明多个变量时，只需要写一个 var， 多个变量名之间使用英文逗号隔开。 var age = 18, address ='火影村',salary = 15000;

• 1
• 2
• 3
• 4
• 5

2. 词法语法

ECMAScript 源码文本会被从左到右扫描，并被转换为一系列的输入元素，包括标识符、控制符、行终止符、注释和空白符。

同样地，ECMAScript 也定义了一些关键字、字面量以及行尾分号补全的规则。

区分大小写

JavaScript 是区分大小写的语言，也就是说，关键字、变量、函数名和所有的标识符（Identifier）都必须采取一致的大小写的形式。但是需要注意的是，HTML 和 CSS 并不区分大小写（尽管 XHTML 区分大小写），也就是说如果我们在用 JavaScript 控制 HTML 属性的时候对 HTML 来说 id 和 ID 没区别，但是 JavaScript 有区别。

代码示例：

abc、Abc、aBc、abC、ABC 是五个不同的变量名。

var abc = 1; var Abc = 2; var aBc = 3; var abC = 4; var ABC = 5; console.log(abc, Abc, aBc, abC, ABC); // 1 2 3 4 5

• 1
• 2
• 3
• 4
• 5
• 6
• 7

注释

JavaScript 不会执行注释。

我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。

单行注释

单行注释以两个斜杠开头
快捷键：ctrl + /

// let a;

• 1

多行注释

多行注释又叫块级注释，以 /* 开头，以 */ 结尾
快捷键：shift + alt + a

/* 以下代码为 声明变量并 赋值 */ let a; a = 1;

• 1
• 2
• 3
• 4
• 5
• 6
• 7

块级注释 /**/ 可以跨行书写，但不能嵌套，否则会报错。

// Error /* 注释1 /* 注释1.1 */ */

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

块级注释 /**/ 中的那些字符也可能出现在正则表达式字面量里，所以块级注释对于被注释的代码块来说是不安全的。

/* var rm_a = /a*/.match(s); */

• 1
• 2
• 3
• 4

直接量

JavaScript 数据直接量：直接量（Literals），又名字面量，就是可以在程序中直接使用的数据。

主要有以下几种直接量：

空直接量

null;

• 1

布尔直接量

true; false;

• 1
• 2

数值直接量

// 十进制 1234567890;

• 1
• 2

字符串直接量

'foo'; 'bar';

• 1
• 2

对象直接量

var o = { a: 'foo', b: 'bar', c: 42 }; // ES6中的简略表示方法 var a = 'foo', b = 'bar', c = 42; var o = { a, b, c }; // 不需要这样 var o = { a: a, b: b, c: c };

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

数组直接量

[1954, 1974, 1990, 2014];

• 1

标识符

标识符，就是指变量、函数、属性的名字，或者函数的参数。标识符可以是按照下列格式规则组合起来的一或多个字符。

• 第一个字符必须是一个字母、下划线（_）、或一个美元符号（$）
• 其他字符可以是字母、下划线、美元符号或数字
  标识符中的字母也可以包含扩展的 ASCII 或 Unicode 字母字符，但我们不推荐这样做。

按照惯例，ECMAScript 标识符采用驼峰大小写格式，也就是第一个字母小写，剩下的每个单词的首字母大写。

const firstSecond = 123; const myCar = 'Toyota'; const doSomethingImportant = function () {};

• 1
• 2
• 3
• 4
• 5

关键字和保留字

和其他任何编程语言一样，JavaScript 保留了一些标识符为自己所用。这些保留字不能用做普通的标识符。由于好多参考书的误导，貌似保留字和关键字是分开的，其实并不是，关键字只是保留字的一部分。

保留字包括关键字、未来保留字、空字面量和布尔值字面量。

保留字

• 关键字 Keyword
• 未来保留字 FutureReservedWord
• 空字面量 NullLiteral
• 布尔值字面量 BooleanLiteral

关键字

以下关键字 ES6 规范中已实现

break do instanceof typeof case else new var catch finally return void continue for switch while debugger function this with default if throw delete in try class extends const export import

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

未来保留字

以上是 ECMAScript6 的保留字，但在 ECMAScript3 版本中的保留字并不一样，若希望代码能在基于 ECMAScript3 实现的解释器上运行的话，应该避免使用以下保留字作为标识符。

abstract boolean byte char constdouble enum final float goto implements int interfacelong native package private protected public short static super throw transient volatile synchronized

• 1
• 2
• 3
• 4
• 5
• 6

预定义变量和函数

此外，JavaScript 预定义了很多全局变量和函数，应该避免把它们的名字用做标识符名。

String Number Boolean Array Date Function Math Object RegExp Error EvalError JSON Infinity NaN isNaN isFinite undefined arguments parseInt parseFloat eval decodeURI encodeURI decodeURIComponent encodeURIComponent RangeError ReferenceError TypeError URIError SyntaxError

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

分号

JavaScript 使用分号 ; 将语句分隔开，这对增强代码的可读性和整洁性是非常重要的。

有些地方可以省略分号，有些地方则不能省略分号。

两条语句用两行书写，第一个分号可以省略

a = 3; b = 4;

• 1
• 2

两条语句用一行书写，第一个分号不能省略

a = 3; b = 4;

• 1
• 2

但 JavaScript 并不是在所有换行处都填补分号，只有在缺少了分号无法正确解析代码时，JavaScript 才会填补分号。换句话说，如果当前语句和随后的非空格字符不能当成一个整体来解析的话，JavaScript 就在当前语句行结束处填补分号。

代码示例：

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

• 1
• 2
• 3

JavaScript 将其解析为:

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

• 1
• 2
• 3

3. 数据类型

JavaScript 是一种 弱类型语言 或者说 动态语言。这意味着你不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

这也意味着你可以使用同个相同名称的变量保存不同类型的数据：

var foo = 42; // foo is a Number now var foo = 'bar'; // foo is a String now var foo = true; // foo is a Boolean now

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

ECMAScript 标准定义了原始数据类型和引用数据类型，共七种内置类型：

• 原始数据类型（基本类型）：按值访问，可以操作保存在变量中实际的值。
  • 空值（null）
  • 未定义（undefined）
  • 布尔值（boolean）
  • 数字（number）
  • 字符串（string）
  • 符号（symbol）
• 引用类型（复杂数据类型）：引用类型的值是保存在内存中的对象。
  • 对象（Object）
    • 布尔对象（Boolean）
    • 数字对象（Number）
    • 字符串对象（String）
    • 函数对象（Function）
    • 数组对象（Array）
    • 日期对象（Date）
    • 正则对象（RegExp）
    • 错误对象（Error)

原始数据类型

空值

空值 null 是一个字面量，它不像 undefined 是全局对象的一个属性。

null 是表示缺少的标识，指示变量未指向任何对象。把 null 作为尚未创建的对象，也许更好理解。

代码示例：

foo 不存在，它从来没有被定义过或者是初始化过。

foo; > "ReferenceError: foo is not defined"

• 1
• 2

foo 现在已经是知存在的，但是它没有类型或者是值。

var foo = null; foo; > null

• 1
• 2
• 3

未定义值

未定义值 undefined 是全局对象的一个属性。也就是说，它是全局作用域的一个变量。undefined 的最初值就是原始数据类型 undefined。

var foo; console.log(foo); // undefined

• 1
• 2
• 3
• 4
• 5

布尔值

布尔类型表示一个逻辑实体，可以有两个值：true 和 false

数字

进制数

• 十进制：JavaScript 中默认的进制数
• 八进制：第一位必须是 0，然后是 0-7 的数字组成
• 十六进制：前两位必须是 0x，然后是 0-9 及 A-F（字母不区分大小写）

// 十进制 var num1 = 10; // 八进制的56 var num2 = 070; // 十进制，因为有数字超过了7，这里是79 var num3 = 079; // 十六进制的31 var num4 = 0x1f;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

浮点数

var num = 0.1 + 0.2; var sum = '2.3' * 100; console.log(num); // 0.30000000000000000004 console.log(sum); // 229.99999999999997

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

上面例子表达的就是 JavaScript 的浮点型数据在计算时容易丢失精度，这一点并不仅在 JavaScript 存在，建议处理这方面问题使用专用的数字处理类，比如 Java 里的 BigDecima 类来处理。

数字的范围

JavaScript 中数值的范围是有效位数的，基本上够我们使用，我们仅需要知道以下几个知识点：

• Number.MIN_VALUE 或 Number.NEGATIVE_INFINITY：表示 JavaScript 中的最小值
• Number.MAX_VALUE 或 Number.POSITIVE_INFINITY：表示 JavaScript 中的最大值
• Infinity：表示无穷大
• -Infinity：表示无穷小

NaN

NaN （Not a number）的含义是本该返回数值的操作未返回数值，返回了 NaN 就不会抛出异常影响语句流畅性。

NaN 属性的初始值就是 NaN，和 Number.NaN 的值一样。

在现代浏览器中（ES5 环境）， NaN 属性是一个不可配置（non-configurable）、不可写（non-writable）的属性。但在 ES3 中，这个属性的值是可以被更改的，但是也应该避免覆盖。

编码中很少直接使用到 NaN。通常都是在计算失败时，作为 Math 的某个方法的返回值出现的（例如：Math.sqrt(-1)）或者尝试将一个字符串解析成数字但失败了的时候（例如：parseInt("blabla")）。

字符串

JavaScript 的字符串类型用于表示文本数据。它是一组 16 位的无符号整数值的元素。在字符串中的每个元素占据了字符串的位置。第一个元素的索引为 0，下一个是索引 1，依此类推。字符串的长度是它的元素的数量。

'foo'; 'bar'; '1234'; 'one line \n another line'; "John's cat";

• 1
• 2
• 3
• 4
• 5

符号

符号（Symbols）是 ECMAScript 第 6 版新定义的。该类型的性质在于这个类型的值可以用来创建匿名的对象属性。该数据类型通常被用作一个对象属性的键值，当这个属性是用于类或对象类型的内部使用的时候。

var myPrivateMethod = Symbol(); this[myPrivateMethod] = function () { // ... };

• 1
• 2
• 3
• 4
• 5
• 6

引用数据类型

引用类型通常叫做类（Class），也就是说，遇到引用值，所处理的就是对象。

在 ECMA-262 标准中根本没有出现 类 这个词，而是定义了 对象定义，逻辑上等价于其他程序设计语言中的类。

对象是由 new 运算符加上要实例化的对象的名字创建的。

例如，下面的代码创建 Object 对象的实例：

var o = new Object();

• 1

这种语法与 Java 语言的相似，不过当有不止一个参数时，ECMAScript 要求使用括号。

如果没有参数，如以下代码所示，括号可以省略：

var o = new Object();

• 1

尽管括号不是必需的，但是为了避免混乱，最好使用括号。

类型检测

类型检测的方法：

1. typeof
2. instanceof
3. Object.prototype.toString
4. constructor

typeof

typeof 操作符返回一个字符串，表示未经计算的操作数的类型。

typeof undefined; // "undefined" typeof null; // "object" typeof 100; // "number" typeof NaN; // "number" typeof true; // "boolean" typeof 'foo'; // "string" typeof function () {}; // "function" typeof [1, 2]; // "object" typeof new Object(); // "object"

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34

typeof 操作符适合对 基本类型（除 null 之外）及 function 的检测使用，而对引用数据类型（如 Array）等不适合使用。

更详细信息请查阅 typeof 操作符。

instanceof

instanceof 运算符用于检测一个对象在其 原型链 中是否存在一个构造函数的 prototype 属性。

左操作数为对象，不是就返回 false，右操作数必须是 函数对象 或者 函数构造器，不是就返回 TypeError 异常。

obj instanceof constr; function Person() {} function Student() {} Student.prototype = new Person(); Student.prototype.constructor = Student; const ben = new Student(); ben instanceof Student; // true const one = new Person(); one instanceof Person; // true one instanceof Student; // false ben instanceof Person; // true

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

任何一个构造函数都有一个 prototype 对象属性，这个对象属性将用作 new 实例化对象的原型对象。