JavaScript基础语法

JavaScript是一种轻量级的、解释型的、面向对象的、具有函数优先特性的编程语言，被广泛应用于Web开发。本文将介绍JavaScript的基础语法和核心概念。

变量与声明

JavaScript中有三种声明变量的方式：var、let和const。

var

var是最早的变量声明方式，具有函数作用域。

var message = "你好";
var count = 10;

// var的变量提升特性
console.log(x); // undefined
var x = 5;

// 等同于
var x;
console.log(x);
x = 5;

// var可以重复声明
var user = "张三";
var user = "李四"; // 合法，user被覆盖为"李四"

let

let是ES6引入的块级作用域变量声明方式。

let message = "你好";
let count = 10;

// let具有块级作用域
{
  let blockScoped = "我只在这个块中可见";
  console.log(blockScoped); // "我只在这个块中可见"
}
// console.log(blockScoped); // 错误：blockScoped未定义

// let不允许在同一作用域内重复声明
let user = "张三";
// let user = "李四"; // 语法错误：标识符'user'已被声明

// let存在暂时性死区
// console.log(value); // 错误：不能在声明前访问'value'
let value = 42;

const

const用于声明常量，一旦赋值就不能再修改。

const PI = 3.14159;
// PI = 3; // 错误：常量不能重新赋值

// const也具有块级作用域
{
  const blockConst = "块级常量";
  console.log(blockConst);
}
// console.log(blockConst); // 错误：blockConst未定义

// 声明const时必须初始化
// const RATE; // 语法错误：常量声明必须初始化

// const声明的对象内容可以修改
const user = { name: "张三" };
user.name = "李四"; // 合法
// user = { name: "王五" }; // 错误：不能重新赋值

数据类型

JavaScript有七种基本数据类型和一种引用类型（对象）。

基本数据类型

1. 数值型（Number）

let integer = 42;
let float = 3.14;
let exponential = 2.5e5; // 250000
let binary = 0b1010; // 10
let octal = 0o744; // 484
let hex = 0xFF; // 255

// 特殊数值
let infinity = Infinity;
let negInfinity = -Infinity;
let notANumber = NaN;

console.log(typeof integer); // "number"

2. 字符串（String）

let singleQuote = '单引号字符串';
let doubleQuote = "双引号字符串";
let backtick = `模板字符串`;

// 字符串连接
let fullName = '张' + '三';

// 模板字符串
let name = "李四";
let greeting = `你好，${name}！`;
console.log(greeting); // "你好，李四！"

// 转义字符
let withNewline = "第一行\n第二行";
let withTab = "姓名\t年龄";

// 字符串属性和方法
console.log(name.length); // 2
console.log(name.toUpperCase()); // "李四"

3. 布尔值（Boolean）

let isActive = true;
let isLoggedIn = false;

// 条件判断
if (isActive) {
  console.log("用户处于活动状态");
}

console.log(typeof isActive); // "boolean"

4. 空值（null）

let empty = null;
console.log(typeof empty); // "object"（这是JavaScript的一个历史遗留bug）

5. 未定义（undefined）

let notDefined;
console.log(notDefined); // undefined
console.log(typeof notDefined); // "undefined"

6. 符号（Symbol）

// 创建唯一标识符
let id = Symbol("id");
let anotherId = Symbol("id");

console.log(id === anotherId); // false
console.log(typeof id); // "symbol"

7. 大整数（BigInt）

let bigNumber = 9007199254740991n; // 在数字后加n
let anotherBigNumber = BigInt("9007199254740992");

console.log(typeof bigNumber); // "bigint"

引用类型

对象（Object）

// 对象字面量
let person = {
  name: "张三",
  age: 30,
  isStudent: false,
  greet: function() {
    console.log(`你好，我是${this.name}`);
  }
};

// 访问对象属性
console.log(person.name); // "张三"
console.log(person["age"]); // 30

// 调用对象方法
person.greet(); // "你好，我是张三"

// 数组（特殊的对象）
let fruits = ["苹果", "香蕉", "橙子"];
console.log(fruits[0]); // "苹果"
console.log(fruits.length); // 3

// 函数（特殊的对象）
function add(a, b) {
  return a + b;
}
console.log(add(5, 3)); // 8

类型转换

JavaScript是弱类型语言，变量可以在运行时改变类型，并且在需要时会自动进行类型转换。

