Appearance
JavaScript 基础语法
本文介绍JavaScript的基本语法和核心概念,包括变量声明、数据类型、运算符、控制流等基础知识。
变量声明
JavaScript中有三种声明变量的方式:var、let和const。
javascript
// var - 函数作用域,可重复声明,存在变量提升
var name = "JavaScript";
// let - 块级作用域,不可重复声明,不存在变量提升
let age = 25;
// const - 块级作用域,声明常量,不可重新赋值
const PI = 3.14159;数据类型
JavaScript有七种基本数据类型和一种引用类型:
基本数据类型
- Number:整数和浮点数,如
42或3.14 - String:文本字符串,如
"Hello"或'World' - Boolean:逻辑值,
true或false - Undefined:未定义的值,变量声明但未赋值时的默认值
- Null:表示空值或不存在的对象
- Symbol:ES6引入的唯一且不可变的数据类型
- BigInt:用于表示大于2^53-1的整数
引用数据类型
- Object:包括普通对象、数组、函数等
javascript
// 检查数据类型
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" (这是一个历史遗留的bug)
console.log(typeof Symbol()); // "symbol"
console.log(typeof 42n); // "bigint"
console.log(typeof {}); // "object"
console.log(typeof []); // "object"
console.log(typeof function(){}); // "function"运算符
算术运算符
javascript
let a = 10;
let b = 3;
console.log(a + b); // 加法: 13
console.log(a - b); // 减法: 7
console.log(a * b); // 乘法: 30
console.log(a / b); // 除法: 3.3333...
console.log(a % b); // 取余: 1
console.log(a ** b); // 幂运算: 1000比较运算符
javascript
console.log(a == b); // 相等(值): false
console.log(a === b); // 严格相等(值和类型): false
console.log(a != b); // 不相等: true
console.log(a !== b); // 严格不相等: true
console.log(a > b); // 大于: true
console.log(a < b); // 小于: false
console.log(a >= b); // 大于等于: true
console.log(a <= b); // 小于等于: false逻辑运算符
javascript
let x = true;
let y = false;
console.log(x && y); // 逻辑与: false
console.log(x || y); // 逻辑或: true
console.log(!x); // 逻辑非: false控制流
条件语句
javascript
let score = 85;
// if-else语句
if (score >= 90) {
console.log("优秀");
} else if (score >= 80) {
console.log("良好");
} else if (score >= 60) {
console.log("及格");
} else {
console.log("不及格");
}
// 三元运算符
let result = score >= 60 ? "通过" : "未通过";
console.log(result);
// switch语句
let grade = "B";
switch (grade) {
case "A":
console.log("优秀");
break;
case "B":
console.log("良好");
break;
case "C":
console.log("及格");
break;
default:
console.log("未知等级");
}循环语句
javascript
// for循环
for (let i = 0; i < 5; i++) {
console.log(i);
}
// while循环
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
// do-while循环
i = 0;
do {
console.log(i);
i++;
} while (i < 5);
// for...of循环(遍历可迭代对象的值)
let colors = ["red", "green", "blue"];
for (let color of colors) {
console.log(color);
}
// for...in循环(遍历对象的属性)
let person = {name: "John", age: 30, job: "Developer"};
for (let key in person) {
console.log(key + ": " + person[key]);
}函数
javascript
// 函数声明
function greet(name) {
return "Hello, " + name + "!";
}
// 函数表达式
let sayHello = function(name) {
return "Hello, " + name + "!";
};
// 箭头函数(ES6)
let welcome = (name) => {
return "Welcome, " + name + "!";
};
// 简化的箭头函数(单一表达式)
let add = (a, b) => a + b;
console.log(greet("Alice")); // "Hello, Alice!"
console.log(sayHello("Bob")); // "Hello, Bob!"
console.log(welcome("Charlie")); // "Welcome, Charlie!"
console.log(add(5, 3)); // 8数组操作
javascript
// 创建数组
let fruits = ["Apple", "Banana", "Orange"];
// 访问元素
console.log(fruits[0]); // "Apple"
// 添加元素
fruits.push("Grape"); // 末尾添加
fruits.unshift("Strawberry"); // 开头添加
// 删除元素
fruits.pop(); // 删除末尾元素
fruits.shift(); // 删除开头元素
// 查找元素
console.log(fruits.indexOf("Banana")); // 1
// 遍历数组
fruits.forEach((fruit, index) => {
console.log(index + ": " + fruit);
});
// 数组转换
let upperFruits = fruits.map(fruit => fruit.toUpperCase());
// 数组过滤
let longFruits = fruits.filter(fruit => fruit.length > 5);对象操作
javascript
// 创建对象
let person = {
name: "John",
age: 30,
job: "Developer",
greet: function() {
return "Hello, my name is " + this.name;
}
};
// 访问属性
console.log(person.name); // "John"
console.log(person["age"]); // 30
// 添加/修改属性
person.location = "New York";
person.age = 31;
// 删除属性
delete person.job;
// 检查属性是否存在
console.log("name" in person); // true
console.log(person.hasOwnProperty("salary")); // false
// 获取所有键
console.log(Object.keys(person));
// 获取所有值
console.log(Object.values(person));
// 获取所有键值对
console.log(Object.entries(person));