JavaScript自学实例手册：深入编程基础与应用

徐子贡

于 2024-08-30 09:09:53 发布

阅读量2k

点赞数 22

本文链接：https://blog.csdn.net/weixin_33431149/article/details/141759690

版权

本文还有配套的精品资源，点击获取

简介：本书是为JavaScript初学者准备的自学手册，涵盖语言基础、函数、对象、数组、事件处理、DOM操作和异步编程等核心概念，并介绍了jQuery、React、Vue.js、Angular等流行库和框架。通过实例操作，帮助读者巩固理论知识，提升编程技能，成为熟练的JavaScript开发者。

1. JavaScript基础语法介绍与实例

1.1 JavaScript概述

JavaScript是一种动态的轻量级编程语言，最初设计用于浏览器端的脚本语言，现在已经成为Web开发的核心技术之一。它具有灵活性、对象导向性以及事件驱动的特性。JavaScript被广泛应用于前端界面的交互、数据处理和服务器端(Node.js)开发，因其跨平台的特性在多个领域都扮演着重要角色。

1.2 基本语法元素

JavaScript的基本语法元素包括变量声明、数据类型、运算符、控制结构和语句等。变量通过 let 、 const 和 var 关键字声明，支持 String 、 Number 、 Boolean 、 Array 、 Object 等多种数据类型。控制结构如 if 、 for 和 switch 提供程序逻辑的决策和循环操作，而函数则是组织代码和实现复用的关键元素。

1.3 简单实例演示

下面是一个简单的JavaScript实例，演示了变量声明、函数定义和事件处理：

// 变量声明
let message = "Hello World!";

// 函数定义
function displayMessage() {
  alert(message);
}

// HTML中的按钮元素触发JavaScript函数
// <button onclick="displayMessage()">点击我</button>

上述代码定义了一个名为 displayMessage 的函数，该函数在被触发时使用 alert 弹出一个包含消息的对话框。通过一个HTML按钮的 onclick 事件属性，调用了这个函数，展示了JavaScript如何与HTML交互。

在下一章节中，我们将深入探讨JavaScript中函数的定义及其高级功能的实现，例如箭头函数和Promise的使用。这些是构建更为复杂应用程序不可或缺的工具。

2. 函数定义与高级功能实现

2.1 函数的基本概念与创建方式

2.1.1 函数声明与表达式

函数是JavaScript编程中的基石，它们是组织和封装代码的基本方式。在JavaScript中，函数可以通过不同的方式创建，最常见的是函数声明和函数表达式。

// 函数声明
function add(x, y) {
  return x + y;
}

// 函数表达式
const multiply = function(x, y) {
  return x * y;
};

函数声明和函数表达式在语法上的主要区别是函数声明有一个函数名，而函数表达式则将函数赋值给一个变量。在JavaScript的预解析阶段，函数声明会被提升到代码的顶部，这意味着无论声明出现在哪里，都可以在之前调用它。然而，函数表达式则遵循正常的代码执行顺序。

2.1.2 箭头函数与函数的默认参数

随着ES6（ECMAScript 2015）的出现，JavaScript引入了箭头函数，这为函数定义提供了更加简洁的语法。箭头函数使用 => 操作符，它使得函数表达式写起来更加简洁，并且自动绑定 this 到当前上下文。

// 箭头函数
const square = x => x * x;

// 多个参数的箭头函数
const sum = (x, y) => x + y;

// 使用花括号的箭头函数，允许返回一个对象字面量
const createPerson = (name, age) => ({ name, age });

此外，ES6还引入了函数的默认参数，允许在函数定义时给参数指定默认值。

// 默认参数
function greet(name = 'Guest') {
  console.log(`Hello, ${name}!`);
}

使用默认参数可以避免在函数体内进行复杂的参数校验和赋值操作，使代码更简洁和清晰。

2.2 函数的作用域与闭包

2.2.1 作用域链与变量提升

在JavaScript中，函数作用域是变量查找的规则。每个函数都有自己的作用域，其中声明的变量只能在函数内部访问。而作用域链是一种机制，它确保了在一个作用域中可以访问到其他作用域中的变量。

var a = 1;

function outer() {
  var b = 2;
  function inner() {
    var c = 3;
    console.log(a + b + c); // 输出6
  }
  inner();
}

outer();

变量提升（hoisting）是JavaScript作用域的另一个特性，它允许函数声明和变量声明被提升到其所在作用域的顶部。这意味着变量可以在声明之前使用。

console.log(message); // 输出undefined，而不是ReferenceError

var message = 'Hello World';

function printMessage() {
  console.log(message);
}

printMessage(); // 输出'Hello World'

