主页 / 问题 / 737822
Accepted
Tick-Tack
Asked:2020-10-30 19:28:39 +0000 UTC2020-10-30 19:28:39 +0000 UTC

在 map 函数之外，它返回一个不完整的数组

  • 772

这是代码。我需要当我开始输入一首歌曲时，它的全名会显示在其中，div但由于某种原因，console.log第二首歌曲不断返回第二首歌曲的名称，而div根本没有。告诉我出了什么事？

var songs = [{
    artist: {
      name: 'Imagine',
      song: 'Dragons'
    }
  },

  {
    artist: {
      name: 'Five',
      song: 'Finger'
    }
  }
];

var song, name;
songs.map(function(item) {
  song = item.artist.song;
  name = item.artist.name;
  console.log('fisrt', song);
});
document.getElementById('search').onkeyup = function() {
  document.getElementById('founded').innerHTML = '';
  var length = this.value.length;
  if (length > 0) {
    console.log('second', song);
    for (var i = 0; i < song.length; i++) {
      var show = song[i].split('').slice(0, length).join('');
      if (show == this.value) {
        document.getElementById('founded').innerHTML += song[i] + '</br>'
      }
    }
  }
}
<input type="search" id="search" />
<div id="founded"></div>

这就是歌曲的样子

javascript

1 个回答

  1. Best Answer

    这段代码发生了什么？

    songs.map(function(item) { ... })

    调用方法.map，该方法返回一个新数组，并且它的值不会在任何地方使用。

    在 for 的回调中 .map，将值分配给变量song和name。因此，它们的值将始终与数组最后一个元素中的值匹配songs，即：

    song == Finger
name == Five

    注意值是字符串。

    然后在上song有一个循环，即对字符串的字母进行排序，"Finder"唯一满足条件的输入选项是“F”。

    应该怎么做？

    上述代码试图解决的问题可以表述如下：

    从数组中选择字段值song以输入字符串开头的元素，显示值song。

    1. 从数组中选择元素，使用方法很方便filter

       songs.filter(song=> ... )

    2. 要确定一个字符串以另一个字符串开头，您可以使用startsWithorindexOf

       song.artist.song.startsWith(value)

    3. 要获取仅包含歌曲的列表，您可以使用该方法map

       .map(song => song.artist.song)

    4. <br>对于输出，您可以使用以下方法将接收到的元素收集到由分隔符分隔的字符串中join

       .join('<br>');

    因此，代码可能如下所示：

    var songs = [{
    artist: {
      name: 'Imagine',
      song: 'Dragons'
    }
  },
  {
    artist: {
      name: 'Five',
      song: 'Finger'
    }
  },
  {
    artist: {
      name: 'Four',
      song: 'FingerPrint'
    }
  }

];

document.getElementById('search').onkeyup = function() {
  document.getElementById('founded').innerHTML = '';
  var length = this.value.length;
  if (length > 0) {
    document.getElementById('founded').innerHTML = songs.filter(song => song.artist.song.startsWith(this.value)) // сравнение с учетом регистра
      .map(song => song.artist.song)
      .join('<br>');


  }
}
    <input type="search" id="search" />
<div id="founded"></div>

    • 3

相关问题