如何在 JavaScript 中的对象数组中按 id 打印对象？

我们有一个对象数组，在每个对象中，都有一个名为id的键，其值是一个数字。

例子：

const arr = [
        {
            'id' : 12, 
            'name' : 'Ram'
         }, 
         {
             'id' : 32, 
             'name' : 'Shyam'
         }
          ]

我们想要找到 ID 号为n的 name 属性的值。

例子 ：

Input : 12
Output : Ram

Input : 32
Output : Shyam

有很多方法可以解决这个问题，如下所示

• 使用Array.filter()
• 使用 数组.find()
• 在 JavaScript 中使用循环

使用 Array.filter() Array.filter() 方法用于在应用一些条件后从现有数组创建一个新数组。

HTML

    
        Geeksforgeeks
  
        Name of the id is : 
          
        
  
        
            
            // This is our array of Objects
            var data = [
                { id: 1, name: "a" },
                { id: 2, name: "b" },
                { id: 3, name: "c" },
                { id: 4, name: "d" },
                { id: 5, name: "e" },
                { id: 6, name: "f" },
            ];
  
            let idYouWant = 1;
            let propertyYouWant = "name";
  
            // Using Array.filter( ) method
            // we are iterating through each
            // items in the array and
            // checking which item's
            // id value is equal to the id we want
  
            let res = data.filter((item) => {
                return item.id == idYouWant;
            });
  
            // After using filter method we got an array
            // of object. Now take its first element and
            // use its 'propertyYouWant' key
            let exactRes = res[0][propertyYouWant];
  
            // Printing the property we want
            document.getElementById("geeks").innerText = exactRes;
        
    

输出：

使用 Array.find()：首先使用 Array.find()，我们搜索给定 id 存在于哪个对象中，然后我们从该对象中提取 name 属性。

HTML

    
        Geeksforgeeks
  
        Name of the id is : 
          
        
  
        
            
            // This is our array of Objects
            var data = [
                { id: 1, name: "a" },
                { id: 2, name: "b" },
                { id: 3, name: "c" },
                { id: 4, name: "d" },
                { id: 5, name: "e" },
                { id: 6, name: "f" },
            ];
  
            let idYouWant = 2;
            let propertyYouWant = "name";
  
            // Using Array.find( ) we are searching
            // in which object our searching id present
  
            let res = data.find((item) => {
                return item.id == idYouWant;
            });
  
            // Now print the property which you want from
            // the object res console.log(res[propertyYouWant])
            document.getElementById("geeks").innerText = 
                    res[propertyYouWant];
        
    

输出：

使用 for循环 首先使用 for 循环，我们正在迭代数组并搜索给定 id 存在于哪个对象中，然后，我们正在打印我们想要的属性。

HTML

    
        Geeksforgeeks
  
        Name of the id is :
          
        
  
        
            // This is our array of objects
            var data = [
                { id: 1, name: "a" },
                { id: 2, name: "b" },
                { id: 3, name: "c" },
                { id: 4, name: "d" },
                { id: 5, name: "e" },
                { id: 6, name: "f" },
            ];
  
            let idYouWant = 4;
            let propertyYouWant = "name";
  
            // Iterating over the array using for loop and
            // searching in which object the id present
            // After getting the object we print the
            // property we wanted from the object
  
            for (var i = 0; i < data.length; i++) {
                if (data[i].id == idYouWant) {
                    // console.log(data[i][propertyYouWant])
                    document.getElementById("geeks").innerText = 
                            data[i][propertyYouWant];
                }
            }
        
    

输出 ：