前端-JavaScript基础知识

JavaScript 基础知识

---

一、JavaScript 概述

1.1 什么是 JavaScript

JavaScript 是一种高级的、解释型的编程语言，主要用于网页交互和动态内容。

核心特点：

• 解释型语言，无需编译
• 动态类型
• 基于原型
• 支持函数式编程
• 单线程、异步执行

1.2 JavaScript 版本

版本	说明
ES5	2009 年发布，广泛支持
ES6 (ES2015)	2015 年发布，重大更新
ES2016-ES2023	每年发布新版本

1.3 JavaScript 运行环境

• 浏览器：Chrome、Firefox、Safari、Edge
• Node.js：服务器端运行环境
• 其他：Electron、React Native 等

---

二、基础语法

2.1 注释

// 单行注释

/* 
  多行注释
  可以写多行
*/

/**
 * 文档注释
 * @param {string} name - 名称
 * @returns {string} 问候语
 */

2.2 语句和分号

// 语句以分号结尾（可选，但推荐）
let x = 10;
let y = 20;

// 也可以不加分号（自动插入）
let x = 10
let y = 20

2.3 标识符和关键字

// 标识符规则：字母、数字、_、$，不能以数字开头
let userName = "zhangsan";
let _private = "private";
let $element = document.getElementById("id");

// 关键字不能用作标识符
// let if = 10; // 错误

---

三、变量和常量

3.1 var（不推荐）

var x = 10;
var y = 20;
var x = 30; // 可以重复声明

// 函数作用域
function test() {
  var a = 1;
  if (true) {
    var a = 2; // 同一作用域
  }
  console.log(a); // 2
}

3.2 let（推荐）

let x = 10;
// let x = 20; // 不能重复声明

// 块级作用域
function test() {
  let a = 1;
  if (true) {
    let a = 2; // 不同作用域
    console.log(a); // 2
  }
  console.log(a); // 1
}

3.3 const（常量）

const PI = 3.14159;
// PI = 3.14; // 错误，不能重新赋值

// 对象和数组可以修改内容
const obj = { name: "zhangsan" };
obj.name = "lisi"; // 可以
// obj = {}; // 错误

const arr = [1, 2, 3];
arr.push(4); // 可以
// arr = []; // 错误

---

四、数据类型

4.1 基本类型

// 数字（Number）
let num = 10;
let float = 3.14;
let infinity = Infinity;
let nan = NaN;

// 字符串（String）
let str1 = "单引号";
let str2 = '双引号';
let str3 = `模板字符串 ${num}`;

// 布尔值（Boolean）
let isTrue = true;
let isFalse = false;

// undefined
let undef = undefined;

// null
let empty = null;

// Symbol（ES6）
let sym = Symbol("description");

// BigInt（ES2020）
let big = 9007199254740991n;

4.2 对象类型

// 对象（Object）
let obj = {
  name: "zhangsan",
  age: 25,
  sayHello: function() {
    console.log("Hello");
  }
};

// 数组（Array）
let arr = [1, 2, 3, "four"];

// 函数（Function）
function greet() {
  return "Hello";
}

// 日期（Date）
let date = new Date();

// 正则表达式（RegExp）
let regex = /pattern/;

4.3 类型检测

// typeof
typeof 10;           // "number"
typeof "hello";      // "string"
typeof true;         // "boolean"
typeof undefined;    // "undefined"
typeof null;         // "object" (历史遗留)
typeof {};           // "object"
typeof [];           // "object"
typeof function(){}; // "function"

// instanceof
[] instanceof Array;        // true
{} instanceof Object;        // true
new Date() instanceof Date;  // true

// Object.prototype.toString
Object.prototype.toString.call([]);        // "[object Array]"
Object.prototype.toString.call({});        // "[object Object]"
Object.prototype.toString.call(null);      // "[object Null]"

4.4 类型转换

// 转数字
Number("123");      // 123
parseInt("123");    // 123
parseFloat("3.14"); // 3.14
+"123";             // 123

// 转字符串
String(123);        // "123"
(123).toString();   // "123"
123 + "";           // "123"

// 转布尔值
Boolean(1);         // true
Boolean(0);         // false
Boolean("");        // false
Boolean("hello");   // true
!!1;                // true

---

五、运算符

5.1 算术运算符

let a = 10, b = 3;

a + b;  // 13
a - b;  // 7
a * b;  // 30
a / b;  // 3.333...
a % b;  // 1 (取余)
a ** b; // 1000 (幂运算)

// 自增自减
a++;    // 11
++a;    // 12
a--;    // 11
--a;    // 10

5.2 比较运算符

10 > 5;   // true
10 < 5;   // false
10 >= 5;  // true
10 <= 5;  // false
10 == 5;  // false
10 != 5;  // true

// 严格相等
10 === 10;    // true
10 === "10";  // false
10 !== "10";  // true

5.3 逻辑运算符

// && (与)
true && true;   // true
true && false;  // false

// || (或)
true || false;  // true
false || false; // false

// ! (非)
!true;   // false
!false;  // true

// 短路求值
let result = false && someFunction(); // someFunction 不会执行
let result = true || someFunction();  // someFunction 不会执行

5.4 赋值运算符

let x = 10;

x += 5;  // x = x + 5
x -= 5;  // x = x - 5
x *= 2;  // x = x * 2
x /= 2;  // x = x / 2
x %= 3;  // x = x % 3

5.5 其他运算符

// 三元运算符
let result = condition ? value1 : value2;

// 空值合并运算符 (ES2020)
let value = null ?? "default";  // "default"
let value = undefined ?? "default"; // "default"

// 可选链运算符 (ES2020)
let name = user?.name;
let city = user?.address?.city;

// 展开运算符
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

---

六、控制流

6.1 条件语句

// if-else
if (condition) {
  // 代码块
} else if (condition2) {
  // 代码块
} else {
  // 代码块
}

// switch
switch (value) {
  case 1:
    console.log("一");
    break;
  case 2:
    console.log("二");
    break;
  default:
    console.log("其他");
}

6.2 循环语句

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

// for...in (遍历对象)
for (let key in obj) {
  console.log(key, obj[key]);
}

// for...of (遍历可迭代对象)
for (let item of arr) {
  console.log(item);
}

// while
let i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

// do...while
let j = 0;
do {
  console.log(j);
  j++;
} while (j < 10);

6.3 循环控制

// break：跳出循环
for (let i = 0; i < 10; i++) {
  if (i === 5) break;
  console.log(i);
}

// continue：跳过本次循环
for (let i = 0; i < 10; i++) {
  if (i === 5) continue;
  console.log(i);
}

// 标签
outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) break outer;
    console.log(i, j);
  }
}

---

七、函数

7.1 函数声明

// 函数声明
function greet(name) {
  return `Hello, ${name}`;
}

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

// 箭头函数 (ES6)
const greet = (name) => {
  return `Hello, ${name}`;
};

// 箭头函数简写
const greet = name => `Hello, ${name}`;

7.2 函数参数

// 默认参数
function greet(name = "Guest") {
  return `Hello, ${name}`;
}

// 剩余参数
function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}
sum(1, 2, 3, 4); // 10

// 参数解构
function greet({ name, age }) {
  return `Hello, ${name}, age ${age}`;
}
greet({ name: "zhangsan", age: 25 });

7.3 函数作用域

// 全局作用域
let global = "global";

function test() {
  // 函数作用域
  let local = "local";
  console.log(global); // 可以访问
  console.log(local);  // 可以访问
}

console.log(global); // 可以访问
// console.log(local); // 错误，无法访问

7.4 闭包

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

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

7.5 立即执行函数 (IIFE)

(function() {
  let private = "private";
  console.log(private);
})();

// 箭头函数版本
(() => {
  let private = "private";
  console.log(private);
})();

---

八、对象

8.1 对象创建

// 字面量
let obj = {
  name: "zhangsan",
  age: 25,
  sayHello: function() {
    console.log("Hello");
  }
};

// 构造函数
let obj = new Object();
obj.name = "zhangsan";

// Object.create
let obj = Object.create(null);
obj.name = "zhangsan";

8.2 对象属性

let obj = {
  name: "zhangsan",
  age: 25
};

// 访问属性
obj.name;           // "zhangsan"
obj["name"];        // "zhangsan"

// 添加属性
obj.city = "Beijing";
obj["city"] = "Beijing";

// 删除属性
delete obj.age;

// 检查属性
"name" in obj;              // true
obj.hasOwnProperty("name"); // true

8.3 对象方法

