Вложенный массив Javascript с вложенными циклами

Question

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

var data = [

    {title:'Row Title 1'},

    [{leftCol:'Some text for left column',rightCol:'Some text for right column'},
    {leftCol:'Some text for left column',rightCol:'Some text for right column'},
    {leftCol:'Some text for left column',rightCol:'Some text for right column'}],

    {title:'Row Title 2'},

    [{leftCol:'Some text for left column',rightCol:'Some text for right column'},
    {leftCol:'Some text for left column',rightCol:'Some text for right column'},
    {leftCol:'Some text for left column',rightCol:'Some text for right column'}]

    ];

    for (var i=0, j=data.length; i < j; i++) {

        if(data[i].title != null){
            document.write('<b>'+data[i].title+'</b><br />');
        }

        for(p=0,plen=data[i].length; p<plen;p++){
            document.write('<p style="background:#eee;">'+data[i][p].leftCol+'</p>');
            document.write('<p>'+data[i][p].rightCol+'</p>');       
        }
    }

Answer 1

Структура, которую вы используете, должна быть примерно такой:

var data = [

    {title:'Row Title 1', contents: [

      {leftCol:'Some text for left column',rightCol:'Some text for right column'},
      {leftCol:'Some text for left column',rightCol:'Some text for right column'},
      {leftCol:'Some text for left column',rightCol:'Some text for right column'}

    ],

    // ...
];

Таким образом, каждая строка является объектом с атрибутом title и атрибутом содержимого.Ваш цикл будет выглядеть так:

for (var i=0, j=data.length; i < j; i++) {

    if(data[i].title != null){
        document.write('<b>'+data[i].title+'</b><br />');
    }

    for(var p=0, plen=data[i].contents.length; p < plen; p++){
        document.write('<p style="background:#eee;">'+data[i].contents[p].leftCol+'</p>');
        document.write('<p>'+data[i].contents[p].rightCol+'</p>');       
    }
}

Answer 2

Если вы хотите сделать свой код более надежным, следуйте этим рекомендациям:

1. Всегда лучше инициализировать циклы, например, если у вас есть длина: for (var i = 0, l = length; l--; i++).Причину этого синтаксиса более подробно объясняет Николас С. Закас .
2. Всегда храните переменные, к которым обращались несколько раз, в локальной переменной.Это ускоряет выполнение (например, idata = data[i];).
3. Старайтесь не печатать как можно дак (например, data[i].title != null).Сначала проверьте тип переменной.Это медленнее, но код легче понять и поддерживать.Попробуйте использовать функцию typeOf внизу поста (например, typeOf(idata) === "Object").
4. Обычно всегда лучше использовать === вместо == и !== вместо !=, потому что онине выполняйте приведение типов, которое может привести к неожиданным результатам.
5. Вместо создания нескольких встроенных стилей создайте отдельный класс .greyBackground { background-color: #EEEEEE; } и установите className каждого абзаца leftCol на greyBackground.
6. Избегайте использования document.write.Это медленно, вызывает перекомпоновку документа и останавливает загрузку ресурсов во время загрузки страницы.Лучший способ создать динамический контент с использованием JavaScript - это использовать метод document.createDocumentFragment, как я объясню ниже.
7. Всегда лучше создавать узлы в JavaScript самостоятельно.Если вы используете строку в document.write или element.innerHTML, то браузер все равно анализирует строку и преобразует ее в узлы.Таким образом, использование этого метода медленнее.

Вот как я написал бы ваш JavaScript:

var data = [
    "Row Title 1",
    {
        "leftCol": "Some text for left column",
        "rightCol": "Some text for right column"
    }, {
        "leftCol": "Some text for left column",
        "rightCol": "Some text for right column"
    }, {
        "leftCol": "Some text for left column",
        "rightCol": "Some text for right column"
    },
    "Row Title 2",
    {
        "leftCol": "Some text for left column",
        "rightCol": "Some text for right column"
    }, {
        "leftCol": "Some text for left column",
        "rightCol": "Some text for right column"
    }, {
        "leftCol": "Some text for left column",
        "rightCol": "Some text for right column"
    }
];

function typeOf(value) {
    if (value === null) {
        return "null";
    } else if (typeof value === "undefined") {
        return "undefined";
    } else {
        return Object.prototype.toString.call(value).slice(8, -1);
    }
}

var element;
var fragment = document.createDocumentFragment();
var idata;

for (var i = 0, l = data.length; l--; i++) {
    idata = data[i];
    if (typeOf(idata) === "Object") {
        element = document.createElement("p");
        element.className = "greyBackground";
        element.appendChild(document.createTextNode(idata.leftCol));
        fragment.appendChild(element);

        element = document.createElement("p");
        element.appendChild(document.createTextNode(idata.rightCol));
        fragment.appendChild(element);
    } else {
        element = document.createElement("b");
        element.appendChild(document.createTextNode(idata));
        fragment.appendChild(element);

        element = document.createElement("br");
        fragment.appendChild(element);
    }
}

document.body.appendChild(fragment);

Протестируйте мою и вашу страницу.По всей вероятности, мой будет выполняться быстрее.Если у вас есть какие-либо сомнения, не стесняйтесь спрашивать меня.Ура!=) * * Тысяча сорок-одна