在前端开发中，我们常常需要从一个对象数组中提取某个属性的值，并将这些值组成一个新的数组。比如，我们可能有一个存储了用户信息的对象数组，但是我们只需要其中每个用户的名字作为一个字符串数组来进行后续处理。
下面我们就来介绍一些方法来实现这个操作。
方法一：使用 map 函数
map 函数可以遍历数组并返回一个新的数组，我们可以利用这个特性来提取想要的属性。示例代码如下：
const users = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 27 },
{ name: 'Charlie', age: 30 }
];
const names = users.map(user => user.name);
console.log(names); // ['Alice', 'Bob', 'Charlie']上述代码中，我们首先定义了一个包含用户信息的对象数组 users，然后使用 map 函数遍历该数组，对于每个用户对象，我们返回其 name 属性值，最终得到一个存储了所有用户名字的新数组 names。
方法二：使用 reduce 函数
reduce 函数可以将数组中的每个元素按指定的方式累加到一个最终结果中，我们可以利用这个函数来提取想要的属性。示例代码如下：
-- -------------------- ---- ------- ----- ----- - - - ----- -------- ---- -- -- - ----- ------ ---- -- -- - ----- ---------- ---- -- - -- ----- ----- - -------------------------- ----- -- - ---------------------------- ------ ------------ -- ---- ------------------- -- --------- ------ ----------
上述代码中，我们首先定义了一个包含用户信息的对象数组 users，然后使用 reduce 函数遍历该数组，对于每个用户对象，我们将其 name 属性值推入一个累加器数组中，最终得到一个存储了所有用户名字的新数组 names。
方法三：使用 for 循环
当然，我们也可以使用传统的 for 循环来实现这个操作。示例代码如下：
-- -------------------- ---- ------- ----- ----- - - - ----- -------- ---- -- -- - ----- ------ ---- -- -- - ----- ---------- ---- -- - -- ----- ----- - --- --- ---- - - -- - - ------------- ---- - -------------------------- - ------------------- -- --------- ------ ----------
上述代码中，我们首先定义了一个包含用户信息的对象数组 users，然后使用 for 循环遍历该数组，对于每个用户对象，我们将其 name 属性值推入一个新数组 names 中，最终得到一个存储了所有用户名字的新数组 names。
总结
从上述三个方法可以看出，在前端开发中提取一组对象中某些属性作为数组的值是一项非常基础的操作。虽然有多种方法可以实现这个操作，但是在实际应用中，我们需要根据具体情况选择最合适的方法来提高代码效率和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8418