javascript - penapisan dan rendering tatasusunan

Question

var data = [{

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

<p class="teks">

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

</p>

Sila beritahu saya cara untuk memaparkan nilai label yang sepadan dalam dom berdasarkan nilai dalam data dengan cara yang paling mudah? ? Data tidak pasti, mungkin terdapat lebih daripada sepuluh atau dua puluh di dalamnya

Answer 1

Kaedah di atas boleh dilakukan, tetapi ini bersamaan dengan mendaftarkan pembolehubah setiap kali, menambah nod span pada .text setiap kali dan memanipulasi DOM, yang menyebabkan banyak overhed! Saya secara peribadi mengesyorkan menggunakan kaedah berikut.

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

var container = document.querySelector('.text')
data.forEach(function(item){
    var span = document.createElement('span')
    span.innerHTML = item.label
    span.setAttribute('value', item.value)
    container.appendChild(span)
})

Answer 3

Kaedah di atas semuanya boleh dilaksanakan, tetapi dua kaedah pertama mempunyai kelebihan dan keburukan tersendiri dalam prestasi di bawah Firefox dan Chrome Kini amalan biasa ialah mencipta serpihan dokumen kosong baharu (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

var data = [{
    label: '分类一',
    value: '0'
}, {
    label: '分类二',
    value: '1'
}]

// 根据value获取dataList中对应的项
function getLabelByValue(dataList, value) {
  return dataList.find(function (item) {
    return item.value === value // 这里使用的强等，根据情况可选 ==
  })
}

// 省略DOM操作
let label = getLabelByValue(data, '0') // 分类一