基础-语法和数据类型
约 3111 字大约 10 分钟
2025-10-09
语法基础
- JavaScript 是区分大小写的
- 在Javascript中,指令被称为语句,并使用分号
;分隔。 - Javascript是按块执行的,但是不同块都属于同一个作用域(全局作用域),后面块中的代码可以访问前面块中的变量。
注释
// 单行注释
/* 这是一个更长的,
* 多行注释
*/
/* 你可以通过转义正斜杠 \/ */变量
JavaScript 有三种变量声明方式。
var:声明一个变量,可选择将其初始化为一个值。let:声明一个块级作用域的局部变量,可选择将其初始化为一个值。const:声明一个块级作用域的只读命名常量。变量
JavaScript 变量的名字又叫做标识符,标识符通常以字母、下划线(_)或者美元符号($)开头;后续的字符也可以是数字(0-9)。因为 JavaScript 是区分大小写的,所以字母包含从 A 到 Z 的大写字母和从 a 到 z 的小写字母。
合法的标识符示例:
Number_hits、temp99、$credit和_name。声明变量
你可以用以下两种方式声明变量:
- 使用关键字
var。例如var x = 42。这个语法可以用来声明局部变量和全局变量,具体取决于执行上下文。 - 使用关键字
const或let。例如let y = 13。这个语法可以用来声明块级作用域的局部变量。
var a; var a, b, c; var b = 1;JavaScript引擎的解析方式:先解析代码,获取所有被声明的变量,提升到代码的头部,然后再一行一行地运行,这成为变量提升。
- 使用关键字
变量作用域
一个变量可能属于下列作用域之一:
全局作用域:在脚本模式中运行的所有代码的默认作用域。
模块作用域:在模块模式中运行的代码的作用域。
函数作用域:由函数创建的作用域。
块级作用域:用一对花括号创建的作用域(块)。
当你在函数的外部声明变量时,该变量被称作全局变量,因为当前文档中任何其他代码都能使用它。当你在函数内声明变量时,该变量被称作局部变量,因为它仅在那个函数内可用。
变量提升
用
var声明的变量会被提升,意味着你可以在该变量所在的作用域的任意地方引用该变量,即使还没有到达变量声明的地方。你可以看见var声明好像被提升到该变量的函数或全局作用域的顶部。然而,如果你在声明变量之前访问该变量,其值总是undefined,因为只有该变量的声明和默认初始化(为undefined)被提升,而不是它的赋值。全局变量
使用
var在任何函数、模块或代码块({})之外声明的变量会成为全局变量。使用
var声明的全局变量会成为全局对象(如window)的不可配置属性。
// 在脚本的最顶层声明 var globalVar = "我是一个全局变量 (var)"; function myFunction() { console.log(globalVar); // 可以访问 } console.log(window.globalVar); // "我是一个全局变量 (var)"常量
可以用
const关键字创建一个只读命名常量。常量标识符的语法和任何变量标识符的语法相同常量必须为其初始化一个值,并且不能后续修改值。
常量的作用域规则和
let块级作用域变量的一致。
数据结构与类型
Javascript定义了6种基本的数据类型:
| 数据类型 | 含义 | 说明 |
|---|---|---|
| null | 空值 | 表示非对象 |
| undefined | 未定义的值 | 已声明,未赋值的变量的默认值 |
| Number | 数字 | 数学运算的值 |
| String | 字符串 | 表示字符串信息 |
| Boolean | 布尔值 | true 、false |
| BigInt | 整数 | 任意精度的整数 |
| object | 对象 | 包括狭义的对象、数组、函数 |
使用typeof运算符可以检测变量的类型:
console.log(typeof 1); // number
console.log(typeof "abc"); // string
console.log(typeof true); // boolean
console.log(typeof {}); // object
console.log(typeof []); // object
console.log(typeof function() {}); // function
console.log(typeof undefined); // undefined比较运算符
当我们对Number做比较时,可以通过比较运算符得到一个布尔值:
2 > 5; // false
5 >= 2; // true
7 == 7; // true实际上,JavaScript允许对任意数据类型做比较:
false == 0; // true
false === 0; // false要特别注意相等运算符==。JavaScript在设计时,有两种比较运算符:
第一种是==比较,它会自动转换数据类型再比较,很多时候,会得到非常诡异的结果;
第二种是===比较,它不会自动转换数据类型,如果数据类型不一致,返回false,如果一致,再比较。
由于JavaScript这个设计缺陷,不要使用==比较,始终坚持使用===比较。
另一个例外是NaN这个特殊的Number与所有其他值都不相等,包括它自己:
NaN === NaN; // false唯一能判断NaN的方法是通过isNaN()函数:
isNaN(NaN); // true数据类型转换
JavaScript是一门动态类型语言,能够根据运算环境自动转换值的类型:
| 值(value) | 字符串操作环境 | 数字运算环境 | 逻辑运算环境 | 对象操作环境 |
|---|---|---|---|---|
| undefined | "undefined" | NaN | false | Error |
| null | "null" | 0 | false | Error |
| 非空字符串 | - | 字符串对应的数字值; NaN | true | String |
| 空字符串 | - | 0 | false | String |
| 0 | "0" | 不转换 | false | Number |
| NaN | "NaN" | 不转换 | false | Number |
| Infinity | "Infinity" | 不转换 | true | Number |
| -Infinity | "-Infinity" | 不转换 | true | Number |
| Number.MAX_VALUE | "1.7976931348 623157e+308" | 不转换 | true | Number |
| NUMBER.MIN_VALUE | "5e-324" | 不转换 | true | Number |
| 其他所有数字 | "数字的字符串值" | 不转换 | true | Number |
| true | "true" | 1 | 不转换 | Boolean |
| false | "false" | 0 | 不转换 | Boolean |
| 对象 | toString() | valueOf()或toString或NaN | true | 不转换 |
在某些情况下,需要我们手动转换类型:
转换为字符串
使用 + 运算符,当值与空字符串相加时,会自动转为字符串
var n = 123; n = n + ""; console.log(typeof n); // string使用
toString()var a = 1e-4; // 1*10^-4 console.log(a.toString()); // "0.0001"
转换为小数格式字符串
num.toFixed(num):指定小数点后num位,输出字符串var a = 10; console.log(a.toFixed(2)) // "10.00"num.toExponential(num):把数字转换为科学计数法,并指定小数点后保留num位(四舍五入),输出字符串var a = 123456789; console.log(a.toExponential(2)) // "1.23e+8" console.log(a.toExponential(4)) // "1.2346e+8"num.toPrecision(num): 把数字转换为科学计数法,并指定有效数字为num位(四舍五入),输出字符串var a = 123456789; console.log(a.toPrecision(2)) // "1.2e+8" console.log(a.toPrecision(4)) // "1.235e+8"
转换为数字
常用值转换为数字说明如下:
true->1false->0""->0Undefined->NaNnull->0NaN->NaNInfinity->Infinity
常用方法如下:
parseInt():转换为整数parseFloat():转换为浮点数
console.log(parseInt("123abc")); // 123
console.log(parseInt("1.73")); // 1
console.log(parseInt(".123")); // NaN
// 如果是以0开头的字符串,则parseInt()把它视为八进制数字,转换为十进制返回
var d = "010"
console.log(parseInt(d)) // 返回十进制 8
// 如果是以0x开头的字符串,则parseInt()把它视为十六进制数字,转换为十进制返回
var e = "0x10"
console.log(parseInt(e)) // 返回十进制 16转换为布尔值
使用两个感叹号!!可以将值转换为布尔类型
var a = 1; console.log(!!a); //true使用一个感叹号可以将值转换为布尔类型并取反
var a = 1; console.log(!a); //false使用
Boolean()函数可以转换为布尔类型var a = 1; console.log(Boolean(a)) //true
转换为对象
使用 new 命令调用String、Number、Boolean类型函数,可以把字符串、数字和布尔类型包装为对应类型的对象
var n = "123"
console.log(typeof new String(n)) // object
console.log(typeof new Number(n)) // object
console.log(typeof new Boolean(n)) // object强制类型转换
Boolean(value):把参数转换为布尔类型Number(value):把参数转换为数字String(value):把参数值转换为字符串
运算符
- 赋值运算符
| 名字 | 简写的运算符 | 含义 |
|---|---|---|
| 赋值 | x = y | 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 |
| 求幂赋值 | 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 |
| 按位或赋值 | x |= y | x = x | y |
| 逻辑与赋值 | x &&= f() | x && (x = f()) |
| 逻辑或赋值 | x ||= f() | x || (x = f()) |
| 逻辑空赋值 | x ??= f() | x ?? (x = f()) |
- 比较运算符
| 运算符 | 描述 | 返回 true 的示例 |
|---|---|---|
| 等于 (==) | 如果两边操作数相等时返回 true。 | 3 == var1"3" == var13 == '3' |
| 不等于 (!=) | 如果两边操作数不相等时返回 true | var1 != 4var2 != "3" |
| 全等 (===) | 两边操作数相等且类型相同时返回 true。 | 3 === var1 |
| 不全等 (!==) | 两边操作数不相等或类型不同时返回 true。 | var1 !== "3"3 !== '3' |
| 大于 (>) | 左边的操作数大于右边的操作数返回 true | var2 > var1"12" > 2 |
| 大于等于 (>=) | 左边的操作数大于或等于右边的操作数返回 true | var2 >= var1var1 >= 3 |
| 小于 (<) | 左边的操作数小于右边的操作数返回 true | var1 < var2"2" < 12 |
| 小于等于 (<=) | 左边的操作数小于或等于右边的操作数返回 true | var1 <= var2var2 <= 5 |
- 算数运算符
| 运算符 | 描述 | 示例 |
|---|---|---|
| 求余(%) | 二元运算符。返回相除之后的余数。 | 12 % 5 返回 2。 |
| 自增(++) | 一元运算符。将操作数的值加一。如果放在操作数前面(++x),则返回加一后的值;如果放在操作数后面(x++),则返回操作数原值,然后再将操作数加一。 | var x=3; console.log(++x); //4 console.log(x); //4var y=3; console.log(y++); //3 console.log(y); //4 |
| 自减(--) | 一元运算符。将操作数的值减一。前后缀两种用法的返回值类似自增运算符。 | var x=3; console.log(--x); //输入 2,x=2var y=3;console.log(y--);//输出 3,x=2; |
| 一元负值符(-) | 一元运算符,返回操作数的负值。 | var x=3; console.log(-x); //输入 -3 |
| 一元正值符(+) | 一元运算符,如果操作数在之前不是数值,试图将其转换为数值。 | console.log( +'3' ); // 3console.log( '3' ); // '3'console.log(+true); // 1 |
| 指数运算符(**) | 计算底数(base)的指数(exponent)次方,表示为 base^exponent。 | 2 ** 3 返回 8。10 ** -1 返回 0.1 |
- 位运算符
| 运算符 | 语法 | 描述 |
|---|---|---|
| 按位与 AND | a & b | 在 a,b 的位表示中,每一个对应的位都为 1 则返回 1,否则返回 0。 |
| 按位或 OR | a | b | 在 a,b 的位表示中,每一个对应的位,只要有一个为 1 则返回 1,否则返回 0。 |
| 按位异或 XOR | a ^ b | 在 a,b 的位表示中,每一个对应的位,两个不相同则返回 1,相同则返回 0。 |
| 按位非 NOT | ~ a | 反转被操作数的位。 |
| 左移 shift | a << b | 将 a 的二进制串向左移动 b 位,右边移入 0。 |
| 算术右移 | a >> b | 把 a 的二进制表示向右移动 b 位,丢弃被移出的所有位。(译注:算术右移左边空出的位是根据最高位是 0 和 1 来进行填充的) |
| 无符号右移 | a >>> b | 把 a 的二进制表示向右移动 b 位,丢弃被移出的所有位,并把左边空出的位都填充为 0。 |
- 逻辑运算符
| 运算符 | 范例 | 描述 |
|---|---|---|
| 逻辑与 (&&) | expr1 && expr2 | (逻辑与) 如果 expr1 能被转换为 false,那么返回 expr1;否则,返回 expr2。因此,&& 用于布尔值时,当操作数都为 true 时返回 true;否则返回 false。 |
| 逻辑或 (||) | expr1 || expr2 | (逻辑或) 如果 expr1 能被转换为 true,那么返回 expr1;否则,返回 expr2。因此,|| 用于布尔值时,当任何一个操作数为 true 则返回 true;如果操作数都是 false 则返回 false。 |
| 逻辑非 (!) | !expr | (逻辑非) 如果操作数能够转换为 true 则返回 false;否则返回 true。 |
