JavaScript基础
介绍
JavaScript是一种高级、解释型、动态类型的编程语言，主要用于Web前端开发，也可用于后端开发(Node.js)。它是Web的三大核心技术(HTML、CSS、JavaScript)之一，用于实现网页的交互性和动态效果。
原理
JavaScript的工作原理：
- JavaScript代码由浏览器的JavaScript引擎(如V8)解析和执行
- 代码执行过程包括词法分析、语法分析、生成AST(抽象语法树)、代码生成和执行
- JavaScript是单线程的，使用事件循环(Event Loop)处理异步操作
- 变量声明使用var、let、const关键字，具有不同的作用域和提升行为
- 数据类型包括原始类型(Number、String、Boolean、Null、Undefined、Symbol、BigInt)和引用类型(Object)
- 函数是一等公民，可以作为参数传递、返回值和赋值给变量
图示
// JavaScript基础语法示例 - 涵盖变量声明、数据类型、条件语句、循环和函数
// 变量声明
// var关键字声明的变量：函数作用域，存在变量提升
var a = 10;
// let关键字声明的变量：块级作用域，无变量提升
let b = 20;
// const关键字声明的常量：块级作用域，不可重新赋值
const c = 30;
// 数据类型 - JavaScript有7种原始类型和引用类型
let num = 100; // 数字类型：用于表示数值
let str = "Hello"; // 字符串类型：用于表示文本
let bool = true; // 布尔类型：用于表示真/假值
let obj = {name: "John", age: 30}; // 对象类型：用于存储键值对集合
let arr = [1, 2, 3, 4]; // 数组类型：用于存储有序集合
let func = function() { console.log("Hello"); }; // 函数类型：可执行代码块
// 条件语句 - 根据条件执行不同代码块
if (num > 50) {
console.log("大于50"); // 如果num大于50，执行此代码块
} else if (num < 50) {
console.log("小于50"); // 如果num小于50，执行此代码块
} else {
console.log("等于50"); // 如果num等于50，执行此代码块
}
// 循环语句 - 重复执行代码块
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]); // 打印数组中的每个元素
}
// 函数定义 - 命名函数
// @param {number} a - 第一个数字参数
// @param {number} b - 第二个数字参数
// @returns {number} - 两个参数的和
function add(a, b) {
return a + b;
}
// 箭头函数 - ES6引入的简洁函数语法
// @param {number} a - 第一个数字参数
// @param {number} b - 第二个数字参数
// @returns {number} - 两个参数的乘积
const multiply = (a, b) => a * b;
实例
JavaScript基础示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript基础示例</title>
</head>
<body>
<h1>JavaScript基础示例</h1>
<button id="btn">点击我</button>
<p id="output"></p>
<ul id="list"></ul>
<script>
// 变量声明 - 获取DOM元素和初始化计数器
const btn = document.getElementById('btn'); // 按钮元素
const output = document.getElementById('output'); // 输出结果的p元素
const list = document.getElementById('list'); // 列表元素
let counter = 0; // 点击计数器
// 事件监听 - 为按钮添加点击事件处理程序
btn.addEventListener('click', function() {
counter++; // 增加计数器
output.textContent = `点击次数: ${counter}`; // 更新输出内容
updateList(); // 调用更新列表函数
});
// 函数定义 - 更新列表内容
// 根据当前计数器的值创建对应数量的列表项
function updateList() {
// 清空列表
list.innerHTML = '';
// 创建新列表项 - 循环创建li元素
for (let i = 1; i <= counter; i++) {
const li = document.createElement('li'); // 创建列表项
li.textContent = `项目 ${i}`; // 设置列表项文本
list.appendChild(li); // 将列表项添加到列表中
}
}
// 数组操作 - 创建水果数组
const fruits = ['苹果', '香蕉', '橙子', '葡萄'];
console.log('水果列表:', fruits);
// 数组方法 - map()：将每个元素转换为大写
const upperFruits = fruits.map(fruit => fruit.toUpperCase());
console.log('大写水果:', upperFruits);
// 数组方法 - filter()：筛选长度大于2的元素
const longFruits = fruits.filter(fruit => fruit.length > 2);
console.log('长度大于2的水果:', longFruits);
// 对象 - 创建包含个人信息的对象
const person = {
name: '张三', // 姓名
age: 25, // 年龄
// 方法：打招呼
greet: function() {
return `你好，我是${this.name}，今年${this.age}岁。`;
}
};
console.log(person.greet()); // 调用greet方法
</script>
</body>
</html>
专业解决方案
变量作用域
- 全局作用域：在任何地方都能访问的变量
- 函数作用域：仅在函数内部能访问的变量
- 块级作用域：使用let和const声明的变量，仅在块()内部能访问
- 变量提升：var声明的变量会被提升到作用域顶部
- 闭包：函数能够访问其词法作用域之外的变量
数据类型操作
- 类型转换：隐式转换和显式转换(Number(), String(), Boolean())
- 数组方法：map(), filter(), reduce(), forEach(), find(), includes()
- 对象操作：Object.keys(), Object.values(), Object.entries()
- 字符串方法：split(), join(), replace(), substring(), toUpperCase()
异步编程
- 回调函数：作为参数传递的函数，在异步操作完成后调用
- Promise：表示异步操作的最终完成(或失败)及其结果值
- async/await：基于Promise的语法糖，使异步代码更易于阅读和编写
- 事件循环：JavaScript处理异步操作的机制
最佳实践
- 始终使用strict模式('use strict')：启用更严格的错误检查
- 优先使用let和const，避免使用var：减少作用域问题
- 保持函数简洁，遵循单一责任原则：每个函数只做一件事
- 使用箭头函数简化回调函数：使代码更简洁，避免this绑定问题
- 避免全局变量污染，使用模块化开发：封装代码，减少命名冲突
- 为变量和函数使用语义化的名称：提高代码可读性
- 添加适当的注释：解释代码意图，便于维护
- 处理错误，使用try/catch语句：增强代码健壮性
工具推荐
- ESLint：代码检查工具，确保代码风格一致性
- Prettier：代码格式化工具
- Babel：JavaScript编译器，使新特性兼容旧浏览器
- Webpack：模块打包工具
- Chrome DevTools：JavaScript调试工具
- Jest：JavaScript测试框架