Question

嗨，我的第一个问题在这里。我有一个看起来像这样的对象数组：

    const albums = [{title: 'title1', id: 1}, {title: 'title2', id: 2}, 
{title: 'title3', id: 3}]

我要从此数组按id提取title的动态值。意思是如果我在此上运行一个函数，我想在id被指定为“ 1”时收到“ title1”。我已经尝试了许多事情，包括forEach循环，现在看起来像这样：

albums.forEach(function(key, index, arr) {
        arr[index].title })

我在该站点的其他地方读到，for / forEach循环可能有助于从对象数组内部的对象中提取值。但是我想我不完全了解forEach循环在这方面的工作原理，因为我无法从中提取任何值。如果在forEach循环中，我调用console.log（就像console.log(arr[index].title)一样，它很好地记录了数组中每个元素的title属性值。但是当我尝试返回（return arr[index].title）并调用

所以总的来说，我有两个问题：

在对象数组中访问对象内部值的最佳方法是什么？
在尝试访问对象数组中的对象时，forEach循环如何正常工作？

感谢您的任何输入，建议和反馈

Answer 1

尝试以下代码：

const albums = [{ title: 'title1',id: 1}, {title: 'title2',id: 2},{title: 'title3',id: 3}]

var idToFind = 2;
albums.forEach((element) => {
  if (element.id == idToFind) {
    console.log(element.title)
  }
})

Answer 2

JavaScript有几种方法可以提取和操作数组中的对象。以下是一些与您的问题有关的最常见的信息：

const albums = [{title: 'title1', id: 1}, {title: 'title2', id: 2}, 
{title: 'title3', id: 3}];

// For each is for doing something that causes side effects
albums.forEach(({title}) => console.log(title))
// nothing is returned
// console output:
// title1
// title2
// title3

// Map is for transforming each object in the array into something else
const titles = albums.map(({title}) => title);
// => ['title1', 'title2', title3']

// If you need to find a specific one, use find
const albumWithId3 = albums.find(({id}) => id === 3);
// => {title: 'title3', id: 3}

// If you need to find a subset, use filter
const ablumsWithIdsLessThan3 = albums.filter(({id}) => id < 3)
// => [{title: 'title1', id: 1}, {title: 'title2', id:2}]

要直接回答您的问题，您可能想要这样的东西：

const albums = [{title: 'title1', id: 1}, {title: 'title2', id: 2}, 
{title: 'title3', id: 3}];

const getTitle = album => album ? album.title : undefined;
const idToAlbum = (myId, albums) => albums.find(({id}) => myId === id);
const idToTitle = (myId, albums) => getTitle(idToAlbum(myId, albums));

const title = idToTitle(1, albums);
console.log(title);
// => 'title1'

或者，如果您喜欢命令式样式：

const albums = [{title: 'title1', id: 1}, {title: 'title2', id: 2}, 
{title: 'title3', id: 3}];

const idToTitle = (id, albums) => {
  for (const album of albums) {
    if (album.id === id) {
      return album.title;
    }
  }
}

const title = idToTitle(1, albums);
console.log(title);
// => 'title1'

Answer 3

（1）要在数组中查找值，Array.prototype.find几乎总是您的最佳选择。

const albums = [{title: 'title1', id: 1}, {title: 'title2', id: 2}, {title: 'title3', id: 3}]

const findAlbum = (id) => albums.find(album => album.id === id)

console.log(findAlbum(2)); //~> {title: 'title2', id: 2}

（2）forEach可以工作，但通常不是最适合该工作的人。 forEach是针对元素运行功能。它没有本质上捕获结果。所以您可以像这样包装它：

const albums = [{title: 'title1', id: 1}, {title: 'title2', id: 2}, {title: 'title3', id: 3}]

const findAlbum = (id) => {
  let found 
  albums.forEach(album => {
    if (!found && album.id === id) {
      found = album
    }
  })
  return found
}

console.log(findAlbum(2)) //~> {title: 'title2', id: 2}

该代码显然更复杂。而且它掩盖了您要做的就是“发现”某些东西的事实。

（它还有一个更隐蔽的问题。如果您想在潜在的false-y值列表中找到某些内容，它将继续搜索该值是否为false-y。因此，如果您要更改此值以尝试在[3, 5, 7, 0, 11, 14, 13, 17, 20]中找到第一个偶数，它会跳过false-y 0并返回14。）您可以通过将found分成两个变量来解决此问题，一个变量检查我们是否找到了其他东西来存储找到的值，但这会使代码变得更加复杂，尤其是当我们有find方法可用时。）

（3）您可以将其分解为一些可重用的帮助器。我不会在这里写。但是您可以编写通用的reusabale where和equals函数，以便代码看起来像这样：

const findAlbum = (id) => albums.find(where('id', equals(id)))

对我来说，这看起来更具可读性。

Answer 4

尝试一下：

function getTitleById(id) 
    {
    var i;
    for (i = 0; i < albums.length; i++) { 
        if(albums[i]['id'] == id)
        return albums[i]['title'];
    }
    }

Answer 5

如果您知道对象在数组中的位置，只需使用该位置即可访问它。即console.log(albums[4].title)。但是，如果您不知道位置，则需要遍历每个位置并搜索有问题的对象。最好的方法是编写一个返回对象的搜索函数。

const albums = [{title: 'title1', id: 1}, {title: 'title2', id: 2}, 
{title: 'title3', id: 3}];

console.log(serachArrayByTitle(albums,'title2'));

function serachArrayByTitle(arrayToSerach,titleToSearchFor){
  for(var i=0;i<arrayToSerach.length;i++){
    if(arrayToSerach[i].title===titleToSearchFor){
      return arrayToSerach[i];
    }
  }
}

forEach()为数组的每个元素执行给定的回调函数。在此处阅读更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Answer 6

为保持一致性，应使用forEach范围，如下所示：

var Album = function(arr){
    this.arr = arr;
    this.get = function(id){
        this.arr.forEach((element) => {
            if (element.id == id) {
                console.log(element.title)
            }
        })
    }
}

a = new Album([{title: 'title1', id: 2}]);
a.get(2)

这应该返回'title1'

Answer 7

您可以使用Array#find()查找与所需条件匹配的数组元素。

然后，如果有匹配项，则从该元素返回您想要的任何内容

const albums = [{title: 'title1', id: 1}, {title: 'title2', id: 2},
{title: 'title3', id: 3}]


const getTitleById = (id) => {
  const o = albums.find(album => album.id === id);
  return o && o.title
}


console.log(getTitleById(2))
console.log(getTitleById(3))

使用forEach访问数组内的对象值？

7 个答案: