面试题目-遍历，点击

之前在饥饿谷听到的一次公开课提到了一个面试题目，问题本身不难，但是里面提到的思想是很好

实现页面:

点击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指向事件本身