面試題目-遍歷，點選

之前在飢餓谷聽到的一次公開課提到了一個面試題目，問題本身不難，但是裡面提到的思想是很好

實現頁面:

點選click事件的時候上面的東西會實時重新整理，其實不難就是遍歷取事件的改變學習一種es6的程式設計寫法

    <h1>我們要學習<span class="spanText"></span></h1>
    <ul class="box">
        <li>java<input type="checkbox" value="java"></li>
        <li>php<input type="checkbox" value="php"></li>
        <li>web<input type="checkbox" value="web"></li>
    </ul>
    <input type="text" class="iPt"><button class="bTn">新增</button>
複製程式碼

    var spanText = document.querySelector('.spanText')
    var box = document.querySelector('.box')
    var lis = document.querySelectorAll('.box input')
    var iPt = document.querySelector('.iPt')
    var bTn = document.querySelector('.bTn')
複製程式碼

    lis.forEach(item => {
        item.onchange = function() {
            spanText.innerHTML = Array.prototype.filter.call(lis, checks => checks.checked)
                                .map(checks => checks.value)
                                .join(',')
        }
    })
複製程式碼

上述程式碼有著一些es6的方法，如：map,foreach。map和foreach的區別是返回的是否為陣列

關於箭頭函式

    () => 
    () => {}
    區別在於不加{}為return出來
複製程式碼

關於下面的新增是將input框裡面的值賦值，建立新的Node節點。在我們增加在ul子集下面的li並不能合理的執行lis的遍歷，在瀏覽器的控制檯下面列印的lis也是之前的，並不能實施重新整理lis。這個時候我們只能對父集ul標籤進行判斷，進行click事件的做法

    box.onclick = function(e) { 
        console.log(e, this)
        spanText.innerText =[...this.querySelectorAll('input')].filter(checkbox=>checkbox.checked) .map(checkbox=>checkbox.value)
        .join(',') }
        // 首先這裡面的this指向的ul標籤，e指向事件本身
複製程式碼