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>