Skip to content

JavaScript 基础语法

本文介绍JavaScript的基本语法和核心概念,包括变量声明、数据类型、运算符、控制流等基础知识。

变量声明

JavaScript中有三种声明变量的方式:varletconst

javascript
// var - 函数作用域,可重复声明,存在变量提升
var name = "JavaScript";

// let - 块级作用域,不可重复声明,不存在变量提升
let age = 25;

// const - 块级作用域,声明常量,不可重新赋值
const PI = 3.14159;

数据类型

JavaScript有七种基本数据类型和一种引用类型:

基本数据类型

  • Number:整数和浮点数,如 423.14
  • String:文本字符串,如 "Hello"'World'
  • Boolean:逻辑值,truefalse
  • 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));