Appearance
基础语法
JavaScript 基础语法包括变量、数据类型、运算符和控制流程。
变量声明
var（旧方式）
javascript
var name = '张三';
var age = 25;特点：
- 函数作用域
- 变量提升
- 可以重复声明
let（推荐）
javascript
let name = '张三';
name = '李四'; // 可以修改特点：
- 块级作用域
- 不存在变量提升
- 不能重复声明
const（常量）
javascript
const PI = 3.14159;
// PI = 3.14; // 错误，不能修改特点：
- 块级作用域
- 声明时必须初始化
- 不能重新赋值
- 对象属性可以修改
javascript
const person = { name: '张三' };
person.name = '李四'; // 可以
// person = {}; // 错误数据类型
原始类型
javascript
// 数字（Number）
let num = 42;
let price = 3.14;
let negative = -10;
// 字符串（String）
let str1 = 'Hello';
let str2 = "World";
let str3 = `模板字符串 ${str1}`; // 模板字符串
// 布尔值（Boolean）
let isTrue = true;
let isFalse = false;
// 空值（Null）
let empty = null;
// 未定义（Undefined）
let notDefined;
console.log(notDefined); // undefined
// 符号（Symbol）- ES6
let sym = Symbol('description');
// 大整数（BigInt）- ES2020
let bigNum = 9007199254740991n;引用类型
javascript
// 对象（Object）
let person = {
name: '张三',
age: 25
};
// 数组（Array）
let arr = [1, 2, 3, 4, 5];
// 函数（Function）
function greet() {
console.log('Hello!');
}类型检测
javascript
// typeof 操作符
console.log(typeof 42); // "number"
console.log(typeof 'hello'); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object"（历史遗留问题）
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof function(){});// "function"
// instanceof 操作符
console.log([] instanceof Array); // true
console.log({} instanceof Object); // true
// Array.isArray()
console.log(Array.isArray([1, 2, 3])); // true类型转换
javascript
// 转字符串
String(123); // "123"
(123).toString(); // "123"
123 + ''; // "123"
// 转数字
Number('123'); // 123
parseInt('123'); // 123
parseFloat('3.14');// 3.14
+'123'; // 123
// 转布尔值
Boolean(1); // true
Boolean(0); // false
Boolean(''); // false
Boolean('hello'); // true
!!1; // true运算符
算术运算符
javascript
let a = 10, b = 3;
console.log(a + b); // 13 加
console.log(a - b); // 7 减
console.log(a * b); // 30 乘
console.log(a / b); // 3.333... 除
console.log(a % b); // 1 取余
console.log(a ** b); // 1000 幂运算
// 自增/自减
let x = 5;
console.log(x++); // 5（先返回后加）
console.log(x); // 6
console.log(++x); // 7（先加后返回）赋值运算符
javascript
let x = 10;
x += 5; // x = x + 5 -> 15
x -= 3; // x = x - 3 -> 12
x *= 2; // x = x * 2 -> 24
x /= 4; // x = x / 4 -> 6
x %= 4; // x = x % 4 -> 2比较运算符
javascript
// 相等比较
console.log(5 == '5'); // true（类型转换后比较）
console.log(5 === '5'); // false（严格相等，不转换类型）
console.log(5 != '5'); // false
console.log(5 !== '5'); // true
// 大小比较
console.log(10 > 5); // true
console.log(10 >= 10); // true
console.log(5 < 10); // true
console.log(5 <= 5); // true最佳实践
推荐使用 === 和 !== 进行比较，避免类型转换带来的意外结果。
逻辑运算符
javascript
// 与（AND）
console.log(true && true); // true
console.log(true && false); // false
// 或（OR）
console.log(false || true); // true
console.log(false || false); // false
// 非（NOT）
console.log(!true); // false
console.log(!false); // true
// 短路求值
let a = 0;
let b = a || 'default'; // 'default'
let c = a && 'default'; // 0三元运算符
javascript
let age = 18;
let status = age >= 18 ? '成年' : '未成年';
console.log(status); // '成年'字符串运算符
javascript
let str1 = 'Hello';
let str2 = 'World';
console.log(str1 + ' ' + str2); // 'Hello World'控制流程
条件语句
if...else
javascript
let score = 85;
if (score >= 90) {
console.log('优秀');
} else if (score >= 80) {
console.log('良好');
} else if (score >= 60) {
console.log('及格');
} else {
console.log('不及格');
}switch
javascript
let day = 3;
switch (day) {
case 1:
console.log('星期一');
break;
case 2:
console.log('星期二');
break;
case 3:
console.log('星期三');
break;
default:
console.log('其他');
}循环语句
for
javascript
for (let i = 0; i < 5; i++) {
console.log(i);
}
// 输出: 0, 1, 2, 3, 4while
javascript
let i = 0;
while (i < 5) {
console.log(i);
i++;
}do...while
javascript
let i = 0;
do {
console.log(i);
i++;
} while (i < 5);for...in
遍历对象属性：
javascript
let person = { name: '张三', age: 25 };
for (let key in person) {
console.log(key + ': ' + person[key]);
}
// name: 张三
// age: 25for...of
遍历可迭代对象：
javascript
let arr = [1, 2, 3, 4, 5];
for (let value of arr) {
console.log(value);
}
// 1, 2, 3, 4, 5break 和 continue
javascript
// break - 跳出循环
for (let i = 0; i < 10; i++) {
if (i === 5) break;
console.log(i);
}
// 输出: 0, 1, 2, 3, 4
// continue - 跳过当前迭代
for (let i = 0; i < 10; i++) {
if (i % 2 === 0) continue;
console.log(i);
}
// 输出: 1, 3, 5, 7, 9实践示例
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础语法示例</title>
</head>
<body>
<h1>JavaScript 基础语法示例</h1>
<script>
// 变量声明
const appName = '我的应用';
let userCount = 100;
let isLoggedIn = false;
// 数据类型
let price = 99.9;
let productName = '商品名称';
let tags = ['电子', '数码', '科技'];
let product = {
id: 1,
name: '手机',
price: 2999
};
// 条件判断
function getDiscount(userLevel) {
let discount;
switch (userLevel) {
case 'vip':
discount = 0.8;
break;
case 'svip':
discount = 0.7;
break;
default:
discount = 1;
}
return discount;
}
// 循环
function printNumbers(max) {
let numbers = [];
for (let i = 1; i <= max; i++) {
numbers.push(i);
}
return numbers;
}
// 输出结果
console.log('应用名称:', appName);
console.log('用户数量:', userCount);
console.log('VIP折扣:', getDiscount('vip'));
console.log('数字列表:', printNumbers(10));
// 遍历对象
console.log('商品信息:');
for (let key in product) {
console.log(` ${key}: ${product[key]}`);
}
// 遍历数组
console.log('商品标签:');
for (let tag of tags) {
console.log(` - ${tag}`);
}
</script>
</body>
</html>