Convert ES6 Javascript для ES5 без трансилера

Question

Я не знаком с новыми условными обозначениями JavaScript ES6 и получил некоторый код, где мне нужно, чтобы он был простым старым JavaScript ES5.

Было бы очень полезно, если бы люди могли помочь с преобразованием этого кода js без использования Babel или любого другого транспилятора.

Нельзя использовать Вавилон, поскольку его нельзя использовать на работе.

Я понимаю, что все «const» могут быть преобразованы в «var», но не уверены в новых функциях стрелок и других элементах.

Пытались преобразования, но получение:

Uncaught ReferenceError: линия не определена

код ES6, что я хотел бы преобразовать в ES5 является:

const data = [{ "rec": "1", "region": "LEFT", "intrface": "Line-1" },{ "rec": "1", "region": "LEFT", "intrface": "Line-2" },{ "rec": "1", "region": "RIGHT", "intrface": "Line-3" },{ "rec": "1", "region": "RIGHT", "intrface": "Line-4" }]; 

const s = Snap("#svg"); 
const height = 40; 
const canvasWidth = 400; 
const lineWidth = 180; 
const rightOffset = canvasWidth/2 - lineWidth; 

const leftLines = data.filter((line) => !isRightLine(line)); 
const rightLines = data.filter(isRightLine); 

leftLines.forEach(drawLine); 
rightLines.forEach(drawLine); 

const numberOfLines = Math.max(leftLines.length, rightLines.length); 
const rectSize = 20; 
const rectangles = []; 

for (let i = 0; i < numberOfLines; i++) { 
    rectangles.push(drawRect(i)); 
} 

function drawLine(data, index) { 
    const {intrface} = data; 
    const isRight = isRightLine(data); 
    const x = isRight ? canvasWidth/2 + rightOffset : 0; 
    const y = height * (index + 1); 
    const stroke = isRight ? 'red' : 'black'; 

    const line = s.line(x, y, x + 180, y); 
    line.attr({ 
    stroke, 
    strokeWidth: 1 
    }); 

    const text = s.text(x + 10, y - 5, intrface); 

    text.attr({ 
    fill: stroke, 
    cursor: 'pointer' 
    }); 

    text.click(() => { 
    console.log('clicked', data); 

    //window.location.href = "http://stackoverflow.com/"; 
    }); 
} 

function isRightLine({region}) { 
    return region === 'RIGHT'; 
} 

function drawRect(index) { 
    const x = canvasWidth/2 - rectSize/2; 
    const y = height * (index + 1) - rectSize/2; 
    const rectangle = s.rect(x, y, rectSize, rectSize); 

    rectangle.attr({ 
    fill: 'black' 
    }); 

    console.log('rr', x, y); 

    return rectangle; 
} 

Answer 1

я буду считать, что поскольку вы не очень хорошо знакомы с es6, вы, вероятно, не очень хорошо знакомы с babeljs.io, который дает вам возможность конвертировать обратно:

Проверьте это link вверх.

"use strict"; 

var data = [{ "rec": "1", "region": "LEFT", "intrface": "Line-1" }, { "rec": "1", "region": "LEFT", "intrface": "Line-2" }, { "rec": "1", "region": "RIGHT", "intrface": "Line-3" }, { "rec": "1", "region": "RIGHT", "intrface": "Line-4" }]; 

var s = Snap("#svg"); 
var height = 40; 
var canvasWidth = 400; 
var lineWidth = 180; 
var rightOffset = canvasWidth/2 - lineWidth; 

var leftLines = data.filter(function (line) { 
    return !isRightLine(line); 
}); 
var rightLines = data.filter(isRightLine); 

leftLines.forEach(drawLine); 
rightLines.forEach(drawLine); 

var numberOfLines = Math.max(leftLines.length, rightLines.length); 
var rectSize = 20; 
var rectangles = []; 

for (var i = 0; i < numberOfLines; i++) { 
    rectangles.push(drawRect(i)); 
} 

function drawLine(data, index) { 
    var intrface = data.intrface; 

    var isRight = isRightLine(data); 
    var x = isRight ? canvasWidth/2 + rightOffset : 0; 
    var y = height * (index + 1); 
    var stroke = isRight ? 'red' : 'black'; 

    var line = s.line(x, y, x + 180, y); 
    line.attr({ 
    stroke: stroke, 
    strokeWidth: 1 
    }); 

    var text = s.text(x + 10, y - 5, intrface); 

    text.attr({ 
    fill: stroke, 
    cursor: 'pointer' 
    }); 

    text.click(function() { 
    console.log('clicked', data); 

    //window.location.href = "http://stackoverflow.com/"; 
    }); 
} 

// you might want to change this - howeverever you will have to change everywhere in the code that calls isRightLine to pass a primitive vs an object. 
function isRightLine(_ref) { 
    var region = _ref.region; 

    return region === 'RIGHT'; 
} 

function drawRect(index) { 
    var x = canvasWidth/2 - rectSize/2; 
    var y = height * (index + 1) - rectSize/2; 
    var rectangle = s.rect(x, y, rectSize, rectSize); 

    rectangle.attr({ 
    fill: 'black' 
    }); 

    console.log('rr', x, y); 

    return rectangle; 
}