JavaScript 基础

JavaScript 基础

JavaScript 是一种轻量级的编程语言，通常用于创建交互式的网页。作为一种解释型语言，JavaScript 可以在浏览器中直接运行，而无需编译。本文将介绍 JavaScript 的基本概念和语法，帮助初学者快速入门。

目录

1. 什么是 JavaScript
2. JavaScript 基本语法
   1. 变量与常量
   2. 数据类型
   3. 运算符
3. 控制结构
   1. 条件语句
   2. 循环语句
4. 函数
5. 对象与数组
   1. 对象
   2. 数组
6. DOM 操作
7. 事件处理
8. JavaScript 中的异步编程
   1. 回调函数
   2. Promise
   3. async/await
9. 模块化
10. 调试与测试

什么是 JavaScript

JavaScript 是一种高层次、动态、弱类型的编程语言，最初由 Netscape 公司在 1995 年开发，用于网页的客户端脚本编程。如今，它已经成为 Web 开发的三大支柱之一，另外两种是 HTML 和 CSS。JavaScript 可以嵌入 HTML 页面，用于添加动态行为。

JavaScript 基本语法

变量与常量

在 JavaScript 中，可以使用 var、let 和 const 来声明变量和常量。

var a = 10; // 使用 var 声明变量
let b = 20; // 使用 let 声明变量
const c = 30; // 使用 const 声明常量

• var 有函数作用域，会有变量提升现象。
• let 和 const 有块级作用域，没有变量提升，const 声明的变量不能重新赋值。

数据类型

JavaScript 支持多种数据类型，包括原始类型和对象类型。

• 原始类型：string、number、boolean、null、undefined、symbol、bigint
• 对象类型：对象（Object）、数组（Array）、函数（Function）等

let str = "Hello, world!"; // 字符串
let num = 42; // 数字
let isTrue = true; // 布尔值
let obj = { name: "John", age: 30 }; // 对象
let arr = [1, 2, 3]; // 数组

运算符

JavaScript 支持多种运算符，包括算术运算符、赋值运算符、比较运算符和逻辑运算符。

let x = 5;
let y = 10;

let sum = x + y; // 算术运算符
let isEqual = x === y; // 比较运算符
let logicalAnd = x > 0 && y > 0; // 逻辑运算符

控制结构

条件语句

条件语句用于根据不同的条件执行不同的代码。JavaScript 支持 if、else if 和 else 语句。

let a = 10;

if (a > 0) {
    console.log("a 是正数");
} else if (a < 0) {
    console.log("a 是负数");
} else {
    console.log("a 是零");
}

循环语句

循环语句用于重复执行代码块。JavaScript 支持 for、while 和 do...while 循环。

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

let j = 0;
while (j < 5) {
    console.log(j);
    j++;
}

函数

函数是可以重复使用的代码块。JavaScript 支持声明函数和表达式函数。

// 声明函数
function add(a, b) {
    return a + b;
}

// 表达式函数
let multiply = function(a, b) {
    return a * b;
};

console.log(add(2, 3)); // 5
console.log(multiply(2, 3)); // 6

对象与数组

对象

对象是 JavaScript 中的基本数据类型之一，用于存储键值对。

let person = {
    name: "John",
    age: 30,
    greet: function() {
        console.log("Hello, " + this.name);
    }
};

console.log(person.name); // John
person.greet(); // Hello, John

数组

数组是 JavaScript 中的另一个基本数据类型，用于存储有序的元素集合。

let numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]); // 1

numbers.push(6); // 添加元素
console.log(numbers.length); // 6

DOM 操作

Document Object Model (DOM) 是 JavaScript 与 HTML 交互的接口。通过 DOM，可以动态地访问和操作网页内容。

let element = document.getElementById("myElement"); // 获取元素
element.innerHTML = "Hello, world!"; // 修改元素内容

let newElement = document.createElement("div"); // 创建新元素
newElement.textContent = "New element";
document.body.appendChild(newElement); // 添加新元素到文档

事件处理

事件处理是 JavaScript 中的一个重要概念，用于响应用户的操作，如点击、输入等。

let button = document.getElementById("myButton");
button.addEventListener("click", function() {
    alert("Button clicked!");
});

JavaScript 中的异步编程

回调函数

回调函数是一种常见的异步编程模式，用于在操作完成后执行某些代码。

function fetchData(callback) {
    setTimeout(function() {
        callback("Data fetched");
    }, 1000);
}

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

Promise

Promise 是一种更现代的异步编程方式，提供了更好的错误处理和链式调用。

let promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
        resolve("Promise resolved");
    }, 1000);
});

promise.then(function(data) {
    console.log(data);
}).catch(function(error) {
    console.error(error);
});

async/await

async 和 await 是基于 Promise 的语法糖，使异步代码看起来像同步代码。

async function fetchData() {
    let data = await new Promise(function(resolve) {
        setTimeout(function() {
            resolve("Data fetched with async/await");
        }, 1000);
    });
    console.log(data);
}

fetchData();

模块化

模块化使得代码更加结构化和可维护。JavaScript 支持 ES6 模块和 CommonJS 模块。

// 导出模块（export.js）
export function greet() {
    console.log("Hello, world!");
}

// 导入模块（import.js）
import { greet } from './export.js';
greet(); // Hello, world!

调试与测试

调试和测试是确保代码质量的重要步骤。JavaScript 提供了多种调试工具和测试框架。

调试

浏览器开发者工具（如 Chrome DevTools）提供了强大的调试功能。

// 添加断点
debugger;

console.log("Debugging...");

测试

可以使用 Jasmine、Mocha 等测试框架来编写和运行测试。

// 使用 Mocha 和 Chai
const { expect } = require('chai');

describe('Array', function() {
    it('should return -1 when the value is not present', function() {
        expect([1, 2, 3].indexOf(4)).to.equal(-1);
    });
});

通过以上内容的学习，读者应该对 JavaScript 的基础知识有了初步了解。随着实践和深入学习，可以进一步掌握 JavaScript 的高级特性和应用技巧。