JavaScript 对象与数组核心用法

4. 使用 Object.create()

const proto = { greet() { return "你好"; } };
const obj = Object.create(proto);
obj.name = "小明";

5. 使用类（ES6+）

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    return `你好，我是${this.name}`;
  }
}

三、属性的增删改查

1. 访问属性

const user = { name: "小红", age: 20, "my-email": "[email protected]" };
// 点号语法（最常用）
console.log(user.name); // "小红"
// 方括号语法（特殊属性名、动态属性名时使用）
console.log(user["age"]); // 20
console.log(user["my-email"]); // "[email protected]"
// 动态属性名
const key = "name";
console.log(user[key]); // "小红"
// 可选链操作符（ES2020）- 避免访问不存在的属性时报错
console.log(user?.address?.city); // undefined（不会报错）

2. 添加/修改属性

向对象添加新属性非常简单，只需使用赋值语句即可。如果属性不存在，将会自动创建该属性并赋予相应的值。

const car = {};
// 添加属性
car.brand = "特斯拉";
car["model"] = "Model 3";
car.year = 2023;
// 修改属性
car.year = 2024;
// 使用变量作为属性名
const propName = "color";
car[propName] = "红色";
console.log(car); // { brand: "特斯拉", model: "Model 3", year: 2024, color: "红色" }

3. 删除属性

使用 delete 运算符可以删除对象的属性。删除后，该属性将不再属于对象，访问时会返回 undefined。需要注意的是，delete 操作符仅删除对象自身的属性，如果属性是继承而来，则不会被删除。

const student = { name: "小明", age: 18, score: 95, password: "123456" };
// 删除单个属性
delete student.password; // 删除成功返回 true，属性不存在也返回 true
console.log(delete student.age); // true
console.log(student); // { name: "小明", score: 95 }

四、属性遍历和检查

1. 检查属性是否存在

const obj = { name: "测试", age: 25 };
// 使用 in 运算符
console.log("name" in obj); // true
console.log("job" in obj); // false
// 使用 hasOwnProperty（检查自身属性，不包括原型链）
console.log(obj.hasOwnProperty("name")); // true
console.log(obj.hasOwnProperty("toString")); // false（原型链上的方法）
// 直接判断是否为 undefined（不严谨，因为值可能确实是 undefined）
console.log(obj.name !== undefined); // true
console.log(obj.job !== undefined); // false

2. 遍历对象属性

const person = { name: "张三", age: 30, job: "工程师" };
// 1. for...in 循环（包括原型链上的可枚举属性）
for (let key in person) {
  console.log(key, person[key]);
}
// 2. Object.keys() - 返回自身属性的键数组
console.log(Object.keys(person)); // ["name", "age", "job"]
// 3. Object.values() - 返回自身属性的值数组
console.log(Object.values(person)); // ["张三", 30, "工程师"]
// 4. Object.entries() - 返回键值对数组
console.log(Object.entries(person)); // [["name", "张三"], ["age", 30], ["job", "工程师"]]
// 5. 遍历 entries
Object.entries(person).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

五、对象方法

对象的方法是存储在对象中的函数，用于定义对象的行为。

1. 定义方法

在对象中定义方法时，方法名后跟一个函数表达式。这样，对象就拥有了执行特定任务的能力。通过在对象中封装方法，将数据和操作数据的函数紧密结合在一起，体现了面向对象编程的思想。

let calculator = {
  add: function(a, b) {
    return a + b;
  },
  subtract: function(a, b) {
    return a - b;
  }
};
console.log(calculator.add(5, 3)); // 输出 8
console.log(calculator.subtract(5, 3)); // 输出 2

使用箭头函数定义方法

let mathUtils = {
  multiply: (a, b) => a * b,
  divide: (a, b) => a / b
};
console.log(mathUtils.multiply(4, 3)); // 输出 12
console.log(mathUtils.divide(10, 2)); // 输出 5

