探索 JavaScript 中的数组和对象

第六天：探索 JavaScript 中的数组和对象

**日期：2024 年 12 月 13 日**

欢迎来到 JavaScript 之旅的第 6 天！今天，我们将深入研究 JavaScript 中的两个基本数据结构：**数组** 和 **对象**。这些结构构成了现代 Web 开发中数据操作的支柱。通过掌握数组和对象，您将解锁有效存储、访问和转换数据的强大方法。

1.什么是数组？

**数组** 是存储在连续内存位置的项目（称为元素）的集合。在 JavaScript 中，数组用途广泛，可以容纳混合数据类型。

创建数组

// Empty array
let emptyArray = [];

// Array with initial elements
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]

// Mixed data types
let mixedArray = [42, "Hello", true];
console.log(mixedArray); // Output: [42, "Hello", true]

2. 操作数组

添加和删除元素

push：将元素添加至末尾。

pop：删除最后一个元素。

unshift：将元素添加至开头。

shift：移除第一个元素。

**例子：**

let numbers = [1, 2, 3];
numbers.push(4); // Adds 4 to the end
console.log(numbers); // Output: [1, 2, 3, 4]

numbers.pop(); // Removes the last element
console.log(numbers); // Output: [1, 2, 3]

numbers.unshift(0); // Adds 0 to the beginning
console.log(numbers); // Output: [0, 1, 2, 3]

numbers.shift(); // Removes the first element
console.log(numbers); // Output: [1, 2, 3]

3. 常用数组方法

map：转换数组中的每个元素。

let nums = [1, 2, 3, 4];
let squares = nums.map(num => num * num);
console.log(squares); // Output: [1, 4, 9, 16]

filter：根据条件过滤元素。

let ages = [12, 18, 22, 16];
let adults = ages.filter(age => age >= 18);
console.log(adults); // Output: [18, 22]

Reduce：将数组缩减为单个值。

let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 10

4.什么是对象？

**对象** 是属性的集合，其中每个属性都是一个键值对。对象非常适合表示具有属性的现实世界实体。

创建对象

let person = {
  name: "Arjun",
  age: 22,
  isStudent: true,
};
console.log(person.name); // Output: Arjun
console.log(person["age"]); // Output: 22

5. 操纵物体

添加和更新属性

let car = {
  brand: "Tesla",
};
car.model = "Model 3"; // Adding a new property
car.brand = "Ford";    // Updating a property
console.log(car); // Output: { brand: "Ford", model: "Model 3" }

删除属性

delete car.model;
console.log(car); // Output: { brand: "Ford" }

6. 常用对象方法

迭代对象

Object.keys：返回一个键数组。

Object.values：返回一个值数组。

Object.entries：返回一个键值对数组。

**例子：**

let student = { name: "Arjun", grade: "A", age: 20 };

console.log(Object.keys(student));   // Output: ["name", "grade", "age"]
console.log(Object.values(student)); // Output: ["Arjun", "A", 20]
console.log(Object.entries(student)); // Output: [["name", "Arjun"], ["grade", "A"], ["age", 20]]

7. 数组与对象

8. 现实世界的例子

示例 1：使用数组的待办事项列表

let tasks = ["Learn JavaScript", "Write an article", "Create a project"];
tasks.push("Read a book");
console.log(tasks); // Output: ["Learn JavaScript", "Write an article", "Create a project", "Read a book"]

示例 2：使用对象表示人

let employee = {
  name: "Arjun",
  position: "Software Engineer",
  salary: 70000,
};
console.log(`${employee.name} is a ${employee.position}`); 
// Output: Arjun is a Software Engineer

示例 3：组合数组和对象

let library = [
  { title: "1984", author: "George Orwell" },
  { title: "To Kill a Mockingbird", author: "Harper Lee" },
];

library.forEach(book => console.log(`${book.title} by ${book.author}`));
/*
Output:
1984 by George Orwell
To Kill a Mockingbird by Harper Lee
*/

9. 关键要点

数组：用于有序集合；利用 map、filter 和 Reduce 等方法实现强大的转换。

对象：用于具有键值对的结构化数据；掌握 Object.keys 和 Object.values 等方法。

综合力量：混合数组和对象来建模和操作复杂数据。

第六天的练习

创建您最喜欢的电影的数组并动态添加/删除项目。

创建一个对象来表示一本书，该对象具有书名、作者和年份等属性。添加一个方法来记录书籍详细信息。

对数字数组使用 map 和 filter 来获取偶数的平方。

下一步

在**第 7 天**，我们将重点关注**事件和 DOM** — 为您的 Web 应用程序带来交互性。明天见！

CLIS.CC