如何通过json数组使用JavaScript循环？

Question

如何通过这些代码使用for循环？

$(".open-slide").on('click', function(){
var ddd = ['/cheetahadmin/Templates/uploads/Agency/slides/agenc-contact.jpg', '/cheetahadmin/Templates/uploads/Agency/slides/agency-about.jpg', '/cheetahadmin/Templates/uploads/Agency/slides/agency-index.jpg'];
$.fancybox.open([

                for(var i=0; i<=ddd.length; i++){
                    {
                        src  : ddd[i],
                        opts : {
                            caption : 'Example Caption'
                        }
                    },
                }

            ], {
                loop : false,
                toolbar: false
            });
        });

这段代码给我一个错误：Uncaught SyntaxError：意外的令牌，我知道我有错，但我不知道如何解决这个问题。

Answer 1

由于对array.map的调用返回另一个数组，并且您的start数组很容易映射到您想要的数组，因此可以使用.map解决方案，而不是先构建数组并将其存储到另一个变量中，然后调用.open传递变量作为参数。

$.fancybox.open(ddd.map(function (el) {
  return {
    src: el, 
    opts: { 
      caption: 'Example Caption' 
    }
  };
}), {
  loop : false,
  toolbar: false
});

Answer 2

您可以创建一个新的对象数组，如：

var arrOptions = [];
for (var i = 0; i < ddd.length; i++) {
  arrOptions.push({
    src: ddd[i],
    opts: { caption: 'Example Caption' }
  });
}

然后将其传递给fancybox，如：

$.fancybox.open(arrOptions, {
  loop: false,
  toolbar: false
});

Answer 3

您希望将字符串数组转换为对象数组。你在做什么不会产生那种。您需要将代码拉出数组。现在你可以使用for循环并推送来构建一个数组

var ddd = ['/cheetahadmin/Templates/uploads/Agency/slides/agenc-contact.jpg', '/cheetahadmin/Templates/uploads/Agency/slides/agency-about.jpg', '/cheetahadmin/Templates/uploads/Agency/slides/agency-index.jpg'];

var formatted = [];
for (var i=0; i<ddd.length; i++) {
  formatted.push({
    src: ddd[i],
    opts: {
      caption: 'Example Caption'
    }
  })
}
console.log(formatted)

但大多数人会跳过for循环并使用map（）

var ddd = ['/cheetahadmin/Templates/uploads/Agency/slides/agenc-contact.jpg', '/cheetahadmin/Templates/uploads/Agency/slides/agency-about.jpg', '/cheetahadmin/Templates/uploads/Agency/slides/agency-index.jpg'];

var formatted = ddd.map(function(val) {

  return {
    src: val,
    opts: {
      caption: 'Example Caption'
    }
  }

});

console.log(formatted);

那你就做

$.fancybox.open(formatted, { /* other code */ });