2.2.2 闭包的定义和实际应用

闭包是函数和声明该函数的词法环境的组合。它们允许函数访问外部函数作用域中的变量，即使外部函数已经返回。

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

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

在上述例子中， createCounter 函数创建了一个闭包，使得 counter 函数能够访问到它被创建时所处的作用域中的 count 变量。闭包非常强大，它们在异步编程、模块化代码和私有变量管理等方面有广泛应用。

2.3 高级函数技巧

2.3.1 高阶函数与回调函数

高阶函数是那些接受函数作为参数或将函数作为输出返回的函数。在JavaScript中，高阶函数是函数式编程实践的基础。

// Array.prototype.map是一个高阶函数，它接受一个回调函数作为参数
const numbers = [1, 2, 3, 4];
const doubledNumbers = numbers.map(function(number) {
  return number * 2;
});
console.log(doubledNumbers); // 输出[2, 4, 6, 8]

回调函数是在JavaScript中处理异步操作的重要工具。它们是作为参数传递给另一个函数的函数，在那个函数中的某个时刻被调用。

// 定义一个函数，它接受一个回调函数作为参数
function processArray(arr, callback) {
  for (let i = 0; i < arr.length; i++) {
    callback(arr[i]);
  }
}

// 调用函数，并传入一个匿名函数作为回调
processArray([1, 2, 3, 4], function(num) {
  console.log(num * 2);
});

2.3.2 管理异步操作的Promise

Promise是JavaScript中管理异步操作的原生对象，它允许我们以同步的方式编写异步代码。一个Promise代表了一个未来可能会完成也可能不会完成的操作。

// 创建一个新的Promise对象
const promise = new Promise(function(resolve, reject) {
  setTimeout(() => resolve('Success!'), 2000);
});

promise
  .then(function(result) {
    console.log(result); // 输出'Success!'
  })
  .catch(function(error) {
    console.log(error);
  });

Promise有几个重要的特点，包括状态的不可逆性（一旦从pending状态变为fulfilled或rejected状态，就不会再改变），以及链式调用的能力，使得在异步操作之后执行后续步骤变得简单。

3. 对象创建与操作方法

JavaScript 中的对象是核心概念之一，它是属性的集合，属性可以包含基本值、对象或者函数。在本章节中，我们将深入探讨对象创建的不同方式，以及如何操作和利用对象的各种方法。

3.1 对象字面量与构造函数

3.1.1 对象字面量的定义和属性

在JavaScript中，对象字面量是一种通过大括号 {} 定义对象的简写方式。每个属性通常由一个键值对组成，键（key）是字符串，而值（value）可以是任何JavaScript表达式。

let person = {
  firstName: "John",
  lastName: "Doe",
  age: 30,
  hobbies: ["reading", "swimming"],
  address: {
    street: "123 Main St",
    city: "Anytown"
  }
};

在这个例子中， person 是一个对象，它包含了几个基本类型的值，一个数组（ hobbies ），以及另一个对象（ address ）作为其属性。对象字面量非常适合快速创建小型对象。

3.1.2 构造函数和原型链基础

构造函数是一种特殊的函数，用来初始化新创建的对象。JavaScript中的构造函数通常使用大写字母开头，例如 Person 。

function Person(firstName, lastName, age) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
}

Person.prototype.greet = function() {
  return `Hello, my name is ${this.firstName} ${this.lastName}`;
};

let person = new Person("Jane", "Doe", 25);
console.log(person.greet()); // "Hello, my name is Jane Doe"

在上述代码中，我们定义了一个 Person 构造函数，并给这个函数的原型（ prototype ）添加了一个方法 greet 。使用 new 关键字可以创建一个新的对象实例，该实例将继承原型上的方法。

3.2 原型继承与ES6类

3.2.1 原型链的工作原理

原型链是JavaScript实现继承的主要机制。每个对象都有一个指向其原型对象的内部链接，当尝试访问一个对象的属性时，如果在该对象上找不到该属性，那么会在其原型对象上继续查找，直到找到该属性或到达原型链的末尾。

classDiagram
      class Person {
          <<constructor>>
          firstName
          lastName
          age
      }
      class Employee {
          <<constructor>>
          title
      }
      Person "1" *-- "1" Employee : extends
      Person : +firstName
      Person : +lastName
      Person : +age
      Employee : +title
      Person ..> Object : prototype

在上面的 mermaid 流程图中， Person 类与 Employee 类通过原型链联系起来，展示了原型继承的工作原理。 Employee 类继承自 Person 类。

3.2.2 ES6类和继承