显式转换

// 转换为字符串
let num = 42;
let str1 = String(num); // "42"
let str2 = num.toString(); // "42"

// 转换为数字
let str = "3.14";
let num1 = Number(str); // 3.14
let num2 = parseInt(str); // 3
let num3 = parseFloat(str); // 3.14
let num4 = +str; // 3.14

// 转换为布尔值
let zero = Boolean(0); // false
let emptyString = Boolean(""); // false
let nullValue = Boolean(null); // false
let undefinedValue = Boolean(undefined); // false
let nonZero = Boolean(42); // true
let text = Boolean("Hello"); // true

隐式转换

// 字符串连接
let result = "3" + 4; // "34"（数字被转换为字符串）

// 数学运算
let sum = "5" - 2; // 3（字符串被转换为数字）
let product = "5" * "2"; // 10（两个字符串都被转换为数字）

// 比较运算
console.log("3" > 2); // true（字符串"3"被转换为数字3）
console.log("3" === 3); // false（严格相等，不进行类型转换）
console.log("3" == 3); // true（宽松相等，进行类型转换）

运算符

算术运算符

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（幂运算，10的3次方）

// 自增和自减
let c = 5;
console.log(c++); // 5（后置自增，先返回再增加）
console.log(c); // 6
console.log(++c); // 7（前置自增，先增加再返回）

let d = 5;
console.log(d--); // 5（后置自减，先返回再减少）
console.log(d); // 4
console.log(--d); // 3（前置自减，先减少再返回）

赋值运算符

let x = 10;

x += 5; // 等同于 x = x + 5
console.log(x); // 15

x -= 3; // 等同于 x = x - 3
console.log(x); // 12

x *= 2; // 等同于 x = x * 2
console.log(x); // 24

x /= 4; // 等同于 x = x / 4
console.log(x); // 6

x %= 4; // 等同于 x = x % 4
console.log(x); // 2

x **= 3; // 等同于 x = x ** 3
console.log(x); // 8

比较运算符

let a = 5;
let b = 10;
let c = "5";

console.log(a < b); // true（小于）
console.log(a > b); // false（大于）
console.log(a <= b); // true（小于等于）
console.log(a >= b); // false（大于等于）

console.log(a == c); // true（宽松相等，值相等即可）
console.log(a === c); // false（严格相等，值和类型都必须相等）
console.log(a != b); // true（宽松不等）
console.log(a !== c); // true（严格不等）

逻辑运算符

let x = true;
let y = false;

console.log(x && y); // false（逻辑与）
console.log(x || y); // true（逻辑或）
console.log(!x); // false（逻辑非）

// 短路求值
let a = 0;
let b = "Hello";
let c = null;

console.log(a || b); // "Hello"（a为假值，返回b）
console.log(b || a); // "Hello"（b为真值，返回b）
console.log(c && a); // null（c为假值，返回c）
console.log(b && a); // 0（b为真值，返回a）

三元运算符

let age = 20;
let status = age >= 18 ? "成年" : "未成年";
console.log(status); // "成年"

空值合并运算符

let user = null;
let defaultUser = "游客";
let displayName = user ?? defaultUser;
console.log(displayName); // "游客"

// 与逻辑或的区别
let count = 0;
let defaultCount = 10;
let result1 = count || defaultCount; // 10（0被视为假值）
let result2 = count ?? defaultCount; // 0（只有null和undefined才会使用默认值）

可选链运算符

let user = {
  name: "张三",
  address: {
    city: "北京"
  }
};

let emptyUser = {};

// 不使用可选链
// let city = emptyUser.address.city; // 错误：无法读取未定义的属性'city'

// 使用可选链
let city1 = user?.address?.city; // "北京"
let city2 = emptyUser?.address?.city; // undefined（不会报错）

控制流

条件语句

if...else语句

let hour = 14;

if (hour < 12) {
  console.log("上午好");
} else if (hour < 18) {
  console.log("下午好");
} else {
  console.log("晚上好");
}

switch语句

let day = 2;
let dayName;

switch (day) {
  case 1:
    dayName = "星期一";
    break;
  case 2:
    dayName = "星期二";
    break;
  case 3:
    dayName = "星期三";
    break;
  case 4:
    dayName = "星期四";
    break;
  case 5:
    dayName = "星期五";
    break;
  case 6:
    dayName = "星期六";
    break;
  case 0:
    dayName = "星期日";
    break;
  default:
    dayName = "无效日期";
}