let obj = {
  name: "zhangsan",
  greet: function() {
    return `Hello, ${this.name}`;
  },
  // 简写
  greet2() {
    return `Hello, ${this.name}`;
  },
  // 箭头函数（this 指向外层）
  greet3: () => {
    return `Hello, ${this.name}`; // this 不是 obj
  }
};

8.4 对象遍历

let obj = { a: 1, b: 2, c: 3 };

// for...in
for (let key in obj) {
  console.log(key, obj[key]);
}

// Object.keys
Object.keys(obj).forEach(key => {
  console.log(key, obj[key]);
});

// Object.values
Object.values(obj).forEach(value => {
  console.log(value);
});

// Object.entries
Object.entries(obj).forEach(([key, value]) => {
  console.log(key, value);
});

8.5 对象解构

let obj = { name: "zhangsan", age: 25, city: "Beijing" };

// 解构赋值
let { name, age } = obj;
console.log(name, age); // "zhangsan" 25

// 重命名
let { name: userName, age: userAge } = obj;

// 默认值
let { name, age, email = "default@email.com" } = obj;

// 剩余属性
let { name, ...rest } = obj;

---

九、数组

9.1 数组创建

// 字面量
let arr = [1, 2, 3];

// 构造函数
let arr = new Array(1, 2, 3);
let arr = new Array(5); // 长度为 5 的空数组

// Array.from
let arr = Array.from("hello"); // ["h", "e", "l", "l", "o"]

// Array.of
let arr = Array.of(1, 2, 3); // [1, 2, 3]

9.2 数组操作

let arr = [1, 2, 3];

// 访问
arr[0];  // 1

// 修改
arr[0] = 10;

// 长度
arr.length; // 3

// 添加元素
arr.push(4);        // 末尾添加
arr.unshift(0);     // 开头添加

// 删除元素
arr.pop();          // 删除末尾
arr.shift();        // 删除开头
arr.splice(1, 1);   // 删除指定位置

9.3 数组方法

let arr = [1, 2, 3, 4, 5];

// forEach：遍历
arr.forEach(item => console.log(item));

// map：映射
let doubled = arr.map(x => x * 2); // [2, 4, 6, 8, 10]

// filter：过滤
let evens = arr.filter(x => x % 2 === 0); // [2, 4]

// reduce：归约
let sum = arr.reduce((acc, x) => acc + x, 0); // 15

// find：查找
let found = arr.find(x => x > 3); // 4

// findIndex：查找索引
let index = arr.findIndex(x => x > 3); // 3

// some：是否有满足条件的
arr.some(x => x > 4); // true

// every：是否都满足条件
arr.every(x => x > 0); // true

// includes：是否包含
arr.includes(3); // true

// sort：排序
arr.sort((a, b) => b - a); // [5, 4, 3, 2, 1]

// reverse：反转
arr.reverse();

// slice：切片（不修改原数组）
arr.slice(1, 3); // [2, 3]

// splice：修改数组
arr.splice(1, 2, 10, 20); // 删除 2 个，插入 10, 20

9.4 数组解构

let arr = [1, 2, 3];

// 解构赋值
let [a, b, c] = arr;
console.log(a, b, c); // 1 2 3

// 跳过元素
let [a, , c] = arr;

// 默认值
let [a, b, c, d = 4] = arr;

// 剩余元素
let [a, ...rest] = arr; // rest = [2, 3]

---

十、字符串

10.1 字符串操作

let str = "Hello World";

// 长度
str.length; // 11

// 访问字符
str[0];     // "H"
str.charAt(0); // "H"

// 查找
str.indexOf("World");    // 6
str.lastIndexOf("l");     // 9
str.includes("World");   // true
str.startsWith("Hello"); // true
str.endsWith("World");   // true

// 截取
str.slice(0, 5);     // "Hello"
str.substring(0, 5); // "Hello"
str.substr(0, 5);    // "Hello" (已废弃)

// 替换
str.replace("World", "JavaScript"); // "Hello JavaScript"
str.replaceAll("l", "L"); // "HeLLo WorLd"

// 大小写
str.toUpperCase(); // "HELLO WORLD"
str.toLowerCase(); // "hello world"

// 分割
str.split(" "); // ["Hello", "World"]

// 去除空白
"  hello  ".trim();      // "hello"
"  hello  ".trimStart(); // "hello  "
"  hello  ".trimEnd();    // "  hello"

