Блог

Мне удалось сгенерировать серию элементов списка на основе одного указанного массива внутри матрицы (т. Е. Массива внутри массива).

Я хотел бы иметь возможность передавать переменную (представляющую массив) в функцию, чтобы она могла выдавать неупорядоченный список, заполненный элементами списка на основе переданного в него массива.

Проблемы:

• Функция работает только с одним массивом одновременно
• Он также создает запятые в разметке (предположительно, потому что преобразует массив в строку)

Решение должно:

• предположим, что неупорядоченный список не существует в DOM
• иметь возможность принимать различные массивы, переданные в него ( options[0] , options[1] и т.д.)
• создайте список-элементы без запятых

JavaScript:

 var options = [
        set0 = ['Option 1','Option 2'],
        set1 = ['First Option','Second Option','Third Option']
    ]

function makeUL(){
    var a = '<ul>',
        b = '</ul>',
        m = [];

    // Right now, this loop only works with one
    // explicitly specified array (options[0] aka 'set0')
    for (i = 0; i < options[0].length; i  = 1){
        m[i] = '<li>'   options[0][i]   '</li>';
    }

    document.getElementById('foo').innerHTML = a   m   b;
}

// My goal is to be able to pass a variable
// here to utilize this function with different arrays
makeUL();
  

jsFiddle

Прежде всего, не создавайте HTML-элементы путем конкатенации строк. Используйте манипуляции с DOM. Это быстрее, чище и менее подвержено ошибкам. Это само по себе решает одну из ваших проблем. Затем просто позвольте ему принять любой массив в качестве аргумента:

 var options = [
        set0 = ['Option 1','Option 2'],
        set1 = ['First Option','Second Option','Third Option']
    ];

function makeUL(array) {
    // Create the list element:
    var list = document.createElement('ul');

    for (var i = 0; i < array.length; i  ) {
        // Create the list item:
        var item = document.createElement('li');

        // Set its contents:
        item.appendChild(document.createTextNode(array[i]));

        // Add it to the list:
        list.appendChild(item);
    }

    // Finally, return the constructed list:
    return list;
}

// Add the contents of options[0] to #foo:
document.getElementById('foo').appendChild(makeUL(options[0]));
  

Вот демонстрация. Возможно, вы также захотите отметить, что set0 и set1 просачиваются в глобальную область; если вы хотели создать своего рода ассоциативный массив, вам следует использовать объект:

 var options = {
    set0: ['Option 1', 'Option 2'],
    set1: ['First Option', 'Second Option', 'Third Option']
};
  

И получите к ним доступ следующим образом:

 makeUL(options.set0);
  

Каковы недостатки следующего решения? Кажется, это быстрее и короче.

 var options = {
    set0: ['Option 1','Option 2'],
    set1: ['First Option','Second Option','Third Option']
};

var list = "<li>"   options.set0.join("</li><li>")   "</li>";
document.getElementById("list").innerHTML = list;
  

Вы также можете рассмотреть следующее решение:

 let sum = options.set0.concat(options.set1);
const codeHTML = '<ol>'   sum.reduce((html, item) => {
    return html   "<li>"   item   "</li>";
        }, "")   '</ol>';
document.querySelector("#list").innerHTML = codeHTML;