当前位置：首页 > article >正文

第三部分：进阶概念 7.数组与对象 --[JavaScript 新手村：开启编程之旅的第一步]

article 2025/1/20 21:04:01

第三部分：进阶概念 7.数组与对象 --[JavaScript 新手村：开启编程之旅的第一步]

在 JavaScript 中，数组和对象是两种非常重要的数据结构，它们用于存储和组织数据。尽管它们都属于引用类型（即它们存储的是对数据的引用而不是数据本身），但它们有着不同的特性和用途。

创建和访问数组

当然，下面是四个关于如何在 JavaScript 中创建和访问数组的示例。这些示例涵盖了不同的创建方法以及访问数组元素的方式。

示例 1: 使用数组字面量创建并访问数组

这是最简单且常用的方法来创建一个数组，并通过索引访问其元素。

// 创建一个包含水果名称的数组
const fruits = ['apple', 'banana', 'orange'];

// 访问数组中的第一个元素
console.log(fruits[0]); // 输出: apple

// 修改数组中的第二个元素
fruits[1] = 'grape';

// 打印整个数组
console.log(fruits); // 输出: ["apple", "grape", "orange"]

在这里插入图片描述

示例 2: 使用 `Array` 构造函数创建数组

你可以使用 Array 构造函数来创建数组。注意，如果只传递一个数字参数给构造函数，则会创建一个具有指定长度但未初始化的数组。

// 创建一个包含数字的数组
const numbers = new Array(1, 2, 3, 4, 5);

// 访问数组中的最后一个元素
console.log(numbers[numbers.length - 1]); // 输出: 5

// 添加新元素到数组末尾
numbers.push(6);

// 打印整个数组
console.log(numbers); // 输出: [1, 2, 3, 4, 5, 6]

在这里插入图片描述

示例 3: 使用数组方法创建和访问多维数组

有时你需要创建一个多维数组（即数组中的每个元素本身也是一个数组），这可以通过嵌套数组来实现。

// 创建一个多维数组
const matrix = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

// 访问二维数组中的特定元素
console.log(matrix[1][1]); // 输出: 5 (第二行第二列)

// 修改二维数组中的元素
matrix[0][2] = 'X';

// 打印修改后的整个数组
console.log(matrix); // 输出: [[1, 2, "X"], [4, 5, 6], [7, 8, 9]]

在这里插入图片描述

示例 4: 使用数组填充方法创建并访问大数组

JavaScript 提供了一些便捷的方法来创建大型或特定模式的数组，例如 Array.from() 和 fill() 方法。

// 使用 Array.from() 创建一个从 1 到 5 的数组
const sequence = Array.from({ length: 5 }, (_, i) => i + 1);

// 访问数组中的所有元素
console.log(sequence); // 输出: [1, 2, 3, 4, 5]

// 使用 fill() 方法创建一个填充相同值的数组
const filledArray = new Array(3).fill('same');

// 访问数组中的所有元素
console.log(filledArray); // 输出: ["same", "same", "same"]

// 使用 map() 方法创建一个基于现有数组的新数组
const doubled = sequence.map(x => x * 2);

// 打印新的数组
console.log(doubled); // 输出: [2, 4, 6, 8, 10]

在这里插入图片描述

总结

示例 1 展示了如何使用数组字面量创建数组，并通过索引访问和修改元素。
示例 2 演示了 Array 构造函数的用法，包括添加新元素。
示例 3 展现了多维数组的创建和访问方式。
示例 4 介绍了几种创建和操作大型或模式化数组的方法，如 Array.from() 和 fill()。

这些示例覆盖了 JavaScript 数组的基本创建和访问技巧，帮助你更好地理解和应用这一重要的数据结构。

数组方法概览

JavaScript 提供了丰富的数组方法，使得操作数组变得非常方便。以下是四个常见的数组方法及其使用示例，涵盖了一些最常用的功能，如遍历、查找、过滤和转换数组元素。

示例 1: 使用 `forEach` 遍历数组

forEach 方法用于对数组中的每个元素执行一次提供的函数，但不返回任何值（即返回 undefined）。

const numbers = [1, 2, 3, 4, 5];

// 使用 forEach 遍历数组并打印每个元素
numbers.forEach((number) => {
    console.log(number);
});

// 输出:
// 1
// 2
// 3
// 4
// 5

在这里插入图片描述

示例 2: 使用 `map` 创建新数组

map 方法创建一个新数组，其结果是对调用数组中的每个元素调用提供的函数后的返回值。

const numbers = [1, 2, 3, 4, 5];

// 使用 map 将每个元素乘以 2，并创建一个新的数组
const doubled = numbers.map((number) => number * 2);

console.log(doubled); // 输出: [2, 4, 6, 8, 10]

在这里插入图片描述

示例 3: 使用 `filter` 筛选数组元素

filter 方法创建一个新数组，包含所有通过测试的元素。原数组不会被改变。

const numbers = [1, 2, 3, 4, 5, 6];

// 使用 filter 找出所有偶数
const evens = numbers.filter((number) => number % 2 === 0);

console.log(evens); // 输出: [2, 4, 6]

在这里插入图片描述

示例 4: 使用 `reduce` 计算数组的总和或聚合数据

reduce 方法对数组中的每个元素（从左到右）执行一个提供的 reducer 函数，将其结果汇总为单个输出值。

const numbers = [1, 2, 3, 4, 5];

// 使用 reduce 计算数组中所有元素的总和
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // 输出: 15

// 使用 reduce 计算对象数组中特定属性的总和
const orders = [
    { id: 1, amount: 200 },
    { id: 2, amount: 450 },
    { id: 3, amount: 300 }
];

const totalAmount = orders.reduce((sum, order) => sum + order.amount, 0);

console.log(totalAmount); // 输出: 950

