Javascript数组和信息检索

Javascript array and information retrieve

本文关键字：信息检索 数组 Javascript      更新时间：2023-09-26

好的，所以我甚至不确定如何标题这篇文章，但我有一个小的逻辑问题，我需要帮助。所以在一个网站的首页，我需要4个框。这四个框包含一个图像，一个标题，一个日期。关键在于，这四个盒子需要从一个包含10个元素的列表中随机生成。所以在javascript是有可能创建类似于xml结构选择4随机从然后填充…所以我希望它的工作方式是…

  • 项目1
    • 标题
    • src
  • 项目2
    • 标题
    • src
  • 项目3
    • 标题
    • src

是否可以将项目放在数组中，然后在随机选择后访问它们的属性?我可以在PHP/MySQL中这样做，但这是非常不必要的。什么好主意吗?谢谢!

简短的回答，是的。

var obj1 = {
    date: "04/12/1989",
    title: "My birthday",
    src: "path_to_some_image.png"
}
var obj2 = {
    date: "12/25/2011",
    title: "Christmas",
    src: "santa_claus.gif"
}
objs = [obj1, obj2];
rand = Math.floor(Math.random() * objs.length);
console.log(objs[rand].title + " is " + objs[rand].date);
// "My birthday is 04/12/1989"
// or "Christmas is 12/25/2011"

当然，您可以将Math.random用于此目的。将列表放入数组中，然后在0到9之间随机选择一个数字并选择该项目。你这样做四次，你就可以走了……除非你不希望相同的项目两次(或更频繁)-我很确定这就是你想要的。我的意思是，不要重复。如果你不想要有偏概率分布，这就更有趣了。在这种情况下，算法是这样的:

  1. i = 0到9之间的随机数-> pick array[i]
  2. 如果(i == 9) ->一切正常，跳过3
    3. if (i<9) -> swap array[i] and array[9]
  3. j = 0到8之间的随机数-> pick array[j]
  4. 如果(j == 8) ->一切正常，跳过6
  5. if (j <8) ->交换array[j]和array[8]
  6. k = 0到7之间的随机数-> pick array[k]…

你知道规律了。这种方法也被称为费雪-叶茨洗牌法。

你应该使用一个对象数组…

var items = [{
    'date': 'date of item 1',
    'title': 'title of item 1',
    'src': 'url/of/image-1'},
{
    'date': 'date of item 2',
    'title': 'title of item 2',
    'src': 'url/of/image-2'},
/* .. more items.. */
{
    'date': 'date of item 9',
    'title': 'title of item 9',
    'src': 'url/of/image-9'},
{
    'date': 'date of item 10',
    'title': 'title of item 10',
    'src': 'url/of/image-10'}];
for (var i = 1; i < 5; i++) {
    var item = items.splice(Math.floor(Math.random() * (items.length)), 1)[0];
    var el = document.getElementById('item-' + i);
    // insert the info you want in the DOM .. i just add it as text..
    el.innerHTML= item.date + ' - ' + item.title + ' - ' + item.src;
}
并使用预定义的html 
<div id="item-1"></div>
<div id="item-2"></div>
<div id="item-3"></div>
<div id="item-4"></div>

在http://jsfiddle.net/qkMNb/1/演示

相关文章：