编程笔记

编程笔记

[JavaScript] 数组与对象详解
2025-01-29


文章目录

  • 数组(Array)
    • 什么是数组
    • 数组的常用操作
        • **访问数组元素**
        • **修改数组元素**
        • **数组的长度**
        • **添加和删除元素**
    • 常用数组方法
        • `map()`:
        • `filter()`:
        • `reduce()`:
        • **其他实用方法**
  • 对象(Object)
    • 什么是对象
    • 对象的基本操作
        • **访问属性**
        • **添加或修改属性**
        • **删除属性**
        • **检查属性是否存在**
    • 遍历对象
  • 数组与对象在实际开发中的应用
    • 操作用户数据(数组和对象结合)
    • 计数操作
  • 与其他语言(如C++)的区别

数组和对象是 JavaScript 中的核心数据结构,频繁应用于日常开发中。为了让知识点更详细,并强调实用性,我将按以下顺序进行讲解:数组和对象的 基础操作常用方法高级技巧,以及在实际开发中的 典型应用场景


数组(Array)

什么是数组

数组是一个有序的元素集合,可以存储多种数据类型(数字、字符串、对象等)。

创建数组的方式

// 方式1:字面量
const arr1 = [1, 2, 3, 4];

// 方式2:使用Array构造函数
const arr2 = new Array(5); // 创建一个长度为5的空数组
const arr3 = new Array(1, 2, 3); // 创建包含具体元素的数组

数组的常用操作

访问数组元素

通过索引访问元素(从 0 开始计数)。

const arr = [10, 20, 30];
console.log(arr[0]); // 输出 10
修改数组元素
arr[1] = 25; // 修改索引为 1 的元素
console.log(arr); // 输出 [10, 25, 30]
数组的长度

length 属性表示数组的长度。

const arr = [1, 2, 3];
console.log(arr.length); // 输出 3
添加和删除元素
  • push:向数组末尾添加元素。
  • pop:移除数组末尾的元素。
  • unshift:在数组开头添加元素。
  • shift:移除数组开头的元素。
const arr = [1, 2, 3];
arr.push(4);        // [1, 2, 3, 4]
arr.pop();          // [1, 2, 3]
arr.unshift(0);     // [0, 1, 2, 3]
arr.shift();        // [1, 2, 3]

常用数组方法

map():

用于对数组中的每个元素执行指定的操作,并返回一个新数组。

示例

const arr = [1, 2, 3];
const doubled = arr.map(x => x * 2);
console.log(doubled); // [2, 4, 6]
filter():

用于过滤数组中的元素,根据条件返回一个新数组。

示例

const arr = [1, 2, 3, 4, 5];
const evenNumbers = arr.filter(x => x % 2 === 0);
console.log(evenNumbers); // [2, 4]
reduce():

用于对数组中的所有元素进行累积操作,返回最终结果。

示例

const arr = [1, 2, 3, 4];
const sum = arr.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 输出 10
其他实用方法
  • forEach:遍历数组,执行指定操作(但不返回新数组)。
  • find:找到第一个满足条件的元素并返回。
  • includes:检查数组是否包含某个值。

对象(Object)

什么是对象

对象是键值对的集合,每个键值对称为对象的一个 属性。键是字符串或符号,值可以是任意类型。

创建对象的方式

// 方式1:对象字面量
const obj = { name: "Kevin", age: 20 };

// 方式2:构造函数
const obj2 = new Object();
obj2.name = "Kevin";
obj2.age = 20;

对象的基本操作

访问属性

通过点(.)或方括号([])访问。

const obj = { name: "Kevin", age: 20 };
console.log(obj.name);   // Kevin
console.log(obj["age"]); // 20
添加或修改属性
obj.city = "Shanghai";   // 添加新属性
obj.age = 21;            // 修改属性值
console.log(obj);        // { name: 'Kevin', age: 21, city: 'Shanghai' }
删除属性
delete obj.city;
console.log(obj); // { name: 'Kevin', age: 21 }
检查属性是否存在

使用 in 运算符。

console.log("name" in obj);  // true
console.log("city" in obj);  // false

遍历对象

  • for...in:遍历对象所有可枚举属性。
const obj = { name: "Kevin", age: 20 };
for (let key in obj) {
    console.log(key, obj[key]);
}
// 输出:
// name Kevin
// age 20
  • Object.keys():获取对象的所有键。
  • Object.values():获取对象的所有值。
  • Object.entries():获取键值对数组。
console.log(Object.keys(obj));   // ["name", "age"]
console.log(Object.values(obj)); // ["Kevin", 20]
console.log(Object.entries(obj));// [["name", "Kevin"], ["age", 20]]

数组与对象在实际开发中的应用

操作用户数据(数组和对象结合)

const users = [
    { id: 1, name: "Alice", age: 25 },
    { id: 2, name: "Bob", age: 30 },
    { id: 3, name: "Charlie", age: 35 }
];

// 找到年龄大于30的用户
const result = users.filter(user => user.age > 30);
console.log(result); // [{ id: 3, name: "Charlie", age: 35 }]

// 提取所有用户的名字
const names = users.map(user => user.name);
console.log(names); // ["Alice", "Bob", "Charlie"]

计数操作

计算数组中元素的出现次数

const fruits = ["apple", "banana", "apple", "orange", "banana", "apple"];

const count = fruits.reduce((acc, fruit) => {
    acc[fruit] = (acc[fruit] || 0) + 1;
    return acc;
}, {});

console.log(count);
// 输出:{ apple: 3, banana: 2, orange: 1 }

与其他语言(如C++)的区别

特性JavaScriptC++
数组类型可以包含多种数据类型必须为同一数据类型
动态性数组和对象可动态增加/删除元素或属性数组长度固定,动态需使用STL
内置方法提供丰富的数组方法如 map, filter, reduceSTL 中有类似算法支持