繰り返しコードを関数に挿入する：JavaScript

Question

以下の関数add8にはforループがたくさんあります。私はこの質問の目的のためにそれを切り捨てましたが、私のソースコードから私の元々の機能にもっと良いループがあります。見てください：

function select(selector){ 
    return document.querySelectorAll(selector); 
} 

function add8(){ 
    var x = select('[ x ]'), y = select('[ y ]'), 
    x1 = select('[ x1 ]'), y1 = select('[ y1 ]'), 
    x2 = select('[ x2 ]'), y2 = select('[ y2 ]'), 
    cx = select('[ cx ]'), cy = select('[ cy ]'), 
    i = 0, 
    val = 0; 

    for(i = 0; i < x.length; i++){ 
    val = x[ i ].getAttribute('x'); 
    val = Number(val) + 8; 
    x[ i ].setAttribute('x', val); 
    } 
    for(i = 0; i < y.length; i++){ 
    val = y[ i ].getAttribute('y'); 
    val = Number(val) + 8; 
    y[ i ].setAttribute('y', val); 
    }  
    for(i = 0; i < x1.length; i++){ 
    val = x1[ i ].getAttribute('x1'); 
    val = Number(val) + 8; 
    x1[ i ].setAttribute('x1', val); 
    }  
    for(i = 0; i < y1.length; i++){ 
    val = y1[ i ].getAttribute('y1'); 
    val = Number(val) + 8; 
    y1[ i ].setAttribute('y1', val); 
    } 
    // Alot more 'for' loops follow... 
} 

add8(); 

あなたはループのためにこれらに変更する必要が唯一のいくつかの値があることに気づくかもしれない、だから私は、全体のコードAをしながら多くのコードを再利用することができます機能のために必死ですロットは短く簡潔です。

何か

function dynamicFunc(dynamicVar, dynamicStr) { 
    for(i = 0; i < dynamicVar.length; i++){ 
    val = dynamicVar[ i ].getAttribute(dynamicStr); 
    val = Number(val) + 8; 
    dynamicVar[ i ].setAttribute(dynamicStr, val); 
    } 
} 

function add8(){ 
    var x = select('[ x ]'), y = select('[ y ]'), 
    x1 = select('[ x1 ]'), y1 = select('[ y1 ]'), 
    x2 = select('[ x2 ]'), y2 = select('[ y2 ]'), 
    cx = select('[ cx ]'), cy = select('[ cy ]'), 
    i = 0, 
    val = 0; 

    dynamicFunc(x, 'x'); 
    dynamicFunc(y, 'y'); 
    dynamicFunc(x1, 'x1'); 
    dynamicFunc(y1, 'y1'); 

    // Alot more follow... 
} 

add8(); 

のように、これらのforループを自動化するが、以下の例では、動作するようには思えません。私はJSにはあまりにも優れていないと私はここで少しの助けが必要だと思う。これどうやってするの？ありがとうございました。

注：私は私のソース・コードにSVGの多くのを扱っています、したがって属性x、y、x1などが...私はJavaScriptで選択されています。

追加注：ここではvanilla JSを使用しています。

Answer 1

使用して、いくつかのES6機能：

function add8(){ 
    var attributes = ['x', 'y', 'x1', 'y1']; // all the attributes you care about 
    attributes.forEach(attribute => { 
    [...select(`[${attribute}]`)].forEach(el => { 
     el.setAttribute(attribute, Number(el.getAttribute(attribute)) + 8); 
    }); 
    }); 
} 

より冗長：

function add8(){ 
    var attributes = ['x', 'y', 'x1', 'y1']; // all the attributes you care about 
    var i, j; 
    // loop over the attributes: 
    for (i = 0; i < attributes.length; i++) { 
    var attribute = attributes[i]; 
    var elements = select('[' + attribute + ']'); 
    // loop over the selected elements: 
    for (j = 0; j < elements.length; j++) { 
     var element = elements[i]; 
     var val = Number(el.getAttribute(attribute)) + 8; 
     el.setAttribute(attribute, val); 
    } 
    } 
}