探索 JavaScript 中的数组和对象-js教程-PHP中文网

Exploring Arrays and Objects in JavaScript

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

日期：2024 年 12 月 13 日

欢迎来到 JavaScript 之旅的第六天！今天，我们深入研究 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：返回键值对数组。

示例：

// 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]

登录后复制

7.数组与对象

功能数组对象标题>

Feature	Arrays	Objects
Storage	Ordered collection of items.	Unordered collection of key-value pairs.
Access	Index-based (arr[0]).	Key-based (obj.key).
Best Use Case	List of related items.	Grouping attributes of an entity.

存储已订购的物品集合。键值对的无序集合。

访问

基于索引（arr[0]）。基于键（obj.key）。 最佳用例 相关项目列表。对实体的属性进行分组。表>

8.现实世界的例子

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]

登录后复制

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

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

登录后复制

示例 2：使用对象表示人

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

登录后复制

示例 3：组合数组和对象

9.要点
数组
对象

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

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

对数字数组使用映射和过滤器来获取偶数的平方。

后续步骤

在

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

以上是探索 JavaScript 中的数组和对象的详细内容。更多信息请关注PHP中文网其他相关文章！