ES6 引入了一个更清晰和更简洁的语法用于定义类和创建对象。类实际上是一个函数，而类的实例化是使用 new 关键字。

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  greet() {
    return `Hello, my name is ${this.firstName} ${this.lastName}`;
  }
}

class Employee extends Person {
  constructor(firstName, lastName, title) {
    super(firstName, lastName); // call the super class constructor and pass in the parameters
    this.title = title;
  }

  describe() {
    return `${this.title} ${this.firstName} ${this.lastName}`;
  }
}

let employee = new Employee("Alex", "Smith", "Developer");
console.log(employee.describe()); // "Developer Alex Smith"

在这个例子中， Employee 类通过 extends 关键字继承 Person 类。我们调用 super 来调用父类的构造函数，然后再定义子类特有的属性和方法。

3.3 对象的操作和方法

3.3.1 遍历对象的属性

JavaScript提供了几种不同的方式来遍历对象的属性：

for...in 循环：遍历对象的可枚举属性。
Object.keys() 方法：返回一个数组，包含对象自身的所有可枚举属性的键名。
Object.getOwnPropertyNames() 方法：返回一个数组，包含对象自身的所有属性（无论是否可枚举）的键名。

for (let key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(key + ': ' + person[key]);
  }
}

console.log(Object.keys(person));
console.log(Object.getOwnPropertyNames(person));

3.3.2 对象方法的定义和使用

对象方法就是作为对象属性值的函数，可以通过 this 关键字访问对象的其他属性。

let calculator = {
  valueA: 1,
  valueB: 2,
  add: function() {
    return this.valueA + this.valueB;
  }
};

console.log(calculator.add()); // 3

对象方法可以像普通函数一样被调用，并且 this 关键字会自动指向调用它的对象。在本小节中，我们介绍了如何定义和使用对象方法，以及如何利用 JavaScript 的内置方法和 ES6 类语法来操作对象。

4. 数组处理与高级操作技术

数组是JavaScript中一个极为重要的数据结构，它允许我们在单个变量中存储多个值。数组不仅可以包含基本类型，还可以存储对象，甚至是其他数组，这为数据的组织和处理提供了极大的灵活性。本章将深入探讨JavaScript数组的处理技术和高级操作，使开发者能够更加高效地管理数据集合。

4.1 数组的基本操作

4.1.1 创建和初始化数组

在JavaScript中，创建数组有多种方式，最常见的是使用数组字面量语法：

let colors = ["red", "green", "blue"];

此外，还可以使用构造函数 Array() 来创建数组：

let numbers = new Array(1, 2, 3, 4, 5);

构造函数方式可以接受一个参数，创建一个具有指定长度的数组，也可以接受多个参数来初始化数组中的元素。需要注意的是，如果只有一个数字参数，它将被解释为数组的长度，而不是数组内容。

4.1.2 数组的常见操作方法

数组的操作方法允许我们对数组元素进行增加、删除、排序等操作。以下是一些常见的数组操作方法：

push() ：在数组的末尾添加一个或多个元素，并返回新的长度。
pop() ：移除数组的最后一个元素，并返回该元素。
shift() ：移除数组的第一个元素，并返回该元素。
unshift() ：在数组的开头添加一个或多个元素，并返回新的长度。
splice() ：可以通过删除现有元素和/或添加新元素来更改数组的内容。

这些方法使我们能够灵活地控制数组结构，实现对数组内容的快速操作。

4.2 高级数组技术

4.2.1 映射、过滤与归约操作

JavaScript数组提供了多种高级操作，其中包括映射、过滤与归约等函数式编程技术，它们在处理集合数据时非常有用。

map() ：创建一个新数组，其结果是该数组中的每个元素调用一次提供的函数后的返回值。
filter() ：创建一个新数组，包含通过所提供函数实现的测试的所有元素。
reduce() ：对数组中的每个元素执行一个由您提供的“reducer”函数（升序执行），将其结果汇总为单个返回值。

这些方法是函数式编程的核心，它们以声明性的方式提供了一种处理数组数据的强大工具。

4.2.2 数组与函数式编程

函数式编程是一种编程范式，强调使用纯函数和避免改变状态、可变数据。JavaScript数组支持很多函数式编程技术，除了映射、过滤和归约之外，还包括 forEach 、 every 、 some 等方法。

forEach() ：对数组的每个元素执行一次提供的函数。
every() ：测试数组中的所有元素是否都通过由提供的函数实现的测试。
some() ：测试数组中是否至少有一个元素满足由提供的函数实现的测试。

通过这些方法，我们可以以声明式、不可变的方式对数组进行处理，编写出简洁且易于理解的代码。

flowchart LR
    A[创建和初始化数组] --> B[常见操作方法]
    B --> C[高级数组技术]
    C --> D[映射、过滤与归约操作]
    D --> E[数组与函数式编程]

以上流程图展示了数组操作的逐步深入，从基础的操作到高级的函数式编程技术，每个阶段都是对前一个阶段的提升。

实际代码示例

接下来，我们将通过具体的代码示例来展示数组的这些高级操作。

映射（Mapping）

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);
console.log(doubled); // 输出: [2, 4, 6, 8, 10]

在上述代码中， map() 方法创建了一个新数组，其元素是原数组每个元素乘以2的结果。

过滤（Filtering）

const words = ["spray", "limit", "elite", "exuberant", "destruction", "present"];
const longWords = words.filter(word => word.length > 6);
console.log(longWords); // 输出: ["exuberant", "destruction", "present"]

这里， filter() 方法通过一个测试函数，返回了一个新数组，其中包含所有长度大于6的单词。

归约（Reducing）

const array = [1, 2, 3, 4];
const sum = array.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 输出: 10

在 reduce() 方法的例子中，我们通过累加器（ accumulator ）和当前值（ currentValue ）将数组中的所有值减少为一个单一值，这里是求和。

通过这些示例，我们可以看到数组在JavaScript中的灵活性以及强大的数据处理能力。掌握这些技术，可以帮助开发者编写出更加高效和优雅的代码。

5. 事件监听与DOM操作技巧

5.1 事件监听机制

5.1.1 事件流与事件委托

事件流描述了事件在DOM树中传播的顺序。在JavaScript中，事件传播分为三个阶段：捕获阶段、目标阶段和冒泡阶段。为了更好地理解事件流，我们可以借助浏览器提供的事件监听API来观察这一过程。

document.addEventListener('click', function(e) {
    console.log('捕获：', e.target);
}, true);

document.body.addEventListener('click', function(e) {
    console.log('目标：', e.target);
});

document.addEventListener('click', function(e) {
    console.log('冒泡：', e.target);
}, false);

在上述代码中，我们使用 addEventListener 方法添加了三个监听器，第一个为捕获阶段监听器，第三个为冒泡阶段监听器，中间的为默认的冒泡阶段监听器。在点击事件发生时，我们能够看到不同阶段的事件目标。

5.1.2 事件处理程序的绑定和解绑

事件监听器不仅可以在创建时绑定，也可以在之后随时解绑。这对于防止内存泄漏和事件监听器重复绑定等问题非常有用。

function handleEvent(e) {
    console.log('事件被触发');
}

// 绑定事件处理程序
document.body.addEventListener('click', handleEvent);

// 解绑事件处理程序
document.body.removeEventListener('click', handleEvent);

在上面的例子中，我们定义了一个 handleEvent 函数，并将它绑定到 document.body 上的 click 事件。随后，使用 removeEventListener 将相同的方法解绑。

5.2 DOM操作的深入应用

5.2.1 DOM结构的查询与遍历

DOM操作是JavaScript中不可或缺的一部分。通过查询和遍历DOM结构，我们可以对页面元素进行动态操作。

// 查询单个元素
const headerElement = document.querySelector('.header');

// 查询多个元素
const listItems = document.querySelectorAll('.list-item');

// 遍历元素列表并修改其样式
listItems.forEach(function(item) {
    item.style.color = 'blue';
});

querySelector 和 querySelectorAll 是常用的DOM查询方法，它们返回的是元素或元素的集合。对于返回的集合，我们可以使用 forEach 方法进行遍历和操作。

5.2.2 动态创建和修改DOM元素

通过JavaScript，我们可以完全控制DOM结构。动态创建和修改DOM元素是实现动态网页的重要手段。

// 创建一个新的列表项
const newItem = document.createElement('li');
newItem.textContent = '新添加的项目';

// 将新项目添加到列表中
document.querySelector('.list').appendChild(newItem);

// 修改已有元素的内容
document.querySelector('.header').textContent = '新标题';

上述代码演示了创建新元素、修改已有元素以及将其插入到文档中。通过这些方法，我们可以在运行时改变页面的结构和内容。

本文还有配套的精品资源，点击获取

徐子贡

关注

22
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
JavaScript自学实例手册：深入编程基础与应用

本文还有配套的精品资源，点击获取简介：本书是为JavaScript初学者准备的自学手册，涵盖语言基础、函数、对象、数组、事件处理、DOM操作和异步编程等核心概念，并介绍了jQuery、React、Vue.js、Angular等流行库和框架。通过实例操作，帮助读者巩固理论知识，提升编程技能，成为熟练的JavaScript开发者。 1. JavaScript基础语法介绍...
复制链接

扫一扫