Повторяющийся шаблон в JavaScript

Question

Как бы я повторил рисунок преобразования ниже?

BoxesFx.prototype._setTransforms = function() {
    this.transforms = {
        'effect-1' : {
            'next' : [
                'translate3d(0, ' + (win.height/2+10) + 'px, 0)', 
                'translate3d(-' + (win.width/2+10) + 'px, 0, 0)', 
                'translate3d(' + (win.width/2+10) + 'px, 0, 0)',
                'translate3d(0, -' + (win.height/2+10) + 'px, 0)', 
            ],
            'prev' : [
                'translate3d(' + (win.width/2+10) + 'px, 0, 0)',
                'translate3d(0, ' + (win.height/2+10) + 'px, 0)',
                'translate3d(0, -' + (win.height/2+10) + 'px, 0)',
                'translate3d(-' + (win.width/2+10) + 'px, 0, 0)'
            ]
        }}}

.

в основном, я пытаюсь иметь:

'translate3d(0, ' + (win.height/2+10) + 'px, 0)', 
'translate3d(-' + (win.width/2+10) + 'px, 0, 0)', 
'translate3d(' + (win.width/2+10) + 'px, 0, 0)',
'translate3d(0, -' + (win.height/2+10) + 'px, 0)'

.

Повторяйте количество раз, мы можем сказать, что будет 3, без копирования и вставки в 3 раза.Есть ли способ дублировать массив?Я чувствую, что я могу запутать .. Надеюсь, я хорошо объяснил это хорошо

Answer 1

Просто определите массив снаружи

var translate =[
   'translate3d(0, ' + (win.height/2+10) + 'px, 0)', 
   'translate3d(-' + (win.width/2+10) + 'px, 0, 0)', 
   'translate3d(' + (win.width/2+10) + 'px, 0, 0)',
   'translate3d(0, -' + (win.height/2+10) + 'px, 0)', 
];

BoxesFx.prototype._setTransforms = function() {
    this.transforms = {
        'effect-1' : {
            'next' : translate,
            'prev' : translate
        }}}

.

Две массивы, которые вы одинаковы, но я предполагаю, что они могут быть, так как вы не можете ссылаться на массив дважды и получить две совершенно разные массивы?

Если вам нужна фактическая новая копия массива каждый раз, вы можете сделать

'next' : translate.slice(0)

.

вместо этого