基础知识
函数、数据类型、运算符。
代码引入
<script src="file.js"></script>
<script>
alert(1); //最好使用分号
</script>
// 这行注释独占一行
/* 两个消息的例子。
这是一个多行注释。 */
现代模式
脚本文件顶部声明user strict
即可开始现代模式
"use strict";
// 代码以现代模式工作
变量、常量、常数字
变量名称限制:
- 变量名称必须仅包含字母、数字、符号
$
和_
。 - 首字符必须非数字。
- 驼峰命名(建议)。
// 定义变量,并且赋值
let message = 'Hello!';
// 声明一个常数(不变)变量,可以使用 const 而非 let
const myBirthday = '18.04.1982';
// 使用大写形式声明常数(用于硬编码)
const COLOR_RED = "#F00";
数据类型
JavaScript 中有八种基本的数据类型。
- 七种原始数据类型(基本数据类型):
number
用于任何类型的数字:整数或浮点数,在±(253-1)
范围内的整数。bigint
用于任意长度的整数。string
用于字符串:一个字符串可以包含 0 个或多个字符,所以没有单独的单字符类型。boolean
用于true
和false
。null
用于未知的值 —— 只有一个null
值的独立类型。undefined
用于未定义的值 —— 只有一个undefined
值的独立类型。symbol
用于唯一的标识符。
- 以及一种非原始数据类型(复杂数据类型):
object
用于更复杂的数据结构。
// 没有错误, js是动态类型的编程语言
let message = "hello";
message = 123456;
// 对于number类型
// Infinity代表无限大
alert( 1 / 0 ); // Infinity
alert( Infinity ); // Infinity
// NaN,代表计算错误(粘性)
alert( "not a number" / 2 );
// 创建bigint类型的常量
const bigInt = 1234567890123456789012345678901234567890n;
// string类型的三种赋值方式
let str = "Hello";
let str2 = 'Single quotes are ok too';
let phrase = `can embed another ${str}`;
我们可以通过 typeof
运算符查看存储在变量中的数据类型。
- 通常用作
typeof x
,但typeof(x)
也可行。 - 以字符串的形式返回类型名称,例如
"string"
。 typeof null
会返回"object"
—— 这是 JavaScript 编程语言的一个错误,实际上它并不是一个object
。
typeof undefined // "undefined"
typeof 0 // "number"
typeof 10n // "bigint"
typeof true // "boolean"
typeof "foo" // "string"
typeof Symbol("id") // "symbol"
typeof Math // "object" (1)
typeof null // "object" (2)
typeof alert // "function" (3)
交互函数
这些方法都是模态的:它们暂停脚本的执行,并且不允许用户与该页面的其余部分进行交互,直到窗口被解除。
alert 模态框
alert("Hello");
prompt 文本模态框
result = prompt(title, [default]);
title
为窗口标题,[default]
为默认填充值, result
为接收值
// 建议始终显式提供默认值
let test = prompt("Test", ''); // <-- 用于 IE 浏览器
confirm 确认模态框
result = confirm(question);
question
为弹窗内容, result
为接收值(true/false)
let isBoss = confirm("Are you the boss?");
alert( isBoss ); // 如果“确定”按钮被按下,则显示 true
上述所有方法共有两个限制:
- 模态窗口的确切位置由浏览器决定。通常在页面中心。
- 窗口的确切外观也取决于浏览器。我们不能修改它。
类型转换
字符串转换 —— 转换发生在输出内容的时候,也可以通过 String(value) 进行显式转换。原始类型值的 string 类型转换通常是很明显的。
数字型转换 —— 转换发生在进行算术操作时,也可以通过 Number(value) 进行显式转换。
数字型转换遵循以下规则:
值 | 变成…… |
---|---|
undefined | NaN |
null | 0 |
true/false | 1/0 |
string | “按原样读取”字符串,两端的空白字符(空格、换行符 \n、制表符 \t 等)会被忽略。空字符串变成 0。转换出错则输出 NaN |
布尔型转换 —— 转换发生在进行逻辑操作时,也可以通过 Boolean(value) 进行显式转换。
布尔型转换遵循以下规则:
值 | 变成…… |
---|---|
0, null, undefined, NaN, "" false | false |
其他值 | true |
数学运算
支持以下数学运算:
加法 +
,
减法 -
,
乘法 *
,
除法 /
,
取余 %
,
求幂 **
.
+
应用于字符串连接
+
应用于数字转化
原地修改: +=
*=
自增/自减: ++
--
位运算符:
- 按位与 (
&
) - 按位或 (
|
) - 按位异或 (
^
) - 按位非 (
~
) - 左移 (
<<
) - 右移 (
>>
) - 无符号右移 (
>>>
)
alert( 8 % 3 ); // 2,8 除以 3 的余数
alert( 4 ** (1/2) ); // 2(1/2 次方与平方根相同)
alert( '1' + 2 ); // "12" 字符串拼接
// 运算元自动转化为数字
alert( 6 - '2' ); // 4,将 '2' 转换为数字
alert( '6' / '2' ); // 3,将两个运算元都转换为数字
// 加号应用于非数字的单个值时会将其转化为数字
let y = -2;
alert( +y ); // -2
alert( +true ); // 1
alert( +"" ); // 0
// 原地修改
let n = 2;
n *= 3 + 5;
alert( n ); // 16 (右边部分先被计算,等同于 n *= 8)
值的比较
我们知道,在数学中有很多用于比较大小的运算符。 在 JavaScript 中,它们的编写方式如下:
- 大于 / 小于:
a > b
,a < b
。 - 大于等于 / 小于等于:
a >= b
,a <= b
。 - 检查两个值的相等:
a == b
,请注意双等号==
表示相等性检查,而单等号a = b
表示赋值。 - 检查两个值不相等:不相等在数学中的符号是
≠
,但在 JavaScript 中写成a != b
。
字符串比较:按字符(母)逐个进行比较。
不同类型间的比较:
- 当对不同类型的值进行比较时,JavaScript 会首先将其转化为数字(number)再判定大小。
严格相等:===
在进行比较时不会做任何的类型转换。
对null和undefined进行比较:
- 使用
==
时它们相等 - 使用
===
时它们不等 - 使用数学式或
< > <= >=
时:null
被转化为0
,undefined
被转化为NaN
alert( 2 > 1 ); // true(正确)
alert( 2 == 1 ); // false(错误)
alert( 2 != 1 ); // true(正确)
alert( 'Z' > 'A' ); // true
alert( 'Glow' > 'Glee' ); // true
alert( 'Bee' > 'Be' ); // true
alert( '2' > 1 ); // true,字符串 '2' 会被转化为数字 2
alert( '01' == 1 ); // true,字符串 '01' 会被转化为数字 1
alert( true == 1 ); // true
alert( 0 === false ); // false,因为被比较值的数据类型不同
alert( null === undefined ); // false
alert( null == undefined ); // true
条件分支
if语句 :if
else if
else
let year = prompt('In which year was ECMAScript-2015 specification published?', '');
if (year < 2015) {
alert( 'Too early...' );
} else if (year > 2015) {
alert( 'Too late' );
} else {
alert( 'Exactly!' );
}
?
语句:
let accessAllowed = age > 18 ? true : false;
逻辑运算符
||(或)
1.操作布尔值(传统特性)
如果参与运算的任意一个参数为 true
,返回的结果就为 true
,否则返回 false
。
let hour = 12;
let isWeekend = true;
if (hour < 10 || hour > 18 || isWeekend) {
alert( 'The office is closed.' ); // 是周末
}
2.运算寻找第一个真值(Js特性)
或运算符 ||
做了如下的事情:
- 从左到右依次计算操作数。
- 处理每一个操作数时,都将其转化为布尔值。如果结果是
true
,就停止计算,返回这个操作数的初始值。 - 如果所有的操作数都被计算过(也就是,转换结果都是
false
),则返回最后一个操作数。
alert( 1 || 0 ); // 1(1 是真值)
alert( null || 1 ); // 1(1 是第一个真值)
alert( null || 0 || 1 ); // 1(第一个真值)
alert( undefined || null || 0 ); // 0(都是假值,返回最后一个值)
特殊用法: 1.获取变量列表或者表达式中的第一个真值。
alert( firstName || lastName || nickName || "Anonymous"); // SuperCoder
2.短路求值(Short-circuit evaluation)
true || alert("not printed");
false || alert("printed");
&&(与)
1.操作布尔值
当两个操作数都是真值时,与运算返回 true
,否则返回 false
alert( true && true ); // true
2.与运算寻找第一个假值
与运算 &&
做了如下的事:
- 从左到右依次计算操作数。
- 在处理每一个操作数时,都将其转化为布尔值。如果结果是
false
,就停止计算,并返回这个操作数的初始值。 - 如果所有的操作数都被计算过(例如都是真值),则返回最后一个操作数。
// 如果第一个操作数是真值,
// 与运算返回第二个操作数:
alert( 1 && 0 ); // 0
alert( 1 && 5 ); // 5
// 如果第一个操作数是假值,
// 与运算将直接返回它。第二个操作数会被忽略
alert( null && 5 ); // null
alert( 0 && "no matter what" ); // 0
// 如果所有的值都是真值,最后一个值将会被返回
alert( 1 && 2 && 3 ); // 3,最后一个值
!(非)
逻辑非运算符接受一个参数,并按如下运作:
将操作数转化为布尔类型:true/false。 返回相反的值。
空值合并运算符 '??'
如果第一个参数不是 null/undefined,则 ?? 返回第一个参数。否则,返回第二个参数。
// 类似于
result = (a !== null && a !== undefined) ? a : b;
用来提供默认值:
let firstName = null;
let lastName = null;
let nickName = "Supercoder";
// 显示第一个已定义的值:
alert(firstName ?? lastName ?? nickName ?? "匿名"); // Supercoder
与||
比较:
- || 返回第一个 真 值。
- ?? 返回第一个 已定义的 值。
循环:while 和 for
循环体
while (condition) {
// 代码
// 所谓的“循环体”
}
do {
// 循环体
} while (condition);
for (begin; condition; step) {
// ……循环体……
}