JavaScript 如何访问对象数组

JavaScript中的 对象数组 是包含一系列元素的集合，每个元素都持有多个属性和值。在JavaScript中，对象数组可分为两种类型，第一种类型是每个对象在数组中都有独立的对象名称，而第二种类型是将属性或值结构化为对象，并将其存储在数组中，从而创建一个无具体独立对象名称的对象数组。

在JavaScript中，访问对象数组的方法包括：

使用 [ ] 符号
使用点符号
使用 for..in 循环
使用 forEach 循环
使用 map() 方法
使用 filter() 方法

使用方括号标记法： 通过方括号标记法和对象的索引，可以访问数组中的对象。此方法访问整个对象，无法访问特定对象的某个属性。

语法：

arrayName[arrayIndex]

示例 1： 下面的代码演示了如何使用括号表示法来访问对象数组的元素。

Javascript

// Array of objects 
var objArr = [ 
    { 
        name: 'john', 
        age: 12, 
        gender: 'male'
    }, 
    { 
        name: 'jane', 
        age: 15, 
        gender: 'female'
    }, 
    { 
        name: 'julie', 
        age: 20, 
        gender: 'trans'
    } 
]; 
  
console.log("First Object in the Array using the [] notation:") 
console.log(objArr[0]);

输出

First Object in the Array using the [] notation:
{ name: 'john', age: 12, gender: 'male' }

使用DOT符号表示法： 使用这种方法无法直接访问对象数组，而是必须与括号符号一起使用。通过这种方法，我们可以访问对象数组中特定对象的任何特定属性，但不能访问整个对象。

语法：

arrayName[arrayIndex].propertyName

例子2： 下面的代码演示了我们如何使用点符号和括号符号来访问对象数组的元素：

Javascript

// Array of objects 
var objArr = [ 
    { 
        name: 'john', 
        age: 12, 
        gender: 'male'
    }, 
    { 
        name: 'jane', 
        age: 15, 
        gender: 'female'
    }, 
    { 
        name: 'julie', 
        age: 20, 
        gender: 'trans'
    } 
]; 
  
console.log("Accessing the value using the [] and DOT notations:") 
console.log(objArr[1].gender);

输出

Accessing the value using the [] and DOT notations:
female

使用for..in循环：

语法：

for..in循环是JavaScript中一种常用的循环类型，可用于访问数组中的元素。通过该方法，您既可以访问整个元素，也可以访问对象内部的属性。

for (var key in arrayName) {
    console.log(arrayName[key].name);
    //Or we can access the specific properties using
    console.log(arrayName[arrayIndex].propertyName);
}

示例3：

下面的代码演示了如何使用for..in循环来访问对象数组的元素：

Javascript

// Array of objects 
var objArr = [ 
    { 
        name: 'john', 
        age: 12, 
        gender: 'male'
    }, 
    { 
        name: 'jane', 
        age: 15, 
        gender: 'female'
    }, 
    { 
        name: 'julie', 
        age: 20, 
        gender: 'trans'
    } 
]; 
  
console.log("Accessing the values using the for..in loop:") 
for (var key in objArr) { 
  
    // Console logs all the values in the objArr Array: 
    console.log(objArr[key]); 
}

输出

Accessing the values using the for..in loop:
{ name: 'john', age: 12, gender: 'male' }
{ name: 'jane', age: 15, gender: 'female' }
{ name: 'julie', age: 20, gender: 'trans' }

使用 forEach循环： forEach循环允许你遍历一个对象数组，并单独访问每个对象。通过这种方法，你可以访问整个元素以及对象内部的属性。

语法：

arrayName.forEach(function(item) {
    console.log(item);
});

示例 4： 下面的代码演示了如何使用forEach循环来访问对象数组的元素：

JavaScript

// Array of objects 
var objArr = [ 
    { 
        name: 'john', 
        age: 12, 
        gender: 'male'
    }, 
    { 
        name: 'jane', 
        age: 15, 
        gender: 'female'
    }, 
    { 
        name: 'julie', 
        age: 20, 
        gender: 'trans'
    } 
]; 
  
console.log("Accessing the arrayusing the forEach loop:"); 
objArr.forEach(function(item) { 
    console.log(item); 
});

输出

Accessing the arrayusing the forEach loop:
{ name: 'john', age: 12, gender: 'male' }
{ name: 'jane', age: 15, gender: 'female' }
{ name: 'julie', age: 20, gender: 'trans' }

使用 map() 方法: JavaScript 中的 map() 函数允许您访问一个对象数组并将其转换为另一个数组。map() 函数对原始数组的每个元素调用一个指定的函数，并将结果存储在一个新数组中。语法:

arrayName.map((item) => {
    console.log(item);
});

示例 5: 以下代码演示了如何使用forEach循环来访问对象数组的元素：

JavaScript

// Array of objects 
var objArr = [ 
    { 
        name: 'john', 
        age: 12, 
        gender: 'male'
    }, 
    { 
        name: 'jane', 
        age: 15, 
        gender: 'female'
    }, 
    { 
        name: 'julie', 
        age: 20, 
        gender: 'trans'
    } 
]; 
  
console.log("Accessing the Array using the forEach loop:") 
objArr.map((item) => { 
    console.log(item); 
});

输出

Accessing the Array using the forEach loop:
{ name: 'john', age: 12, gender: 'male' }
{ name: 'jane', age: 15, gender: 'female' }
{ name: 'julie', age: 20, gender: 'trans' }

使用 filter() 方法： 使用 map() 函数可以在 JavaScript 中访问数组并创建新的数组。map() 函数在原数组的每个元素上调用给定的函数，创建一个带有结果的新数组。

语法：

arrayName.filter(function(item) {
    console.log(item);
});

示例6： 下面的代码演示了如何使用filter函数来访问对象数组的元素。它还展示了如何使用filter函数中的条件来获取对象数组中的特定对象：

Javascript

// Array of objects 
var objArr = [ 
    { 
        name: 'john', 
        age: 12, 
        gender: 'male'
    }, 
    { 
        name: 'jane', 
        age: 15, 
        gender: 'female'
    }, 
    { 
        name: 'julie', 
        age: 20, 
        gender: 'trans'
    } 
]; 
  
console.log("Accessing the Array using the forEach loop:") 
objArr.filter(function(item) { 
    console.log(item); 
}); 
console.log("Using the Filer method to acces value") 
const search = objArr.filter(function(item) { 
    return item.name === 'jane'; 
}); 
console.log(search);

输出

Accessing the Array using the forEach loop:
{ name: 'john', age: 12, gender: 'male' }
{ name: 'jane', age: 15, gender: 'female' }
{ name: 'julie', age: 20, gender: 'trans' }
Using the Filer method to acces value
[ { name: 'jane', age: 15, gender: 'female' } ]