箭头函数提供了一种更为简洁的方法定义方式。在对象的方法中使用箭头函数时，需要注意 this 的指向问题。箭头函数中的 this 会继承其所在上下文的 this 值，这与传统函数的 this 行为有所不同。因此，在需要正确引用对象自身属性的情况下，需要谨慎使用箭头函数。

2. 常用对象方法

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
// Object.assign() - 合并对象
const merged = Object.assign({}, obj1, obj2);
console.log(merged); // { a: 1, b: 2, c: 3, d: 4 }
// Object.freeze() - 冻结对象（不能修改、添加、删除）
const frozen = Object.freeze({ name: "固定值" });
frozen.name = "新值"; // 严格模式下会报错
console.log(frozen.name); // "固定值"（没变）
// Object.seal() - 密封对象（不能添加删除，但可以修改）
const sealed = Object.seal({ count: 10 });
sealed.count = 20; // 可以修改
delete sealed.count; // 不能删除
sealed.newProp = "新"; // 不能添加

3. 属性描述符

const user = { name: "张三" };
// 获取属性描述符
const descriptor = Object.getOwnPropertyDescriptor(user, "name");
console.log(descriptor);
// {
//   value: "张三",
//   writable: true, // 是否可修改
//   enumerable: true, // 是否可枚举
//   configurable: true // 是否可配置（删除、修改属性特性）
// }
// 定义属性的元数据
Object.defineProperty(user, "age", {
  value: 25,
  writable: false, // 只读
  enumerable: false, // 不可枚举
  configurable: false // 不可配置
});
console.log(user.age); // 25
user.age = 30; // 修改无效（严格模式报错）
console.log(user.age); // 25
console.log(Object.keys(user)); // ["name"]（age 不可枚举）

六、原型和继承

// 原型链继承
const parent = { greet() { return "你好"; } };
const child = Object.create(parent);
child.name = "孩子";
console.log(child.name); // "孩子"（自身属性）
console.log(child.greet()); // "你好"（原型上的方法）
console.log(child.toString()); // 原型链上的方法
// 获取原型
console.log(Object.getPrototypeOf(child)); // parent 对象
// 检查是否是自身属性
console.log(child.hasOwnProperty("name")); // true
console.log(child.hasOwnProperty("greet")); // false

七、对象操作

1. 拷贝对象

const original = { a: 1, b: { c: 2 } };
// 浅拷贝
const shallowCopy1 = Object.assign({}, original);
const shallowCopy2 = { ...original };
// 深拷贝
const deepCopy = JSON.parse(JSON.stringify(original)); // 注意：这种方法会丢失函数、undefined、Symbol 等
// 简单深拷贝函数
function deepClone(obj) {
  if (obj === null || typeof obj !== "object") return obj;
  if (obj instanceof Date) return new Date(obj);
  if (obj instanceof Array) return obj.map(item => deepClone(item));
  const cloned = {};
  Object.keys(obj).forEach(key => {
    cloned[key] = deepClone(obj[key]);
  });
  return cloned;
}

2. 计算属性名

const key = "dynamicKey";
const value = "动态值";
const obj = {
  [key]: value, // 计算属性名
  [`${key}2`]: "另一个值",
  [1 + 2]: "三" // 属性名可以是表达式
};
console.log(obj); // { dynamicKey: "动态值", dynamicKey2: "另一个值", 3: "三" }

3. 方法简写

const oldStyle = {
  name: "老方式",
  sayHi: function() {
    return "Hi";
  }
};
const newStyle = {
  name: "新方式",
  sayHi() { // 方法简写
    return "Hi";
  },
  // 生成器函数简写
  *generator() {
    yield 1;
    yield 2;
  }
};

数组

一、数组基础概念

数组是 JavaScript 中用于存储有序集合的特殊对象。可以包含任意类型的元素。

二、创建数组

1. 数组字面量（最常用）

const arr1 = [1, 2, 3, 4, 5];
const arr2 = []; // 空数组
const arr3 = [1, "two", true, null, undefined, { name: "对象" }];

