JavaScript 核心语法详解

1. 变量声明

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

// 1. var (ES5, 存在变量提升)
var name = "小明";

// 2. let (ES6, 块级作用域)
let age = 18;

// 3. const (ES6, 常量，不可重新赋值)
const PI = 3.14159;

最佳实践：默认使用 const，需要重新赋值时用 let，避免使用 var。

2. 数据类型

JavaScript 有7种基本数据类型和1种引用类型：

基本类型

// 1. 字符串
let str = "Hello";

// 2. 数字
let num = 123;

// 3. 布尔值
let bool = true;

// 4. null
let empty = null;

// 5. undefined
let notDefined;

// 6. Symbol (ES6)
let sym = Symbol("unique");

// 7. BigInt (ES2020)
let bigNum = 123n;

引用类型

// 对象
let obj = {
  name: "小明",
  age: 18
};

// 数组
let arr = [1, 2, 3];

// 函数
function greet() {
  console.log("Hello!");
}

3. 运算符

算术运算符

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 (指数)

比较运算符

console.log(1 == "1"); // true (值相等)
console.log(1 === "1"); // false (值和类型都相等)
console.log(1 != 2); // true
console.log(1 !== "1"); // true
console.log(3 > 2); // true
console.log(2 <= 2); // true

逻辑运算符

console.log(true && false); // false
console.log(true || false); // true
console.log(!true); // false

4. 流程控制

if-else

let score = 85;

if (score >= 90) {
  console.log("优秀");
} else if (score >= 60) {
  console.log("及格");
} else {
  console.log("不及格");
}

switch

let day = 3;
let dayName;

switch (day) {
  case 1:
    dayName = "星期一";
    break;
  case 2:
    dayName = "星期二";
    break;
  // ...其他情况
  default:
    dayName = "未知";
}

三元运算符

let age = 20;
let canVote = age >= 18 ? "可以投票" : "不能投票";

5. 循环

for 循环

for (let i = 0; i < 5; i++) {
  console.log(i); // 0,1,2,3,4
}

while 循环

let i = 0;
while (i < 5) {
  console.log(i); // 0,1,2,3,4
  i++;
}

do-while 循环

let j = 0;
do {
  console.log(j); // 0,1,2,3,4
  j++;
} while (j < 5);

for...of 循环 (ES6)

let colors = ["red", "green", "blue"];
for (let color of colors) {
  console.log(color); // red, green, blue
}

6. 函数

函数声明

function greet(name) {
  return "Hello, " + name;
}

函数表达式

const greet = function(name) {
  return "Hello, " + name;
};

箭头函数 (ES6)

const greet = (name) => {
  return "Hello, " + name;
};

// 简写形式
const add = (a, b) => a + b;

7. 对象

对象创建

let person = {
  name: "小明",
  age: 18,
  greet: function() {
    console.log("你好，我是" + this.name);
  }
};

访问属性

console.log(person.name); // 小明
console.log(person["age"]); // 18
person.greet(); // 你好，我是小明

8. 数组

数组操作

let fruits = ["苹果", "香蕉"];

// 添加元素
fruits.push("橙子"); // 末尾添加
fruits.unshift("葡萄"); // 开头添加

// 删除元素
fruits.pop(); // 删除最后一个
fruits.shift(); // 删除第一个

// 遍历数组
fruits.forEach(function(fruit) {
  console.log(fruit);
});

9. 类 (ES6)

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`你好，我是${this.name}，今年${this.age}岁`);
  }
}

let xiaoming = new Person("小明", 18);
xiaoming.greet();

10. 模块化 (ES6)

导出模块

// math.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

导入模块

// app.js
import { PI, add } from './math.js';

console.log(PI);
console.log(add(2, 3));

总结

JavaScript 核心语法包括变量声明、数据类型、运算符、流程控制、循环、函数、对象、数组等基础概念。ES6 引入了许多新特性如 let/const、箭头函数、类、模块等，大大提升了 JavaScript 的开发体验。

掌握这些核心语法是学习 JavaScript 的基础，希望这篇文章能帮助你更好地理解和使用 JavaScript！