javascript - 陣列的過濾和渲染

Question

var data = [{

    label: '分类一',
    value: '0'
}, {
    label: '分类二',
    value: '1'
}, {
    label: '分类三',
    value: '2'
}, {
    label: '分类四',
    value: '3'
}, {
    label: '分类五',
    value: '4'
}, {
    label: '分类六',
    value: '5'
}]

<p class="text">

<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>

</p>

求教，請問如何能夠最簡單的根據資料裡的value值在 dom 裡渲染出對應的label值？ ？數據是不定的，可能裡面會有十幾二十個

Answer 1

樓上的方式可以做到，但是這樣就相當於每次都生命一個變量，每一次都往.text裡面添加了span節點，操作了DOM，造成很大的開銷！我個人建議用下面這個方式。

var opText= document.querySelector('.text'),var _text="";
data.forEach(function(item){
    //把每一次遍历的label加上节点，再储存在_text上。
    _text += '<span>'+item.label+'</span>';
});
//最后直接把_text赋值到opText.innerHTML上。
opText.innerHTML=_text ;

Answer 2

雷雷

Answer 3

樓上的方法都是可行的，不過前兩中方法在火狐跟chrome下的性能各有優缺點，現在普遍做法上通過創建一個新的空白的文檔片段( DocumentFragment)。

const $container = document.querySelector('.text');
const fragment = document.createDocumentFragment();
data.map(item => {
    let span = document.createElement("span");
    span.textContent = item;
    fragment.appendChild(span);
});
$container.appendChild(fragment);

Answer 4

雷雷