2. 使用 Array 构造函数

const arr1 = new Array(); // []
const arr2 = new Array(5); // [empty × 5] 长度为 5 的空数组
const arr3 = new Array(1, 2, 3); // [1, 2, 3]
// 注意陷阱
const arr4 = new Array(3); // [empty × 3] - 长度为 3 的空数组
const arr5 = [3]; // [3] - 包含一个元素 3 的数组

3. 使用 Array.of() (ES6)

const arr1 = Array.of(5); // [5] - 解决了构造函数的歧义
const arr2 = Array.of(1, 2, 3); // [1, 2, 3]

4. 使用 Array.from() (ES6)

// 从类数组对象创建
const str = "hello";
const arr1 = Array.from(str); // ["h", "e", "l", "l", "o"]
// 从 Set 创建
const set = new Set([1, 2, 3]);
const arr2 = Array.from(set); // [1, 2, 3]
// 使用映射函数
const arr3 = Array.from([1, 2, 3], x => x * 2); // [2, 4, 6]
// 创建指定范围的数组
const range = Array.from({ length: 5 }, (_, i) => i + 1); // [1, 2, 3, 4, 5]

三、数组的基本操作

1. 访问和修改元素

const arr = ["a", "b", "c", "d"];
// 访问元素
console.log(arr[0]); // "a" - 第一个元素
console.log(arr[arr.length - 1]); // "d" - 最后一个元素
console.log(arr[10]); // undefined - 索引不存在
// 修改元素
arr[1] = "x";
console.log(arr); // ["a", "x", "c", "d"]
// 添加元素到任意位置
arr[4] = "e";
console.log(arr); // ["a", "x", "c", "d", "e"]
arr[10] = "z";
console.log(arr); // ["a", "x", "c", "d", "e", empty × 5, "z"]

2. length 属性

const arr = [1, 2, 3, 4];
console.log(arr.length); // 4
// 截断数组
arr.length = 2;
console.log(arr); // [1, 2]
// 清空数组
arr.length = 0;
console.log(arr); // []
// 增加长度（会创建空位）
arr.length = 5;
console.log(arr); // [empty × 5]

四、数组的遍历方法

1. 传统 for 循环

const arr = ["a", "b", "c"];
// 基本 for 循环
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
// 反向遍历
for (let i = arr.length - 1; i >= 0; i--) {
  console.log(arr[i]);
}

2. for...of 循环 (ES6)

const arr = ["a", "b", "c"];
for (const item of arr) {
  console.log(item);
}
// 同时获取索引和值
for (const [index, value] of arr.entries()) {
  console.log(index, value);
}

3. for...in 循环（不推荐用于数组）

const arr = ["a", "b", "c"];
// 遍历索引（包括自定义属性）
for (const index in arr) {
  console.log(index, arr[index]);
}

4. 数组内置遍历方法

