JavaScript 语言基础
语法基础
区分大小写
JavaScript 是区分大小写的语言。变量、函数名、运算符和其他所有标识符都必须采用一致的大小写形式。
javascript
let test = 'hello';
let Test = 'world';
// test 和 Test 是两个不同的变量标识符命名规则
标识符是变量、函数、属性或函数参数的名称。规则如下：
第一个字符必须是：
- 字母（a-z 或 A-Z）
- 下划线（_）
- 美元符号（$）
后续字符可以是：
- 字母
- 数字
- 下划线
- 美元符号
javascript
// 有效的标识符
let firstName = 'John';
let $element = document.getElementById('myId');
let _private = 'secret';
let π = 3.14159;
// 无效的标识符
let 1name = 'invalid'; // 不能以数字开头
let user-name = 'invalid'; // 不能包含连字符
let class = 'invalid'; // 不能使用关键字变量声明
var 声明
javascript
var message = "hello"; // 声明并初始化
var name = "John", // 一次声明多个变量
age = 25,
job = "developer";
var x; // 声明但不初始化，值为 undefined
// 变量提升示例
console.log(name); // undefined
var name = "John"; // 声明会被提升，但赋值不会
function test() {
var local = "局部变量"; // 函数作用域
}let 声明
javascript
let message = "hello"; // 块级作用域
let a = 1, b = 2; // 一次声明多个变量
// 暂时性死区（TDZ）示例
console.log(age); // ReferenceError
let age = 25;
// 块级作用域示例
if (true) {
let blockScoped = "只在块内可见";
var functionScoped = "在函数内可见";
}
console.log(functionScoped); // 可访问
console.log(blockScoped); // ReferenceErrorconst 声明
javascript
// 基本类型常量
const PI = 3.14159;
// PI = 3.14; // TypeError: 不能重新赋值
// 对象常量
const person = { name: "John" };
person.name = "Jane"; // 可以修改属性
// person = {}; // TypeError: 不能重新赋值对象
// 数组常量
const numbers = [1, 2, 3];
numbers.push(4); // 可以修改数组内容
// numbers = []; // TypeError: 不能重新赋值数组数据类型
1. Undefined 类型
javascript
let message;
console.log(typeof message); // "undefined"
console.log(typeof undeclared); // "undefined"
console.log(message === undefined); // true2. Null 类型
javascript
let car = null;
console.log(typeof car); // "object"
console.log(car === null); // true
console.log(undefined == null); // true
console.log(undefined === null); // false3. Boolean 类型
javascript
let isActive = true;
let isOnline = false;
// 转换为布尔值
console.log(Boolean("")); // false
console.log(Boolean("hello")); // true
console.log(Boolean(0)); // false
console.log(Boolean(1)); // true
console.log(Boolean({})); // true
console.log(Boolean(null)); // false4. Number 类型
javascript
// 整数
let intNum = 55;
// 浮点数
let floatNum = 5.5;
let floatNum2 = .1; // 有效但不推荐
let floatNum3 = 3.125e7;// 科学计数法
// 特殊值
console.log(Number.MAX_VALUE); // 最大数值
console.log(Number.MIN_VALUE); // 最小数值
console.log(Number.POSITIVE_INFINITY); // 正无穷
console.log(Number.NEGATIVE_INFINITY); // 负无穷
console.log(Number.NaN); // 非数值
// 数值转换
console.log(Number("123")); // 123
console.log(parseInt("123blue")); // 123
console.log(parseFloat("22.34.5"));// 22.345. String 类型
javascript
// 字符串字面量
let firstName = "John";
let lastName = 'Doe';
// 模板字面量
let greeting = `Hello, ${firstName}!`;
let multiLine = `
这是第一行
这是第二行
这是第三行
`;
// 字符串不可变
let lang = "Java";
lang = lang + "Script"; // 创建新字符串
// 转换为字符串
let num = 10;
console.log(num.toString()); // "10"
console.log(true.toString()); // "true"6. Symbol 类型
javascript
// 创建Symbol
let sym1 = Symbol();
let sym2 = Symbol("description");
// Symbol的使用
let obj = {
[sym1]: "value1",
[sym2]: "value2"
};
// Symbol属性不会出现在for-in循环中
for (let key in obj) {
console.log(key); // 什么都不会输出
}
// 获取Symbol属性
console.log(Object.getOwnPropertySymbols(obj));7. BigInt 类型
javascript
// 创建BigInt
let bigInt = 9007199254740991n;
let anotherBigInt = BigInt(9007199254740991);
// BigInt运算
console.log(bigInt + 1n); // 9007199254740992n
console.log(bigInt * 2n); // 18014398509481982n
// 不能与Number混合运算
// console.log(bigInt + 1); // TypeError操作符
一元操作符
javascript
let num = 1;
console.log(++num); // 2 (前增量)
console.log(num++); // 2 (后增量)
console.log(--num); // 2 (前减量)
console.log(num--); // 2 (后减量)
// 一元加和减
let num2 = "123";
console.log(+num2); // 123 (转换为数值)
console.log(-true); // -1算术操作符
javascript
let result1 = 5 + 5; // 加法
let result2 = 10 - 5; // 减法
let result3 = 5 * 2; // 乘法
let result4 = 10 / 2; // 除法
let result5 = 10 % 3; // 取模
// 特殊情况
console.log(5 + "5"); // "55" (字符串连接)
console.log(5 + true); // 6 (true转换为1)
console.log(5 + false); // 5 (false转换为0)关系操作符
javascript
let result = 5 > 3; // true
let result2 = "23" < "3"; // true (字符串比较)
let result3 = "23" < 3; // false (数值比较)
// 相等和全等
console.log("55" == 55); // true (转换后相等)
console.log("55" === 55); // false (不全等)
console.log(null == undefined); // true
console.log(null === undefined);// false逻辑操作符
javascript
// 逻辑与 (&&)
console.log(true && true); // true
console.log(true && false); // false
console.log({} && null); // null
console.log(false && {}); // false
// 逻辑或 (||)
console.log(true || false); // true
console.log(false || {}); // {}
console.log(null || undefined);// undefined
// 逻辑非 (!)
console.log(!true); // false
console.log(!""); // true
console.log(!0); // true
console.log(!{}); // false语句
if 语句
javascript
let num = 25;
if (num > 30) {
console.log("大于30");
} else if (num > 20) {
console.log("大于20");
} else {
console.log("小于等于20");
}
// 条件表达式
let max = (num1 > num2) ? num1 : num2;switch 语句
javascript
let status = 2;
switch (status) {
case 1:
console.log("处理中");
break;
case 2:
console.log("已完成");
break;
default:
console.log("未知状态");
}
// 多个case共享一个执行块
switch (status) {
case 1:
case 2:
console.log("活跃");
break;
case 3:
case 4:
console.log("非活跃");
break;
}循环语句
javascript
// for 循环
for (let i = 0; i < 10; i++) {
if (i === 5) continue; // 跳过当前迭代
if (i === 8) break; // 退出循环
console.log(i);
}
// while 循环
let i = 0;
while (i < 10) {
console.log(i);
i++;
}
// do-while 循环
let j = 0;
do {
console.log(j);
j++;
} while (j < 10);
// for-in 循环 (用于对象)
let person = {name: "John", age: 25};
for (let prop in person) {
console.log(prop + ": " + person[prop]);
}
// for-of 循环 (用于可迭代对象)
let numbers = [1, 2, 3, 4, 5];
for (let num of numbers) {
console.log(num);
}练习题
- 实现一个函数，判断一个变量的数据类型。
javascript
function getType(value) {
if (value === null) return "null";
if (typeof value === "object") {
if (Array.isArray(value)) return "array";
return "object";
}
return typeof value;
}- 编写一个函数，实现深度比较两个值是否相等。
javascript
function deepEqual(val1, val2) {
if (val1 === val2) return true;
if (typeof val1 !== typeof val2) return false;
if (typeof val1 !== "object") return false;
if (val1 === null || val2 === null) return false;
let keys1 = Object.keys(val1);
let keys2 = Object.keys(val2);
if (keys1.length !== keys2.length) return false;
return keys1.every(key =>
keys2.includes(key) && deepEqual(val1[key], val2[key])
);
}- 实现一个函数，将数字转换为中文大写金额。
javascript
function numberToChinese(num) {
const units = ['', '万', '亿'];
const digits = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
const positions = ['', '拾', '佰', '仟'];
// 实现细节省略...
}重要概念
- 理解变量声明的三种方式及其区别
- 掌握数据类型的特点和转换规则
- 熟悉各种操作符的运算规则
- 理解流程控制语句的使用场景