在这里插入图片描述

总结

forEach：遍历数组，对每个元素执行指定的操作，但不返回新数组。
map：创建一个新数组，其中包含对原始数组中每个元素应用函数后的结果。
filter：创建一个新数组，包含所有满足给定条件的元素。
reduce：将数组中的元素累积成一个单一的值，常用于求和或聚合操作。

这些方法是处理数组时最常用的工具之一，它们不仅简化了代码，还提高了可读性和效率。通过组合使用这些方法，你可以更灵活地操作和处理数组数据。

对象的创建与属性访问

在 JavaScript 中，对象是存储键值对（即属性和方法）的数据结构。它们是非常灵活且强大的工具，用于组织和操作数据。下面是四个关于如何创建对象以及访问其属性的示例。

示例 1: 使用对象字面量创建对象并访问属性

这是最简单的方法来创建一个对象，并通过点符号或方括号语法访问其属性。

// 创建一个表示人的对象
const person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 30,
    getFullName: function() {
        return `${this.firstName} ${this.lastName}`;
    }
};

// 访问对象属性
console.log(person.firstName); // 输出: John
console.log(person['lastName']); // 输出: Doe

// 调用对象方法
console.log(person.getFullName()); // 输出: John Doe

在这里插入图片描述

示例 2: 使用构造函数创建对象实例

你可以定义一个构造函数，然后使用 new 关键字来创建该构造函数的多个实例。

// 定义一个构造函数
function Person(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    this.getFullName = function() {
        return `${this.firstName} ${this.lastName}`;
    };
}

// 创建构造函数的实例
const john = new Person('John', 'Doe', 30);
const jane = new Person('Jane', 'Smith', 25);

// 访问实例属性
console.log(john.firstName); // 输出: John
console.log(jane.getFullName()); // 输出: Jane Smith

在这里插入图片描述

示例 3: 使用 `class` 语法创建对象

ES6 引入了类（class）语法，它提供了一种更简洁的方式来定义构造函数和方法。

// 定义一个类
class Person {
    constructor(firstName, lastName, age) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }

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

// 创建类的实例
const john = new Person('John', 'Doe', 30);
const jane = new Person('Jane', 'Smith', 25);

// 访问实例属性
console.log(john.firstName); // 输出: John
console.log(jane.getFullName()); // 输出: Jane Smith

在这里插入图片描述

示例 4: 使用 `Object.create` 方法创建对象

Object.create 方法允许你基于现有的对象创建新对象，并指定原型对象。这对于实现继承非常有用。

// 创建一个原型对象
const personPrototype = {
    getFullName: function() {
        return `${this.firstName} ${this.lastName}`;
    }
};

// 使用 Object.create 基于原型对象创建新对象
const john = Object.create(personPrototype);
john.firstName = 'John';
john.lastName = 'Doe';
john.age = 30;

const jane = Object.create(personPrototype);
jane.firstName = 'Jane';
jane.lastName = 'Smith';
jane.age = 25;

// 访问对象属性
console.log(john.firstName); // 输出: John
console.log(jane.getFullName()); // 输出: Jane Smith

在这里插入图片描述

总结

对象字面量：最简单的方式创建对象，适合单个对象的快速定义。
构造函数：适合需要创建多个相似对象的情况，提供了初始化参数。
class 语法：ES6 提供的更简洁、面向对象的语法，便于定义构造函数和方法。
Object.create：基于现有对象创建新对象，有助于实现原型链继承。

这些方法展示了不同情况下创建和操作 JavaScript 对象的方式，每种方法都有其适用场景和优点。根据具体需求选择合适的方法，可以使代码更加清晰和高效。

遍历对象

JavaScript 遍历对象的三种常见方法

遍历对象是指访问对象的所有属性（键值对）。JavaScript 提供了多种方式来实现这一点，下面将介绍三种常见的方法，并附带示例代码。

示例 1: 使用 `for...in` 循环遍历对象属性

for...in 循环可以遍历对象的所有可枚举属性，包括继承的属性。如果你只想遍历对象自身的属性，应该使用 hasOwnProperty() 方法进行过滤。

const person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 30,
    occupation: 'Developer'
};

// 使用 for...in 遍历对象属性
for (let key in person) {
    if (person.hasOwnProperty(key)) { // 确保只遍历自身属性
        console.log(`${key}: ${person[key]}`);
    }
}

// 输出:
// firstName: John
// lastName: Doe
// age: 30
// occupation: Developer

在这里插入图片描述

示例 2: 使用 `Object.keys()` 和 `forEach` 遍历对象键

Object.keys() 方法返回一个包含对象所有自身属性键的数组，然后你可以使用数组的方法如 forEach 来遍历这些键。

const person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 30,
    occupation: 'Developer'
};

// 使用 Object.keys() 和 forEach 遍历对象键
Object.keys(person).forEach(key => {
    console.log(`${key}: ${person[key]}`);
});

// 输出:
// firstName: John
// lastName: Doe
// age: 30
// occupation: Developer

在这里插入图片描述

示例 3: 使用 `Object.entries()` 和解构赋值遍历键值对

Object.entries() 方法返回一个给定对象自身所有 [key, value] 对的数组迭代器。结合 for...of 或 forEach 可以方便地同时获取键和值。

const person = {
    firstName: 'John',
    lastName: 'Doe',
    age: 30,
    occupation: 'Developer'
};

// 使用 Object.entries() 和解构赋值遍历键值对
for (let [key, value] of Object.entries(person)) {
    console.log(`${key}: ${value}`);
}

// 或者使用 forEach
Object.entries(person).forEach(([key, value]) => {
    console.log(`${key}: ${value}`);
});

// 输出:
// firstName: John
// lastName: Doe
// age: 30
// occupation: Developer