10.2 模板字符串

let name = "zhangsan";
let age = 25;

// 模板字符串
let message = `Hello, ${name}, age ${age}`;

// 多行
let multiLine = `
  第一行
  第二行
  第三行
`;

// 表达式
let result = `1 + 1 = ${1 + 1}`; // "1 + 1 = 2"

---

十一、日期和时间

11.1 Date 对象

// 创建日期
let now = new Date();
let date1 = new Date(2024, 0, 26); // 2024年1月26日
let date2 = new Date("2024-01-26");
let date3 = new Date(1706284800000); // 时间戳

// 获取日期组件
now.getFullYear();  // 2024
now.getMonth();     // 0-11
now.getDate();      // 1-31
now.getDay();       // 0-6 (星期)
now.getHours();     // 0-23
now.getMinutes();   // 0-59
now.getSeconds();   // 0-59
now.getTime();      // 时间戳

// 设置日期
now.setFullYear(2025);
now.setMonth(5);
now.setDate(15);

11.2 日期格式化

let date = new Date();

// 转字符串
date.toString();        // "Fri Jan 26 2024 12:00:00 GMT+0800"
date.toDateString();    // "Fri Jan 26 2024"
date.toTimeString();    // "12:00:00 GMT+0800"
date.toISOString();     // "2024-01-26T04:00:00.000Z"
date.toLocaleString();  // "2024/1/26 12:00:00"

---

十二、DOM 操作

12.1 选择元素

// 单个元素
document.getElementById("id");
document.querySelector(".class");
document.querySelector("#id");

// 多个元素
document.getElementsByClassName("class");
document.getElementsByTagName("div");
document.querySelectorAll(".class");

12.2 修改元素

let element = document.querySelector(".element");

// 内容
element.textContent = "新文本";
element.innerHTML = "<strong>HTML</strong>";

// 属性
element.setAttribute("id", "newId");
element.getAttribute("id");
element.removeAttribute("id");

// 类名
element.className = "new-class";
element.classList.add("class");
element.classList.remove("class");
element.classList.toggle("class");
element.classList.contains("class");

12.3 创建和插入元素

// 创建元素
let div = document.createElement("div");
div.textContent = "新元素";

// 插入元素
parent.appendChild(div);        // 末尾
parent.insertBefore(div, ref);  // 指定位置
parent.insertAdjacentHTML("beforeend", "<p>新段落</p>");

// 删除元素
parent.removeChild(div);
div.remove();

---

十三、事件处理

13.1 事件监听

// addEventListener
element.addEventListener("click", function(event) {
  console.log("点击了");
});

// 移除监听
element.removeEventListener("click", handler);

// 内联事件（不推荐）
// <button onclick="handleClick()">点击</button>

13.2 事件对象

element.addEventListener("click", function(event) {
  event.preventDefault();  // 阻止默认行为
  event.stopPropagation(); // 阻止冒泡
  event.target;            // 触发事件的元素
  event.currentTarget;     // 绑定事件的元素
  event.type;              // 事件类型
});

13.3 事件委托

// 在父元素上监听，利用事件冒泡
parent.addEventListener("click", function(event) {
  if (event.target.classList.contains("item")) {
    console.log("点击了 item");
  }
});

---

十四、异步编程

14.1 回调函数

function fetchData(callback) {
  setTimeout(() => {
    callback("数据");
  }, 1000);
}

fetchData(function(data) {
  console.log(data);
});

14.2 Promise

// 创建 Promise
let promise = new Promise((resolve, reject) => {
  if (success) {
    resolve("成功");
  } else {
    reject("失败");
  }
});

// 使用 Promise
promise
  .then(result => {
    console.log(result);
    return "新数据";
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  })
  .finally(() => {
    console.log("完成");
  });

// Promise.all
Promise.all([promise1, promise2])
  .then(results => {
    console.log(results);
  });

// Promise.race
Promise.race([promise1, promise2])
  .then(result => {
    console.log(result);
  });

14.3 async/await

