JavaScript的数组与对象的区别

前端

2023-10-28 03:02:00

JavaScript 中的数组与对象：理解关键差异

前言

在 JavaScript 中，数组和对象都是广泛使用的存储数据的容器。然而，在内部运作方式上，两者之间存在一些关键差异。了解这些差异对于在应用程序中有效利用这些数据结构至关重要。

索引与键

数组使用索引来访问元素，就像数组中的位置一样。索引是从 0 开始的，表示数组中元素的位置。另一方面，对象使用键来访问属性。键是对象的唯一标识符，通常是字符串。

数据类型

数组可以存储任何数据类型，包括数字、字符串、布尔值，甚至其他数组和对象。然而，对象只能存储字符串、数字、布尔值和引用其他对象。

可变性和不可变性

数组是可变的，这意味着它们可以被修改。可以通过索引添加、删除或更新元素。另一方面，对象是不可变的，这意味着它们不能被修改。要更改对象的属性，必须创建新对象并重新分配引用。

遍历

遍历数组可以使用 for 循环或 forEach() 方法。for 循环通过迭代索引来访问元素，而 forEach() 方法接受一个回调函数，对每个元素执行操作。遍历对象可以使用 for...in 循环，它迭代对象的键。

示例

索引与键：

const array = [1, 2, 3];
console.log(array[0]); // 1

const object = {
  a: 1,
  b: 2,
  c: 3
};
console.log(object.a); // 1

数据类型：

const array = [1, 2, '3', true];
const object = {
  a: 1,
  b: 2,
  c: '3',
  d: true
};

可变性和不可变性：

const array = [1, 2, 3];
array[0] = 4; // 修改数组的第一个元素
console.log(array); // [4, 2, 3]

const object = {
  a: 1,
  b: 2,
  c: 3
};
object.a = 4; // 修改对象的 a 属性
console.log(object); // { a: 4, b: 2, c: 3 }

遍历：

const array = [1, 2, 3];
for (let i = 0; i < array.length; i++) {
  console.log(array[i]); // 1, 2, 3
}

const object = {
  a: 1,
  b: 2,
  c: 3
};
for (const key in object) {
  console.log(object[key]); // 1, 2, 3
}