const arr = [1, 2, 3, 4, 5];
// forEach - 遍历每个元素
arr.forEach((item, index, array) => {
  console.log(`索引${index}: ${item}`);
});
// map - 映射为新数组
const doubled = arr.map(item => item * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
// filter - 过滤元素
const evens = arr.filter(item => item % 2 === 0);
console.log(evens); // [2, 4]
// reduce - 累积计算
const sum = arr.reduce((acc, item) => acc + item, 0);
console.log(sum); // 15
// some - 是否有元素满足条件
const hasEven = arr.some(item => item % 2 === 0);
console.log(hasEven); // true
// every - 是否所有元素满足条件
const allPositive = arr.every(item => item > 0);
console.log(allPositive); // true
// find - 查找第一个满足条件的元素
const found = arr.find(item => item > 3);
console.log(found); // 4
// findIndex - 查找第一个满足条件的索引
const foundIndex = arr.findIndex(item => item > 3);
console.log(foundIndex); // 3

五、数组的增删改操作

1. 添加元素

const arr = [1, 2, 3];
// push - 末尾添加（返回新长度）
arr.push(4, 5);
console.log(arr); // [1, 2, 3, 4, 5]
// unshift - 开头添加（返回新长度）
arr.unshift(-1, 0);
console.log(arr); // [-1, 0, 1, 2, 3, 4, 5]
// splice - 任意位置添加
arr.splice(3, 0, "a", "b"); // 在索引 3 处插入"a","b"
console.log(arr); // [-1, 0, 1, "a", "b", 2, 3, 4, 5]

2. 删除元素

const arr = [1, 2, 3, 4, 5];
// pop - 删除末尾元素（返回删除的元素）
const last = arr.pop();
console.log(last, arr); // 5, [1, 2, 3, 4]
// shift - 删除开头元素（返回删除的元素）
const first = arr.shift();
console.log(first, arr); // 1, [2, 3, 4]
// splice - 删除任意位置元素
const removed = arr.splice(1, 2); // 从索引 1 开始删除 2 个
console.log(removed, arr); // [3, 4], [2]
// 清空数组的几种方式
let arr2 = [1, 2, 3];
arr2.length = 0; // 方式 1
arr2 = []; // 方式 2
arr2.splice(0); // 方式 3
while(arr2.length) { // 方式 4
  arr2.pop();
}

3. 修改元素

const arr = [1, 2, 3, 4, 5];
// 直接通过索引修改
arr[2] = 30;
// splice - 替换元素
arr.splice(1, 2, 20, 30); // 从索引 1 开始删除 2 个，插入 20,30
console.log(arr); // [1, 20, 30, 4, 5]
// fill - 填充元素（ES6）
const filled = new Array(5).fill(0); // [0, 0, 0, 0, 0]
arr.fill(9, 1, 3); // 从索引 1 到 3 填充 9
console.log(arr); // [1, 9, 9, 4, 5]

六、数组的常用方法

1. 合并与切割

const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];
// concat - 合并数组（返回新数组）
const merged = arr1.concat(arr2, arr3);
console.log(merged); // [1, 2, 3, 4, 5, 6]
// slice - 切割数组（返回新数组）
const sliced = merged.slice(1, 4); // [2, 3, 4]
// join - 连接为字符串
const str = merged.join("-"); // "1-2-3-4-5-6"
// split - 字符串分割为数组（字符串方法）
const arr = "a,b,c".split(","); // ["a", "b", "c"]

2. 查找与判断

const arr = [1, 2, 3, 2, 1];
// indexOf - 查找元素第一次出现的索引
console.log(arr.indexOf(2)); // 1
console.log(arr.indexOf(5)); // -1
// lastIndexOf - 查找元素最后一次出现的索引
console.log(arr.lastIndexOf(2)); // 3
// includes - 是否包含元素（ES6）
console.log(arr.includes(3)); // true
console.log(arr.includes(5)); // false
// find - 查找满足条件的第一个元素
const found = arr.find(item => item > 2); // 3
// findIndex - 查找满足条件的第一个索引
const foundIndex = arr.findIndex(item => item > 2); // 2

3. 排序与反转

const arr = [3, 1, 4, 1, 5, 9, 2, 6];
// sort - 排序（修改原数组）
arr.sort();
console.log(arr); // [1, 1, 2, 3, 4, 5, 6, 9]（默认按字符串排序）
// 自定义排序
const numbers = [3, 1, 4, 1, 5, 9];
numbers.sort((a, b) => a - b); // 升序
console.log(numbers); // [1, 1, 3, 4, 5, 9]
numbers.sort((a, b) => b - a); // 降序
console.log(numbers); // [9, 5, 4, 3, 1, 1]
// reverse - 反转数组
const arr2 = [1, 2, 3, 4];
arr2.reverse();
console.log(arr2); // [4, 3, 2, 1]

4. 数组转换

