数组对象是一个很常见的数据类型，常常用来存储一组相关的数据。在某些情况下，我们想要从一个包含多个对象的数组中，获取其中每个对象的一个指定属性的值。本文将介绍如何使用JavaScript来实现获取数组对象指定值的方法。
一、使用循环遍历数组对象
我们可以使用循环遍历数组对象，通过对象属性名来获取对应的属性值。具体的代码演示如下：
function getPropertyValue(arr, propName) {
let result = []; // 定义一个空数组，用于存储获取到的属性值
for (let i = 0; i < arr.length; i++) {
result.push(arr[i][propName]); // 将获取到的属性值添加到result数组中
}
return result;
}
let arr = [{
name: "Tom",
age: 18,
gender: "male"
},
{
name: "Lily",
age: 20,
gender: "female"
},
{
name: "Jack",
age: 22,
gender: "male"
}
];
console.log(getPropertyValue(arr, "name")); // ["Tom", "Lily", "Jack"]
console.log(getPropertyValue(arr, "age")); // [18, 20, 22]
console.log(getPropertyValue(arr, "gender")); // ["male", "female", "male"]
上述代码中，我们定义了一个函数getPropertyValue，该函数接收两个参数，第一个参数为数组对象arr，第二个参数为属性名propName。在函数内部，我们通过循环遍历数组对象，使用方括号语法获取每个对象的指定属性值，将这些值依次添加到一个空数组result中，并返回result数组。
二、使用ES6中的map方法
ES6中引入了一种新的遍历数组的方法——map。使用map方法可以更简单地获取数组对象中的指定属性值。具体的代码演示如下：
function getPropertyValue(arr, propName) {
return arr.map(obj => obj[propName]);
}
let arr = [{
name: "Tom",
age: 18,
gender: "male"
},
{
name: "Lily",
age: 20,
gender: "female"
},
{
name: "Jack",
age: 22,
gender: "male"
}
];
console.log(getPropertyValue(arr, "name")); // ["Tom", "Lily", "Jack"]
console.log(getPropertyValue(arr, "age")); // [18, 20, 22]
console.log(getPropertyValue(arr, "gender")); // ["male", "female", "male"]
上述代码中，我们定义了一个函数getPropertyValue，该函数接收两个参数，第一个参数为数组对象arr，第二个参数为属性名propName。在函数内部，我们使用ES6中的map方法，遍历数组对象，针对每个对象直接返回其指定属性的值。
三、使用reduce方法实现一次循环
上述两种方法都需要循环遍历数组对象，但是使用reduce方法可以只遍历一次实现从对象中获取指定值的操作。具体的代码演示如下：
function getPropertyValue(arr, propName) {
return arr.reduce((result, obj) => {
result.push(obj[propName]);
return result;
}, []);
}
let arr = [{
name: "Tom",
age: 18,
gender: "male"
},
{
name: "Lily",
age: 20,
gender: "female"
},
{
name: "Jack",
age: 22,
gender: "male"
}
];
console.log(getPropertyValue(arr, "name")); // ["Tom", "Lily", "Jack"]
console.log(getPropertyValue(arr, "age")); // [18, 20, 22]
console.log(getPropertyValue(arr, "gender")); // ["male", "female", "male"]
上述代码中，我们定义了一个函数getPropertyValue，该函数接收两个参数，第一个参数为数组对象arr，第二个参数为属性名propName。在函数内部，我们使用ES6中的reduce方法，遍历数组对象，针对每个对象将其指定属性的值添加到一个初始为空的数组result中，并返回result数组。
四、使用lodash库的pluck方法
如果你使用的是lodash库，那么获取数组对象中的指定属性值就更加简单了。lodash库中提供了一个pluck方法，可以轻松地抽取数组对象中的指定属性值。具体的代码演示如下：
let _ = require("lodash");
let arr = [{
name: "Tom",
age: 18,
gender: "male"
},
{
name: "Lily",
age: 20,
gender: "female"
},
{
name: "Jack",
age: 22,
gender: "male"
}
];
console.log(_.pluck(arr, "name")); // ["Tom", "Lily", "Jack"]
console.log(_.pluck(arr, "age")); // [18, 20, 22]
console.log(_.pluck(arr, "gender")); // ["male", "female", "male"]
上述代码中，我们使用require函数引入了lodash库，然后分别使用lodash的pluck方法来获取数组对象中的指定属性值。相比之前的三种方法，使用lodash库的pluck方法更加简单快捷。
总结
本文从循环遍历、ES6中的map方法、reduce方法和lodash库的pluck方法四个方面详细阐述了如何使用JavaScript获取数组对象中的指定属性值。不同的方法有不同的适用场景，根据实际应用情况选择合适的方法可以提高代码的可读性和性能效率。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/303126.html
微信扫一扫 
支付宝扫一扫 