[02] JS-基础语法(一)
1. 几个概念
本文我们讲解一下 JS 中的几个简单的概念，包括标识符、关键字、保留字、大小写和字面量。这些基本概念虽然不能直接提升我们的编程能力，但它们是 JS 的基本组成元素。
1.1 标识符
所谓标识符（Identifier），就是名字。JavaScript 中的标识符包括变量名、函数名、参数名、属性名、类名等。
合法的标识符应该注意以下强制规则：
- 第一个字符必须是字母、下划线（_）或美元符号（$）。
- 除了第一个字符外，其他位置可以使用 Unicode 字符。一般建议仅使用 ASCII 编码的字母，不建议使用双字节的字符。
- 不能与 JavaScript 关键字、保留字重名。
- 可以使用 Unicode 转义序列。例如，字符 a 可以使用“\u0061”表示。
1.2 关键字&保留字
- 「关键字」就是 JavaScript 语言内部使用的一组名字（或称为命令）。这些名字具有特定的用途，用户不能自定义同名的标识符，具体说明如表所示。
- 「保留字」就是 JavaScript 语言内部预备使用的一组名字（或称为命令）。这些名字目前还没有具体的用途，是为 JavaScript 升级版本预留备用的，建议用户不要使用。具体说明如表所示。
ECMAScript 3 将 Java 所有关键字都列为保留字，而 ECMAScript 5 规定较为灵活，例如：
- 在非严格模式下，仅规定 class、const、enums、export、extends、import、super 为保留字，其他 ECMAScript 3 保留字可以自由使用；
- 在严格模式下，ECMAScript 5 变得更加谨慎，严格限制 implements、interface、let、package、private、protected、public、static、yield、eval（非保留字）、arguments（非保留字）的使用。
JavaScript 预定义了很多全局变量和函数，用户也应该避免使用它们，具体说明如表所示。
不同的 JavaScript 运行环境都会预定义一些全局变量和函数，上表列出的仅针对 Web 浏览器运行环境。
无论是在严格模式下还是在非严格模式下，都不要在定义变量名、函数名或者属性名时使用上面列举出的保留字，以免同学们入坑。
1.3 区分大小写
JavaScript 严格区分大小写，所以 Hello 和 hello 是两个不同的标识符。
为了避免输入混乱和语法错误，建议采用小写字符编写代码，在以下特殊情况下可以使用大写形式：
（1）构造函数的首字母建议大写。构造函数不同于普通函数。
下面示例调用预定义的构造函数 Date()，创建一个时间对象，然后把时间对象转换为字符串显示出来。
d = new Date(); // 获取当前日期和时间
document.write(d.toString()); // 显示日期
（2）如果标识符由多个单词组成，可以考虑使用骆驼命名法——除首个单词外，后面单词的首字母大写。例如：
typeOf();
printEmployeePaychecks();
提示：上述都是约定俗成的一般习惯，不构成强制性要求，用户可以根据个人习惯进行命名。
1.4 直接量
字面量（Literal）也叫直接量，就是具体的值，即能够直接参与运算或显示的值，如字符串、数值、布尔值、正则表达式、对象直接量、数组直接量、函数直接量等。
下面示例分别定义不同类型的直接量：字符串、数值、布尔值、正则表达式、特殊值、对象、数组和函数。
// 空字符串直接量
1 // 数值直接量
true // 布尔值直接量
/a/g // 正则表达式直接量
null // 特殊值直接量
{} // 空对象直接量
[] // 空数组直接量
function(){} // 空函数直接量，也就是函数表达式
2. 注释
- 「单行注释」以双斜杠
//开头，//之后的所有内容都会看作是注释的内容，对//之前的内容则不会产生影响。 - 「多行注释」以
/*开头，并以*/结尾，出现在/*和*/之间的所有内容都会看作是注释的内容。 - JavaScript 还能够识别 HTML 注释的开始符
<!--，并将其看作单行注释，与//效果相同。至于 HTML 注释的结束符-->JavaScript 则不能识别，因此若要使用 HTML 注释来注释 JavaScript 代码，应该使用 JavaScript 的单行注释将 HTML 注释的结束符-->注释掉，例如//-->。
3. 变量
3.1 变量定义
在 JavaScript 中，变量名称并不能随便定义，需要遵循标识符的命名规则，如下所示：
- 变量名中可以包含数字、字母、下划线
_、美元符号$； - 变量名中不能出现汉字；
- 变量名中不能包含空格；
- 变量名不能是 JavaScript 中的关键字、保留字；
- 变量名不能以数字开头，即第一个字符不能为数字。
在定义变量时，变量名要尽量有意义，让自己或者他人能轻易看懂，例如可以使用 name 来定义一个存储姓名的变量、使用 dataArr 来定义一个数组类型的变量。
当变量名中包含多个英文单词时，推荐使用驼峰命名法（大驼峰：每个单词首字母大写，例如 FileType、DataArr；小驼峰：第一个单词首字母小写后面的单词首字母大写，例如 fileType、dataArr）。
在 JavaScript 中，定义变量需要使用 var 关键字，语法格式如下：
// 1.【语法】var|let 变量名;
var str; // 用来存储字符串
var age; // 用来存储年龄
var prePage; // 用来存储上一页
// 2. 定义变量时，可以一次定义一个或多个变量，若定义多个变量，则需要在变量名之间使用逗号 `,` 分隔开
var a, b, c; // 同时声明多个变量
变量定义后，如果没有为变量赋值，那么这些变量会被赋予一个初始值 —— undefined（未定义）。
3.2 变量赋值
变量定义后，可以使用等于号 = 来为变量赋值，等号左边的为变量的名称，等号右边为要赋予变量的值，如下例所示：
var num; // 定义一个变量 num
num = 1; // 将变量 num 赋值为 1
此外，也可以在定义变量的同时为变量赋值，如下例所示：
var num = 1; // 定义一个变量 num 并将其赋值为 1
var a = 2, b = 3, c = 4; // 同时定义 a、b、c 三个变量并分别赋值为 2、3、4
// var a = 2, // 为了让代码看起来更工整，上一行代码也可以写成这样
// b = 3,
// c = 4;
变量中并不存储任何值，而是存储值的内存地址。
3.3 变量提升
JavaScript 在「预编译期」会先预处理声明的变量，但是变量的赋值操作发生在 JavaScript 「执行期」。
document.write(str); // 显示 undefined
str = 1;
document.write(str); // 显示 1
var str;
在上面示例中，声明变量放在最后，赋值操作放在前面。由于 JavaScript 在预编译期已经对变量声明语句进行了预解析，所以第 1 行代码读取变量值时不会抛出异常，而是返回未初始化的值 undefined。第 3 行代码是在赋值操作之后读取，故显示为数字 1。
JavaScript 引擎的解析方式是：先解析代码，获取所有被声明的变量，然后再一行一行地运行。 这样，所有声明的变量都会被提升到代码的头部，这就叫作「变量提升（Hoisting）」。
3.4 let&const
2015 年以前，JavaScript 只能通过 var 关键字来声明变量，在 ECMAScript6（ES6）发布之后，新增了 let 和 const 两个关键字来声明变量，其中：
- 使用 let 关键字声明的变量只在其所在的代码块中有效（类似于局部变量），并且在这个代码块中，同名的变量不能重复声明；
- const 关键字的功能和 let 相同，但使用 const 关键字声明的变量还具备另外一个特点，那就是 const 关键字定义的变量，一旦定义，就不能修改（即使用 const 关键字定义的为常量）。
注意：IE10 及以下的版本不支持 let 和 const 关键字。
let name = "小明"; // 声明一个变量 name 并赋值为“小明”
let age = 11; // 声明一个变量 age
let age = 13; // 报错：变量 age 不能重复定义
const PI = 3.1415 // 声明一个常量 PI，并赋值为 3.1415
console.log(PI) // 在控制台打印 PI
4. 数据类型
数据类型指的是可以在程序中存储和操作的值的类型，每种编程语言都有其支持的数据类型，不同的数据类型用来存储不同的数据，例如文本、数值、图像等。
JavaScript 是一种动态类型的语言，在定义变量时不需要提前指定变量的类型，变量的类型是在程序运行过程中由 JavaScript 引擎动态决定的，另外，您可以使用同一个变量来存储不同类型的数据，例如：
var a; // 此时 a 为 Undefined
a = "tree"; // 此时 a 为 String 类型
a = 123; // 此时 a 为 Number 类型
JavaScript 中的数据类型可以分为两种类型：
- 基本数据类型（值类型）：字符串（String）、数字（Number）、布尔（Boolean）、空（Null）、未定义（Undefined）、Symbol
- 引用数据类型：对象（Object）、数组（Array）、函数（Function）
提示：Symbol 是 ECMAScript6 中引入的一种新的数据类型，表示独一无二的值。
【typeof】在开始介绍各种数据类型之前，先来了解一下 typeof 操作符，使用 typeof 操作符可以返回变量的数据类型。
// typeof 操作符有带括号和不带括号两种用法
typeof x; // 获取变量 x 的数据类型
typeof(x); // 获取变量 x 的数据类型
4.1 基本数据类型
a. String 类型
字符串（String）类型是一段以单引号 '' 或双引号 "" 包裹起来的文本，例如 '123'、"abc"。需要注意的是，单引号和双引号是定义字符串的不同方式，并不是字符串的一部分。
定义字符串时，如果字符串中包含引号，可以使用反斜杠 \ 来转义字符串中的引号，或者选择与字符串中不同的引号来定义字符串，如下例所示：
/*
- 在JS中使用单引号或双引号来表示字符串
- 转义字符 \
\" => "
\' => '
\\ => \
\t => 制表符
\n => 换行
- 模板字符串
- 使用反单引号` 来表示模板字符串
- 模板字符串中可以嵌入变量
- 使用typeof检查一个字符串时会返回 "string"
*/
var str = "Let's have a cup of coffee."; // 双引号中包含单引号
var str = 'He said "Hello" and left.'; // 单引号中包含双引号
var str = 'We\'ll never give up.'; // 使用反斜杠转义字符串中的单引号
b. Number 类型
数值（Number）类型用来定义数值，JavaScript 中不区分整数和小数（浮点数），统一使用 Number 类型表示，如下例所示：
var num1 = 123; // 整数
var num2 = 3.14; // 浮点数
对于一些极大或者极小的数，也可以通过科学（指数）计数法来表示，如下例所示：
var y=123e5; // 123 乘以 10 的 5 次方，即 12300000
var z=123e-5; // 123 乘以 10 的 -5 次方，即 0.00123s
另外，Number 类型中还有一些比较特殊的值，分别为 Infinity、-Infinity 和 NaN，其中：
- Infinity：用来表示正无穷大的数值，一般指大于 1.7976931348623157e+308 的数；
- -Infinity：用来表示负无穷大的数值，一般指小于 5e-324 的数；
- NaN：即非数值（Not a Number 的缩写），用来表示无效或未定义的数学运算结构，例如 0 除以 0。
提示：如果某次计算的结果超出了 JavaScript 中 Number 类型的取值范围，那么这个数就会自动转化为无穷大，正数为 Infinity，负数为 -Infinity。
/*
数值（Number）
- 在JS中所有的整数和浮点数都是Number类型
- JS中的数值并不是无限大的，当数值超过一定范围后会显示近似值
- Infinity 是一个特殊的数值表示无穷
- 所以在JS中进行一些精度比较高的运算时要十分注意
- NaN 也是一个特殊的数值，表示非法的数值
*/
let a = 10
a = 10.5
a = 3.14
a = 9999999999999991111111111111111111
a = 99999 ** 99999
a = Infinity
a = 1.11111111111111111111111111111111111111111111
a = 0.0000000000000000000000000000000000001
a = 0.1 + 0.2
a = 1 - "a" // NaN (Not a Number)
a = NaN
/*
大整数（BigInt）
- 大整数用来表示一些比较大的整数
- 大整数使用n结尾，它可以表示的数字范围是无限大
*/
a = 99999999999999999999999999999999999999999999999999n
/*
其他进制的数字：
- 0b 二进制
- 0o 八进制
- 0x 十六进制
*/
a = 0b1010
a = 0o10
a = 0xff
console.log(a)
使用 typeof 运算符来检查不同的值的类型。
let a = 10
let b = 10n
console.log(typeof a) // "number"
console.log(typeof b) // "bigint"
c. Boolean 类型
布尔（Boolean）类型只有两个值，true（真）或者 false（假），在做条件判断时使用的比较多，您除了可以直接使用 true 或 false 来定义布尔类型的变量外，还可以通过一些表达式来得到布尔类型的值，例如：
var a = true; // 定义一个布尔值 true
var b = false; // 定义一个布尔值 false
var c = 2 > 1; // 表达式 2 > 1 成立，其结果为“真（true）”，所以 c 的值为布尔类型的 true
var d = 2 < 1; // 表达式 2 < 1 不成立，其结果为“假（false）”，所以 c 的值为布尔类型的 false
d. Null 类型
Null 是一个只有一个值的特殊数据类型，表示一个“空”值，即不存在任何值，什么都没有，用来定义空对象指针。
使用 typeof 操作符来查看 Null 的类型，会发现 Null 的类型为 Object，说明 Null 其实使用属于 Object（对象）的一个特殊值。因此通过将变量赋值为 Null 我们可以创建一个空的对象。
e. Undefined 类型
Undefined 也是一个只有一个值的特殊数据类型，表示未定义。当我们声明一个变量但未给变量赋值时，这个变量的默认值就是 Undefined。例如：
var num;
console.log(num); // 输出 undefined
在使用 typeof 操作符查看未赋值的变量类型时，会发现它们的类型也是 undefined。对于未声明的变量，使用 typeof 操作符查看其类型会发现，未声明的变量也是 undefined，示例代码如下：
var message;
console.log(typeof message); // 输出 undefined
console.log(typeof name); // 输出 undefined
f. Symbol 类型
Symbol 是 ECMAScript6 中引入的一种新的数据类型，表示独一无二的值，Symbol 类型的值需要使用 Symbol() 函数来生成，如下例所示：
var str = "123";
// 用来创建一个唯一的标识
var sym1 = Symbol(str);
var sym2 = Symbol(str);
console.log(sym1); // 输出 Symbol(123)
console.log(sym2); // 输出 Symbol(123)
console.log(sym1 == sym2); // 输出 false
// 虽然 sym1 与 sym2 看起来是相同的，但实际上它们并不一样，根据 Symbol 类型的特点，sym1 和 sym2 都是独一无二的
4.2 引用类型
a. Object 类型
JavaScript 中的对象（Object）类型是一组由键、值组成的无序集合，定义对象类型需要使用花括号{}，语法格式如下：
{name1: value1, name2: value2, name3: value3, ..., nameN: valueN}
其中 name1、name2、name3、...、nameN 为对象中的键，value1、value2、value3、...、valueN 为对应的值。
在 JavaScript 中，对象类型的键都是字符串类型的，值则可以是任意数据类型。要获取对象中的某个值，可以使用对象名.键的形式，如下例所示：
var person = {
name: 'Bob',
age: 20,
tags: ['js', 'web', 'mobile'],
city: 'Beijing',
hasCar: true,
zipcode: null
};
console.log(person.name); // 输出 Bob
console.log(person.age); // 输出 20
b. Array 类型
数组（Array）是一组按顺序排列的数据的集合，数组中的每个值都称为元素，而且数组中可以包含任意类型的数据。在 JavaScript 中定义数组需要使用方括号[]，数组中的每个元素使用逗号进行分隔，例如：
[1, 2, 3, 'hello', true, null]
另外，也可以使用 Array() 函数来创建数组，如下例所示：
var arr = new Array(1, 2, 3, 4);
console.log(arr); // 输出 [1, 2, 3, 4]
数组中的元素可以通过索引来访问。数组中的索引从 0 开始，并依次递增，也就是说数组第一个元素的索引为 0，第二个元素的索引为 1，第三个元素的索引为 2，以此类推。如下例所示：
var arr = [1, 2, 3.14, 'Hello', null, true];
console.log(arr[0]); // 输出索引为 0 的元素，即 1
console.log(arr[5]); // 输出索引为 5 的元素，即 true
console.log(arr[6]); // 索引超出了范围，返回 undefined
c. Function 类型
函数（Function）是一段具有特定功能的代码块，函数并不会自动运行，需要通过函数名调用才能运行，如下例所示：
function sayHello(name){
return "Hello, " + name;
}
var res = sayHello("tree");
console.log(res); // 输出 Hello, tree
此外，函数还可以存储在变量、对象、数组中，而且函数还可以作为参数传递给其它函数，或则从其它函数返回，如下例所示：
var fun = function() {
console.log("http://c.biancheng.net/js/");
}
function createGreeting(name){
return "Hello, " + name;
}
function displayGreeting(greetingFunction, userName){
return greetingFunction(userName);
}
var result = displayGreeting(createGreeting, "tree");
console.log(result); // 输出 Hello, tree
4.3 类型转换
a. 转字符串
/*
1.调用toString()方法将其他类型转换为字符串
- 由于null和undefined中没有toString()，所以对这两个东西调用toString()时会报错
2.调用String()函数将其他类型转换为字符串
- 对于拥有toString()方法的值调用String()函数时，实际上就是在调用toString()方法
- 对于null，则直接转换为"null"；对于undefined，直接转换为"undefined"
*/
let a = 10 // "10"
a = true // "true"
a = 11n // "11"
a = undefined
// console.log(typeof a, a)
a = a.toString() // "10"
// console.log(typeof a, a)
let b = 33 // "33"
b = null // "null"
b = undefined // "undefined"
b = true
console.log(typeof b, b)
b = String(b)
console.log(typeof b, b)
b. 转数值
/*
将其他的数据类型转换为数值
使用Number()函数来将其他类型转换为数值，转换情况如下：
- 字符串
- 如果字符串是一个合法的数字，则会自动转换为对应的数字
- 如果字符串不是合法数字，则转换为NaN
- 如果字符串是空串或纯空格的字符串，则转换为0
- 布尔值
- true转换为1，false转换为0
- null 转换为 0
- undefined 转换为 NaN
专门用来将字符串转换为数值的两个方法
- parseInt() —— 将一个字符串转换为一个整数
- 解析时，会自左向右读取一个字符串，直到读取到字符串中所有的有效的整数
- 也可以使用该函数对一个数字进行取整
- parseFloat() —— 将一个字符串转换为浮点数
- 解析时，会自左向右读取一个字符串，直到读取到字符串中所有的有效的小数
*/
let a = '123' // 123
a = 'abc' // NaN
a = '3.1415926' // 3.1415926
a = '11px' // NaN
a = '' // 0
a = ' ' // 0
a = true // 1
a = false // 0
a = null // 0
a = undefined // NaN
// console.log(typeof a, a)
a = Number(a)
// console.log(typeof a, a)
let b = '123px'
b = parseInt(b)
console.log(typeof b, b) // number 123
b = 'a123'
b = parseInt(b)
console.log(typeof b, b) // number NaN
b = '123.45'
b = parseInt(b)
console.log(typeof b, b) // number 123
b = 456.123
b = parseInt(b)
console.log(typeof b, b) // string 456
c. 转布尔值
/*
- 转换的情况
- 数字
- 0 和 NaN 转换为false
- 其余是true
- 字符串
- 空串 转换为 false
- 其余是true
- null和undefined 都转换为 false
- 对象：对象会转换为true
- 所有表示空性的没有的错误的值都会转换为false
0、NaN、空串、null、undefined、false
*/
let a = 1 // true
a = -1 // true
a = 0 // false
a = NaN // false
a = Infinity // true
a = 'abc' // true
a = 'true' // true
a = 'false' // true
a = '' // false
a = " " // true
5. 运算符
5.1 算术运算符
| 运算符 | 描述 | 示例 |
|---|---|---|
| + | 加法运算符 | x + y 表示计算 x 加 y 的和 |
| - | 减法运算符 | x - y 表示计算 x 减 y 的差 |
| * | 乘法运算符 | x * y 表示计算 x 乘 y 的积 |
| / | 除法运算符 | x / y 表示计算 x 除以 y 的商 |
| % | 取模（取余）运算符 | x % y 表示计算 x 除以 y 的余数 |
| ** | 幂运算 | x ** y 表示计算 x 的 y 次幂 |
JS 是一门弱类型语言，当进行运算时会通过自动的类型转换来完成运算。
a = 10 - '5' // 10 - 5
a = 10 + true // 10 + 1
a = 5 + null // 5 + 0
a = 6 - undefined // 6 - NaN = NaN
5.2 赋值运算符
| 运算符 | 描述 | 示例 |
|---|---|---|
| = | 最简单的赋值运算符，将运算符右侧的值赋值给运算符左侧的变量 | x = 10 表示将变量 x 赋值为 10 |
| += | 先进行加法运算，再将结果赋值给运算符左侧的变量 | x += y 等同于 x = x + y |
| -= | 先进行减法运算，再将结果赋值给运算符左侧的变量 | x -= y 等同于 x = x - y |
| *= | 先进行乘法运算，再将结果赋值给运算符左侧的变量 | x *= y 等同于 x = x * y |
| /= | 先进行除法运算，再将结果赋值给运算符左侧的变量 | x /= y 等同于 x = x / y |
| %= | 先进行取模运算，再将结果赋值给运算符左侧的变量 | x %= y 等同于 x = x % y |
| **= | 先进行幂运算，再将结果赋值给运算符左侧的变量 | x **= y 等价于 x = x ** y |
| ??= | 空赋值，只有当变量的值为 null 或 undefined 时才会对变量进行赋值 | let a = null; a ??= 1101; |
5.3 字符串运算符
JavaScript 中的 + 和 += 运算符除了可以进行数学运算外，还可以用来拼接字符串，其中：
+运算符表示将运算符左右两侧的字符串拼接到一起；+=运算符表示先将字符串进行拼接，然后再将结果赋值给运算符左侧的变量。
当任意一个值和字符串做加法运算时，它会先将其他值转换为字符串，然后再做拼串的操作。可以利用这一特点来完成类型转换，可以通过为「任意类型 + 一个空串」的形式来将其转换为字符串。其原理和 String() 函数相同，但使用起来更加简洁。
a = 'hello' + 'world'
a = '1' + 2 // "1" + "2"
a = true + ''
5.4 自增、自减运算符
| 运算符 | 名称 | 影响 |
|---|---|---|
| ++x | 自增运算符 | 将 x 加 1，然后返回 x 的值 |
| x++ | 自增运算符 | 返回 x 的值，然后再将 x 加 1 |
| --x | 自减运算符 | 将 x 减 1，然后返回 x 的值 |
| x-- | 自减运算符 | 返回 x 的值，然后将 x 减 1 |
5.5 比较运算符
| 运算符 | 名称 | 示例 |
|---|---|---|
| == | 等于 | x == y 表示如果 x 等于 y，则为真 |
| === | 全等 | x === y 表示如果 x 等于 y，并且 x 和 y 的类型也相同，则为真 |
| != | 不相等 | x != y 表示如果 x 不等于 y，则为真 |
| !== | 不全等 | x !== y 表示如果 x 不等于 y，或者 x 和 y 的类型不同，则为真 |
| < | 小于 | x < y 表示如果 x 小于 y，则为真 |
| > | 大于 | x > y 表示如果 x 大于 y，则为真 |
| >= | 大于或等于 | x >= y 表示如果 x 大于或等于 y，则为真 |
| <= | 小于或等于 | x <= y 表示如果 x 小于或等于 y，则为真 |
当对非数值进行关系运算时，它会先将前转换为数值然后再比较。当关系运算符的两端是两个字符串，它不会将字符串转换为数值，而是逐位的比较字符的 Unicode 编码（利用这个特点可以对字符串按照字母排序）。
let result = 10 > 5 // true
result = 5 > 5 // false
result = 5 >= 5 // true
result = 5 < "10" // true
result = "1" > false // true
result = "a" < "b" // true
result = "z" < "f" // false
result = "abc" < "b" // true
// 注意比较两个字符串格式的数字时一定要进行类型转换
result = "12" < "2" // true
result = +"12" < "2" // false
// 检查num是否在5和10之间
let num = 4
// result = 5 < num < 10 // 错误的写法
result = num > 5 && num < 10
console.log(result)
相等和全等代码示例：
/*
==
- 相等运算符，用来比较两个值是否相等
- 使用相等运算符比较两个不同类型的值时，它会将其转换为相同的类型（通常转换为数值）然后再比较，类型转换后值相同也会返回true
- null和undefined进行相等比较时会返回true
- NaN不和任何值相等，包括它自身
===
- 全等运算符，用来比较两个值是否全等
- 它不会进行自动的类型转换，如果两个值的类型不同直接返回false
- null和undefined进行全等比较时会返回false
!=
- 不等，用来检查两个值是否不相等
- 会自动的进行类型转换
!==
- 不全等，比较两个值是否不全等
- 不会自动的类型转换
*/
let result = 1 == 1 // true
result = 1 == 2 // false
result = 1 == '1' // true
result = true == "1" // true
result = null == undefined // true
result = NaN == NaN // false
result = 1 === "1" // false
result = null === undefined // false
result = 1 != 1 // false
result = 1 != "1" // false
result = 1 !== "1" // true
5.6 逻辑运算符
| 运算符 | 名称 | 示例 | 补充 |
|---|---|---|---|
| && | 逻辑与 | x && y 表示如果 x 和 y 都为真，则为真 | 与运算是短路的与，如果第 1 个值为false，则不看第 2 个值。与运算是找 false 的，找到 false 则直接返回，没有 false 才会返回 true。 |
| || | 逻辑或 | x || y 表示如果 x 或 y 有一个为真，则为真 | 或运算也是短路的或，如果第 1 个值为 true，则不看第 2 个值。或运算是找 true，如果找到 true 则直接返回，没有 true 才会返回 false。 |
| ! | 逻辑非 | !x 表示如果 x 不为真，则为真 | 如果对一个非布尔值进行取反，它会先将其转换为布尔值然后再取反。可以利用这个特点将其他类型转换为布尔值。 |
示例如下：
// false || alert(123) // 第一个值为false，alert会执行
true || alert(123) // 第一个值为true，alert不会执行
// 对于非布尔值进行或运算，它会转换为布尔值然后运算，但是最终会返回原值。
// - &&: 如果第一个值为false，则直接返回第一个；如果第一个值为true，则返回第二个。
// - ||: 如果第一个值为true，则返回第一个；如果第一个值为false，则返回第二个。
let result = 1 || 2 // 1
result = "hello" || NaN // "hello"
result = NaN || 1 // 1
result = NaN || null // null
5.7 三元运算符
// 如果“条件表达式”的结果为真（true），则执行“表达式1”中的代码，否则就执行“表达式2”中的代码。
条件表达式 ? 表达式1 : 表达式2;
5.8 位运算符
| 运算符 | 描述 | 示例 |
|---|---|---|
| & | 按位与：如果对应的二进制位都为 1，则该二进制位为 1 | 5 & 1 等同于 0101 & 0001 结果为 0001，十进制结果为 1 |
| | | 按位或：如果对应的二进制位有一个为 1，则该二进制位为 1 | 5 | 1 等同于 0101 | 0001 结果为 0101，十进制结果为 5 |
| ^ | 按位异或：如果对应的二进制位只有一个为 1，则该二进制位为 1 | 5 ^ 1 等同于 0101 ^ 0001 结果为 0100，十进制结果为 4 |
| ~ | 按位非：反转所有二进制位，即 1 转换为 0，0 转换为 1 | ~5 等同于 ~0101 结果为 1010，十进制结果为 -6 |
| << | 按位左移：将所有二进制位统一向左移动指定的位数，并在最右侧补 0 | 5 << 1 等同于 0101 << 1 结果为 1010，十进制结果为 10 |
| >> | 按位右移（有符号右移）：将所有二进制位统一向右移动指定的位数，并拷贝最左侧的位来填充左侧 | 5 >> 1 等同于 0101 >> 1 结果为 0010，十进制结果为 2 |
| >>> | 按位右移零（无符号右移）：将所有二进制位统一向右移动指定的位数，并在最左侧补 0 | 5 >>> 1 等同于 0101 >>> 1 结果为 0010，十进制结果为 2 |
6. 输出
某些情况下，我们可能需要将程序的运行结果输出到浏览器中，JavaScript 中为我们提供了多种不同的输出语句来向浏览器中输出内容：
- 使用 alert() 函数来弹出提示框；
- 使用 confirm() 函数来弹出一个对话框；
- 使用 document.write() 方法将内容写入到 HTML 文档中；
- 使用 innerHTML 将内容写入到 HTML 标签中；
- 使用 console.log() 在浏览器的控制台输出内容。
6.1 alert()
使用 JS alert() 函数可以在浏览器中弹出一个提示框，在提示框中我们可以定义要输出的内容，语法格式如下：
alert(_____);
其中 _____ 为要在提示框中输出的内容，需要注意的是，alert() 中只能输出文本内容。
alert() 函数是 window 对象下的一个函数，所以有时为了代码更严谨，我们也可以使用 window.alert() 的形式来调用 alert() 函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
var a = 11, b = 5;
window.alert("a * b = " + a * b);
</script>
</body>
</html>
6.2 confirm()
JS confirm() 函数与 alert() 函数相似，它们都是 window 对象下的函数，同样可以在浏览器窗口弹出一个提示框，不同的是，使用 confirm() 函数创建的提示框中，除了包含一个“确定”按钮外，还有一个“取消”按钮。如果点击“确定”按钮，那么 confirm() 函数会返回一个布尔值 true，如果点击“取消”按钮，那么 confirm() 函数会返回一个布尔值 false。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
var res = window.confirm("这里是要显示的内容");
if (res == true) {
alert("你点击了“确定”按钮");
} else {
alert("你点击了“取消”按钮");
}
</script>
</body>
</html>
6.3 console.log()
使用 JS console.log() 可以在浏览器的控制台输出信息，我们通常使用 console.log() 来调试程序，其语法格式如下：
console.log(_____);
其中 _____ 为要输出的内容，可以是字符串或者对象类型。与 window.alert() 和 window.confirm() 可以分别简写成 alert() 和 confirm() 不同，console.log() 不能简写。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
var myArr = ["Chrome","Firefox","Edge","Safari","Opera"];
console.log(myArr);
</script>
</body>
</html>
要看到 console.log() 的输出内容需要先打开浏览器的控制台。以 Chrome 浏览器为例，要打开控制台您只需要在浏览器窗口按 F12 快捷键，或者点击鼠标右键，并在弹出的菜单中选择“检查”选项即可。最后，在打开的控制台中选择“Console”选项，如下图所示：
6.4 document.write()
使用 JS document.write() 可以向 HTML 文档中写入 HTML 或者 JavaScript 代码，语法格式如下：
document.write(exp1, exp2, exp3, ...);
其中 exp1、exp2、exp3 为要向文档中写入的内容，document.write() 可以接收多个参数，即我们可以一次向文档中写入多个内容，内容之间使用逗号进行分隔。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<script type="text/javascript">
document.write("<p>现在的时间是：</p>");
document.write(Date());
</script>
</body>
</html>
6.5 innerHTML
与前面介绍的几个函数不同，innerHTML 是一个属性而不是一个函数，通过它可以设置或者获取指定 HTML 标签中的内容，示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<div id="demo">JavaScript 输出</div>
<script type="text/javascript">
var demo = document.getElementById("demo");
console.log(demo.innerHTML);
demo.innerHTML = "<h2>innerHTML</h2>"
</script>
</body>
</html>