const arr = [1, 2, 3, 4, 5];
// map - 映射
const doubled = arr.map(x => x * 2);
// filter - 过滤
const evens = arr.filter(x => x % 2 === 0);
// reduce - 归约
const sum = arr.reduce((acc, x) => acc + x, 0);
// flat - 扁平化数组（ES2019）
const nested = [1, [2, 3], [4, [5, 6]]];
const flat1 = nested.flat(); // [1, 2, 3, 4, [5, 6]]
const flat2 = nested.flat(2); // [1, 2, 3, 4, 5, 6]
// flatMap - 映射后扁平化
const result = [1, 2, 3].flatMap(x => [x, x * 2]);
console.log(result); // [1, 2, 2, 4, 3, 6]

七、多维数组

// 创建二维数组
const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
// 访问元素
console.log(matrix[1][2]); // 6
// 遍历二维数组
for (let i = 0; i < matrix.length; i++) {
  for (let j = 0; j < matrix[i].length; j++) {
    console.log(`matrix[${i}][${j}] = ${matrix[i][j]}`);
  }
}
// 创建指定大小的二维数组
function createMatrix(rows, cols, initial = 0) {
  return Array.from({ length: rows }, () => Array.from({ length: cols }, () => initial));
}
const matrix2 = createMatrix(3, 3, 0);
console.log(matrix2); // [[0,0,0], [0,0,0], [0,0,0]]

八、数组的高级技巧

1. 数组去重

const arr = [1, 2, 2, 3, 3, 3, 4, 4, 5];
// 使用 Set
const unique1 = [...new Set(arr)];
console.log(unique1); // [1, 2, 3, 4, 5]
// 使用 filter 和 indexOf
const unique2 = arr.filter((item, index) => arr.indexOf(item) === index);
// 使用 reduce
const unique3 = arr.reduce((acc, item) => {
  if (!acc.includes(item)) acc.push(item);
  return acc;
}, []);

2. 数组交集、并集、差集

const arr1 = [1, 2, 3, 4];
const arr2 = [3, 4, 5, 6];
// 并集
const union = [...new Set([...arr1, ...arr2])];
console.log(union); // [1, 2, 3, 4, 5, 6]
// 交集
const intersection = arr1.filter(item => arr2.includes(item));
console.log(intersection); // [3, 4]
// 差集（arr1 中有但 arr2 中没有）
const difference = arr1.filter(item => !arr2.includes(item));
console.log(difference); // [1, 2]

3. 数组分组

const arr = [
  { name: "张三", age: 25, department: "技术部" },
  { name: "李四", age: 30, department: "市场部" },
  { name: "王五", age: 28, department: "技术部" },
  { name: "赵六", age: 35, department: "市场部" }
];
// 按部门分组
const grouped = arr.reduce((acc, person) => {
  const dept = person.department;
  if (!acc[dept]) {
    acc[dept] = [];
  }
  acc[dept].push(person);
  return acc;
}, {});
console.log(grouped);
// {
//   技术部：[{ name: "张三", ... }, { name: "王五", ... }],
//   市场部：[{ name: "李四", ... }, { name: "赵六", ... }]
// }

4. 数组打平与链式调用

const data = [
  { category: "水果", items: ["苹果", "香蕉"] },
  { category: "蔬菜", items: ["白菜", "萝卜"] }
];
// 获取所有物品
const allItems = data
  .flatMap(category => category.items)
  .map(item => item.toUpperCase())
  .filter(item => item.length > 2)
  .sort();
console.log(allItems); // ["苹果", "香蕉", "白菜", "萝卜"]（按拼音排序）

九、类数组对象

// 常见的类数组对象
function example() {
  console.log(arguments); // 类数组对象
  console.log(Array.isArray(arguments)); // false
  // 转换为真实数组
  const args1 = Array.from(arguments);
  const args2 = [...arguments];
  const args3 = Array.prototype.slice.call(arguments);
}
example(1, 2, 3);
// DOM 元素集合
const divs = document.querySelectorAll('div');
const divArray = Array.from(divs); // 转换为数组