async function fetchData() {
  try {
    let response = await fetch("/api/data");
    let data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

// 使用
fetchData().then(data => {
  console.log(data);
});

14.4 定时器

// setTimeout：延迟执行
setTimeout(() => {
  console.log("1秒后执行");
}, 1000);

// setInterval：定时执行
let timer = setInterval(() => {
  console.log("每秒执行");
}, 1000);

// 清除定时器
clearTimeout(timer);
clearInterval(timer);

---

十五、ES6+ 新特性

15.1 let 和 const

// 块级作用域
{
  let x = 1;
  const y = 2;
}
// x 和 y 在这里不可访问

15.2 箭头函数

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

// this 绑定
let obj = {
  name: "zhangsan",
  greet: function() {
    setTimeout(() => {
      console.log(this.name); // this 指向 obj
    }, 1000);
  }
};

15.3 解构赋值

// 数组解构
let [a, b] = [1, 2];

// 对象解构
let { name, age } = { name: "zhangsan", age: 25 };

// 函数参数解构
function greet({ name, age }) {
  console.log(name, age);
}

15.4 扩展运算符

// 数组展开
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];

// 对象展开
let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 };

// 函数参数
function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}

15.5 模板字符串

let name = "zhangsan";
let message = `Hello, ${name}`;

15.6 类和继承

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  greet() {
    return `Hello, ${this.name}`;
  }
  
  static create(name) {
    return new Person(name, 0);
  }
}

class Student extends Person {
  constructor(name, age, school) {
    super(name, age);
    this.school = school;
  }
  
  study() {
    return `${this.name} is studying`;
  }
}

15.7 模块化

// 导出
export const name = "zhangsan";
export function greet() {
  return "Hello";
}
export default class Person {}

// 导入
import Person, { name, greet } from "./module.js";

---

十六、常用 API

16.1 JSON

// 对象转 JSON
let obj = { name: "zhangsan", age: 25 };
let json = JSON.stringify(obj);

// JSON 转对象
let obj2 = JSON.parse(json);

// 格式化
JSON.stringify(obj, null, 2);

16.2 数组方法（补充）

// flat：扁平化
[1, [2, 3]].flat(); // [1, 2, 3]

// flatMap：映射后扁平化
[1, 2, 3].flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]

// fill：填充
new Array(3).fill(0); // [0, 0, 0]

16.3 对象方法

// Object.assign：合并对象
Object.assign({}, obj1, obj2);

// Object.keys/values/entries
Object.keys(obj);
Object.values(obj);
Object.entries(obj);

// Object.freeze：冻结对象
Object.freeze(obj);

// Object.seal：密封对象
Object.seal(obj);

---

十七、错误处理

17.1 try-catch

try {
  // 可能出错的代码
  let result = riskyOperation();
} catch (error) {
  // 处理错误
  console.error(error.message);
} finally {
  // 无论是否出错都执行
  console.log("完成");
}

17.2 错误类型

// 抛出错误
throw new Error("错误信息");
throw new TypeError("类型错误");
throw new ReferenceError("引用错误");

// 自定义错误
class CustomError extends Error {
  constructor(message) {
    super(message);
    this.name = "CustomError";
  }
}

---

十八、最佳实践

18.1 代码规范

// ✅ 使用 const/let，避免 var
const name = "zhangsan";
let count = 0;

// ✅ 使用严格相等
if (x === 10) { }

// ✅ 使用箭头函数
const add = (a, b) => a + b;

// ✅ 使用模板字符串
const message = `Hello, ${name}`;

// ✅ 使用解构
const { name, age } = user;

18.2 性能优化

// 避免全局变量
(function() {
  let local = "local";
})();

// 缓存 DOM 查询
const element = document.getElementById("id");

// 使用事件委托
parent.addEventListener("click", handleClick);

// 避免在循环中创建函数
for (let i = 0; i < arr.length; i++) {
  // 使用 let，不是 var
}

---

十九、推荐资源

官方文档：

• MDN Web Docs：developer.mozilla.org/zh-CN/docs/…
• ECMAScript 规范：tc39.es/ecma262/

学习资源：

• 《JavaScript 高级程序设计》
• 《你不知道的 JavaScript》
• JavaScript 教程：www.runoob.com/js/js-tutor…
• JavaScript.info：zh.javascript.info/

---

二十、总结

JavaScript 核心要点：

基础语法 + 数据类型 + 函数 + 对象 + 异步编程 = 强大前端开发

核心心法：

JavaScript 是动态语言，理解作用域和 this 是关键。 掌握异步编程是 JavaScript 开发的核心技能。

---

📝 文档信息

• 作者: 阿鑫
• 更新日期: 2026.1