技术直达 | JavaScript获取数组对象里面的键值，分分钟搞定！

2023-09-10 01:37:29

揭秘 JavaScript：深入解析获取数组对象键值

引言

在 JavaScript 的浩瀚世界中，数组对象扮演着至关重要的角色，让我们轻松存储有序的值。每个数组元素都配备了独一无二的索引（键）和相应的值。然而，有时我们需要深入挖掘，了解数组对象中键值的奥秘。本文将带你踏上这段探索之旅，揭示 JavaScript 中获取数组对象键值的多种途径。

1. 遍历：逐一探寻

遍历是一种经典方法，能逐一访问数组中的每个元素。你可以使用 for 循环或 forEach 方法来进行遍历，每一步都深入检查键和值。

const fruits = ['apple', 'banana', 'cherry'];

for (let i = 0; i < fruits.length; i++) {
  console.log(`索引：${i}, 值：${fruits[i]}`);
}

// 或者使用 forEach 方法
fruits.forEach((fruit, index) => {
  console.log(`索引：${index}, 值：${fruit}`);
});

2. map：映射元素，提取信息

map 方法提供了另一种获取键值的方式。它将数组中的每个元素映射到一个新元素，并返回一个新的数组。我们可以利用它来创建包含键值对的数组。

const colors = ['red', 'green', 'blue'];

const result = colors.map((color, index) => {
  return {
    key: index,
    value: color
  };
});

console.log(result);

3. Object.keys：揭示对象键名

Object.keys 方法专门用于获取对象的键名。我们可以将数组对象转换为对象，然后再使用 Object.keys 来提取键值。

const shapes = ['circle', 'square', 'triangle'];

const shapeObject = Object.assign({}, shapes);

const keys = Object.keys(shapeObject);

console.log(keys);

4. Object.values：窥探对象值

与 Object.keys 相对应，Object.values 方法用于获取对象的键值。同样的，我们先将数组对象转换为对象，然后使用 Object.values 来提取键值。

const numbers = [1, 2, 3, 4, 5];

const numberObject = Object.assign({}, numbers);

const values = Object.values(numberObject);

console.log(values);

5. 解构赋值：优雅提取

解构赋值是一种现代化的语法特性，可以让你更方便地从对象和数组中提取键值。它可以让你将数组对象中的键值直接赋给变量。

const letters = ['a', 'b', 'c', 'd', 'e'];

const [first, second, third, ...rest] = letters;

console.log(`第一个字母：${first}`);
console.log(`第二个字母：${second}`);
console.log(`第三个字母：${third}`);
console.log(`剩余字母：${rest}`);