知识库

Appearance

Return to top
On this page

JavaScript 语法基础

JavaScript 是一种动态编程语言，遵循 ECMAScript 标准。了解其基础语法是掌握这门语言的第一步。

变量声明

JavaScript 提供了三种声明变量的方式，各有其特点和适用场景：

var

  • 函数作用域或全局作用域
  • 存在变量提升（hoisting）
  • 可以重复声明
javascript
var name = 'John';
var name = 'Jane'; // 有效，会覆盖

let

  • 块级作用域
  • 不存在变量提升，存在暂时性死区
  • 不允许重复声明
javascript
let count = 0;
{
  let count = 1; // 新的块级作用域变量
  console.log(count); // 1
}
console.log(count); // 0

const

  • 块级作用域
  • 声明后不可重新赋值
  • 必须在声明时初始化
javascript
const PI = 3.14159;
// PI = 3.14; // 错误！不能重新赋值

const obj = { name: 'John' };
obj.name = 'Jane'; // 有效，修改对象属性
obj.age = 30;      // 有效，修改对象属性
// obj = {};        // 错误！不能重新赋值整个对象

数据类型

JavaScript 有七种原始数据类型和一种对象类型：

原始类型（Primitive Types）

  • Number - 数字类型，包括整数和浮点数，以及特殊值 Infinity 和 NaN
  • String - 字符串类型，使用单引号、双引号或反引号定义
  • Boolean - 布尔类型，true 或 false
  • Null - 空值类型，表示有意的"无值"
  • Undefined - 未定义类型，变量声明但未赋值时的默认值
  • Symbol - 符号类型，ES6引入，用于创建对象的唯一标识符
  • BigInt - 大整数类型，用于表示任意精度的整数

对象类型（Object Types）

  • Object - 对象类型，键值对的集合
  • Array - 数组类型，有序的数据集合
  • Function - 函数类型，可执行的代码块
  • Date - 日期类型
  • RegExp - 正则表达式类型
  • Error - 错误类型

类型检测

JavaScript 提供了多种检测数据类型的方法：

javascript
// typeof 操作符 - 适用于原始类型
typeof 'hello';    // 'string'
typeof 42;         // 'number'
typeof true;       // 'boolean'
typeof undefined;  // 'undefined'
typeof Symbol();   // 'symbol'
typeof 123n;       // 'bigint'

// typeof 对对象类型返回 'object'（除了 null）
typeof {};         // 'object'
typeof [];         // 'object'
typeof new Date(); // 'object'
typeof null;       // 'object'（这是 JavaScript 的一个历史 bug）

// instanceof 操作符 - 检测原型链
[] instanceof Array;        // true
new Date() instanceof Date; // true

// Object.prototype.toString - 最准确的类型检测方法
Object.prototype.toString.call([]);         // '[object Array]'
Object.prototype.toString.call(new Date()); // '[object Date]'
Object.prototype.toString.call(null);       // '[object Null]'

运算符

JavaScript 提供了多种运算符用于执行各种操作：

算术运算符

javascript
+  // 加法
-  // 减法
*  // 乘法
/  // 除法
%  // 取模（余数）
** // 幂运算（ES2016）
++ // 自增
-- // 自减

比较运算符

javascript
==   // 相等（类型转换）
===  // 严格相等（不转换类型）
!=   // 不等
!==  // 严格不等
>    // 大于
<    // 小于
>=   // 大于等于
<=   // 小于等于

逻辑运算符

javascript
&& // 逻辑与
|| // 逻辑或
!  // 逻辑非

赋值运算符

javascript
=    // 赋值
+=   // 加法赋值
-=   // 减法赋值
*=   // 乘法赋值
/=   // 除法赋值
%=   // 取模赋值
**=  // 幂赋值

三元运算符

javascript
condition ? value1 : value2
// 如果 condition 为真，返回 value1，否则返回 value2

控制结构

条件语句

javascript
// if-else 语句
if (condition) {
  // 代码块
} else if (anotherCondition) {
  // 代码块
} else {
  // 代码块
}

// switch 语句
switch (expression) {
  case value1:
    // 代码块
    break;
  case value2:
    // 代码块
    break;
  default:
    // 代码块
}

循环语句

javascript
// for 循环
for (let i = 0; i < 10; i++) {
  console.log(i);
}

// while 循环
let count = 0;
while (count < 5) {
  console.log(count);
  count++;
}

// do-while 循环
let index = 0;
do {
  console.log(index);
  index++;
} while (index < 5);

// for...of 循环（ES6）- 遍历可迭代对象
const arr = [1, 2, 3];
for (const item of arr) {
  console.log(item);
}

// for...in 循环 - 遍历对象的可枚举属性
const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  console.log(key, obj[key]);
}

函数基础

函数是JavaScript中的一等公民，可以作为值来传递：

javascript
// 函数声明（存在提升）
function greet(name) {
  return `Hello, ${name}!`;
}

// 函数表达式
const greet = function(name) {
  return `Hello, ${name}!`;
};

// 箭头函数（ES6）
const greet = (name) => `Hello, ${name}!`;
// 单个参数可省略括号
const square = x => x * x;
// 无参数需空括号
const getRandom = () => Math.random();
// 多行函数体需大括号和显式return
const add = (a, b) => {
  const result = a + b;
  return result;
};

注释

JavaScript 支持两种注释方式：

javascript
// 单行注释

/*
多行注释
可以跨越多行
*/

严格模式

ES5 引入的严格模式可以提供更安全的 JavaScript 执行环境：

javascript
'use strict';

// 在严格模式下，一些不安全的操作会被抛出错误
// 例如：未声明变量赋值、删除不可删除的属性等

语句与表达式

  • 语句：执行某些操作的代码单元，如赋值语句、控制流语句
  • 表达式：计算出一个值的代码片段，可以作为语句使用
javascript
// 表达式
3 + 5
x > 10
true

// 语句
if (x > 10) console.log('x is greater than 10');
var y = 3 + 5;

分号插入机制

JavaScript 有自动分号插入（ASI）机制，但在某些情况下可能导致意外行为，建议显式添加分号。