如何从包含多个对象的数组中找到属性值

在本文中，我们将尝试理解如何根据指定条件从包含多个对象的数组中找到属性的值。

有几种方法可以从包含多个对象的数组中找到属性值：

• 使用for循环
• 使用filter()方法
• 使用map()方法
• 使用forEach()方法

方法1：使用for循环

在这个方法中，我们使用for循环创建一个函数来遍历对象，搜索属性的值。匹配的值被推入一个新数组，并作为输出返回。

语法：

for (statement 1 ; statement 2 ; statement 3){  
    code here...  
}

示例2: 在这个示例中，函数searchValue根据特定的’fruit_color’属性值过滤对象。它返回一个包含匹配水果的新数组。

Javascript

let fruits_details = [
    {
        fruit_name: "Apple",
        fruit_color: "Red",
    },
    {
        fruit_name: "Pomegranate",
        fruit_color: "Red",
    },
    {
        fruit_name: "Banana",
        fruit_color: "Yellow",
    },
    {
        fruit_name: "Grapes",
        fruit_color: "Green",
    },
];
 
let searchValue = (property_value, array) => {
    let new_array = [];
    for (let i = 0; i < array.length; i++) {
        if (array[i].fruit_color === property_value) {
            new_array.push(array[i]);
        }
    }
    return new_array;
};
 
console.log(searchValue("Red", fruits_details));

输出

[
  { fruit_name: 'Apple', fruit_color: 'Red' },
  { fruit_name: 'Pomegranate', fruit_color: 'Red' }
]

方法2：使用 filter() 方法

在这个方法中，我们使用 filter() 方法来创建一个函数，根据特定的 ‘fruit_color’ 属性值过滤 ‘fruits_details’ 数组中的对象，返回一个包含匹配水果的新数组。

语法：

array.filter(callback(element, index, arr), thisValue)

示例3： 在这个示例中，我们将试图分析一种更好的方法，准确地描述我们在上一个示例中见过的内容。这里我们将使用filter()方法，根据需要过滤掉所有的属性及其相应的值。

JavaScript

let fruits_details = [
    {
        fruit_name: "Apple",
        fruit_color: "Red",
    },
    {
        fruit_name: "Pomegranate",
        fruit_color: "Red",
    },
    {
        fruit_name: "Banana",
        fruit_color: "Yellow",
    },
    {
        fruit_name: "Grapes",
        fruit_color: "Green",
    },
];
 
console.log(fruits_details.filter(
    (element) => element.fruit_color === "Red")
);

输出

[
  { fruit_name: 'Apple', fruit_color: 'Red' },
  { fruit_name: 'Pomegranate', fruit_color: 'Red' }
]

方法3：使用map()方法：

在这种方法中，map()方法不直接过滤对象，但是我们可以使用它将数组元素映射到基于’fruit_color’属性值的匹配水果数组。

语法：

const searchValue = (property_value, array) => {  
    return array.map((fruit) =>  
        fruit.fruit_color === property_value);  
};

示例: 在这个示例中，searchValue 函数使用 map() 方法来根据特定的 ‘fruit_color’ 属性值过滤 fruits_details 数组中的对象。该函数返回一个包含与匹配的 ‘fruit_color’ 相应的对象的新数组。

Javascript

const fruits_details = [
    {
        fruit_name: "Apple",
        fruit_color: "Red",
    },
    {
        fruit_name: "Pomegranate",
        fruit_color: "Red",
    },
    {
        fruit_name: "Banana",
        fruit_color: "Yellow",
    },
    {
        fruit_name: "Grapes",
        fruit_color: "Green",
    },
];
 
const searchValue = (property_value, array) => {
    return array.filter((fruit) => fruit.fruit_color === property_value);
};
 
console.log(searchValue("Red", fruits_details));

输出

[
  { fruit_name: 'Apple', fruit_color: 'Red' },
  { fruit_name: 'Pomegranate', fruit_color: 'Red' }
]

方法4：使用 forEach() 方法

在这种方法中，forEach() 方法遍历 ‘fruits_details’ 数组中的对象。如果 ‘fruit_color’ 与指定的值匹配，它将水果对象推入新数组并返回过滤结果。

语法：

array.forEach(callback(element, index, arr), thisValue)

示例： 在这个示例中，forEach()方法遍历fruits_details数组。对于每个对象，它检查’fruit_color’属性是否与指定的属性值相匹配。如果匹配成功，则将该水果对象添加到filteredFruits数组中。该函数返回与指定的’fruit_color’匹配的水果的过滤后的数组。

Javascript

const fruits_details = [
    {
        fruit_name: "Apple",
        fruit_color: "Red",
    },
    {
        fruit_name: "Pomegranate",
        fruit_color: "Red",
    },
    {
        fruit_name: "Banana",
        fruit_color: "Yellow",
    },
    {
        fruit_name: "Grapes",
        fruit_color: "Green",
    },
];
 
const searchValue = (property_value, array) => {
    const filteredFruits = [];
 
    array.forEach((fruit) => {
        if (fruit.fruit_color === property_value) {
            filteredFruits.push(fruit);
        }
    });
 
    return filteredFruits;
};
 
console.log(searchValue("Red", fruits_details));

输出

[
  { fruit_name: 'Apple', fruit_color: 'Red' },
  { fruit_name: 'Pomegranate', fruit_color: 'Red' }
]