console.log(dayName); // "星期二"

循环语句

for循环

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

// 遍历数组
let colors = ["红", "绿", "蓝"];
for (let i = 0; i < colors.length; i++) {
  console.log(colors[i]); // "红", "绿", "蓝"
}

// for...in循环（遍历对象属性）
let person = {
  name: "张三",
  age: 30,
  job: "工程师"
};

for (let key in person) {
  console.log(key + ": " + person[key]);
}
// 输出:
// name: 张三
// age: 30
// job: 工程师

// for...of循环（遍历可迭代对象）
for (let color of colors) {
  console.log(color); // "红", "绿", "蓝"
}

while和do...while循环

// 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);

// 即使条件一开始就不满足，do...while也会执行一次
let k = 10;
do {
  console.log(k); // 10
  k++;
} while (k < 5);

跳转语句

// break语句（跳出循环）
for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break; // 当i等于5时，跳出循环
  }
  console.log(i); // 0, 1, 2, 3, 4
}

// continue语句（跳过当前迭代）
for (let i = 0; i < 5; i++) {
  if (i === 2) {
    continue; // 当i等于2时，跳过当前迭代
  }
  console.log(i); // 0, 1, 3, 4
}

// 标签语句
outerLoop: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) {
      break outerLoop; // 跳出外层循环
    }
    console.log(`i=${i}, j=${j}`);
  }
}

函数

函数声明

// 函数声明
function greet(name) {
  return "你好，" + name;
}

console.log(greet("张三")); // "你好，张三"

// 函数表达式
const sayHello = function(name) {
  return "你好，" + name;
};

console.log(sayHello("李四")); // "你好，李四"

// 箭头函数
const welcome = (name) => {
  return "欢迎，" + name;
};

// 简化的箭头函数（单一表达式）
const welcome2 = name => "欢迎，" + name;

console.log(welcome("王五")); // "欢迎，王五"
console.log(welcome2("赵六")); // "欢迎，赵六"

参数

// 默认参数
function greet(name = "访客") {
  return "你好，" + name;
}

console.log(greet()); // "你好，访客"
console.log(greet("张三")); // "你好，张三"

// 剩余参数
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

// 参数解构
function displayPerson({ name, age }) {
  console.log(`姓名: ${name}, 年龄: ${age}`);
}

displayPerson({ name: "张三", age: 30 }); // "姓名: 张三, 年龄: 30"

作用域

// 全局作用域
const globalVar = "我是全局变量";

function exampleScope() {
  // 函数作用域
  const localVar = "我是局部变量";
  
  console.log(globalVar); // "我是全局变量"
  console.log(localVar); // "我是局部变量"
  
  if (true) {
    // 块级作用域
    const blockVar = "我是块级变量";
    console.log(blockVar); // "我是块级变量"
  }
  
  // console.log(blockVar); // 错误：blockVar未定义
}

exampleScope();
console.log(globalVar); // "我是全局变量"
// console.log(localVar); // 错误：localVar未定义

闭包

function createCounter() {
  let count = 0;
  
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

错误处理

// try...catch语句
try {
  // 可能会抛出错误的代码
  const result = nonExistentFunction();
  console.log(result);
} catch (error) {
  // 处理错误
  console.error("发生错误:", error.message);
} finally {
  // 无论是否有错误都会执行
  console.log("清理工作");
}

// 抛出自定义错误
function divide(a, b) {
  if (b === 0) {
    throw new Error("除数不能为零");
  }
  return a / b;
}

try {
  console.log(divide(10, 2)); // 5
  console.log(divide(10, 0)); // 抛出错误
} catch (error) {
  console.error(error.message); // "除数不能为零"
}

总结

JavaScript的基础语法涵盖了变量声明、数据类型、运算符、控制流和函数等核心概念。掌握这些基础知识是学习和应用JavaScript的关键。随着对这些基础概念的深入理解，你将能够更有效地使用JavaScript进行Web开发和其他应用程序的开发。

JavaScript是一门灵活且强大的语言，它的语法相对简单，但其背后的概念和应用却非常深入。通过不断实践和学习，你将能够充分发挥JavaScript的潜力。