JS日常习题

对于以下HTML按字符重新排序DOM节点：

<ol id="test-list">
    <li class="lang">Scheme</li>
    <li class="lang">JavaScript</li>
    <li class="lang">Python</li>
    <li class="lang">Ruby</li>
    <li class="lang">Haskell</li>
</ol>

解法一：清空ol内内容后使用排序好的数组进行append添加【要点1：使用Array.from()转化为数组。要点2：使用innerText获取标签内容（其实不用也可以）】PS.为啥这里不清空也可以。。

var list = document.getElementById("test-list");
var arr = Array.from(list.children);
arr.sort(function(x, y) {
   return x.innerText > y.innerText;
});
for(let i = 0; i < arr.length; i++) {
    list.appendChild(arr[i]);
}

解法二：使用冒泡法直接操作ol内内容【原理：要插入的节点若已存在于当前的文档树，则此节点首先会从原先的位置删除，再插入到新的位置】

var parent = document.querySelector('#test-list');
var lis = parent.children;//注意，这里不是.child，因为要获取所有孩子

for(i = 0; i < lis.length - 1 ; i++) {
    for (j = i + 1; j< lis.length; j++) {
        if(lis[i].innerText > lis[j].innerText)
        {
           parent.insertBefore(lis[j], lis[i]);
        }
    }
}

参考：廖雪峰-插入DOM

                                                                           手动分割线                                                                           

jQuery处理表单选中逻辑实现

<form id="test-form" action="test">
    <legend>请选择想要学习的编程语言：</legend>
    <fieldset>
        <p><label class="selectAll"><input type="checkbox"> <span class="selectAll">全选</span><span class="deselectAll">全不选</span></label> <a href="#0" class="invertSelect">反选</a></p>
        <p><label><input type="checkbox" name="lang" value="javascript"> JavaScript</label></p>
        <p><label><input type="checkbox" name="lang" value="python"> Python</label></p>
        <p><label><input type="checkbox" name="lang" value="ruby"> Ruby</label></p>
        <p><label><input type="checkbox" name="lang" value="haskell"> Haskell</label></p>
        <p><label><input type="checkbox" name="lang" value="scheme"> Scheme</label></p>
        <p><button type="submit">Submit</button></p>
    </fieldset>
</form>

实现以下逻辑：当用户勾上“全选”时，自动选中所有语言，并把“全选”变成“全不选”；当用户去掉“全不选”时，自动不选中所有语言；当用户点击“反选”时，自动把所有语言状态反转（选中的变为未选，未选的变为选中）；当用户把所有语言都手动勾上时，“全选”被自动勾上，并变为“全不选”； 当用户手动去掉选中至少一种语言时，“全不选”自动被去掉选中，并变为“全选”。

'use strict';

var
    form = $('#test-form'),
    langs = form.find('[name=lang]'),
    selectAll = form.find('label.selectAll :checkbox'),
    selectAllLabel = form.find('label.selectAll span.selectAll'),
    deselectAllLabel = form.find('label.selectAll span.deselectAll'),
    invertSelect = form.find('a.invertSelect');

// 重置初始化状态:
form.find('*').show().off();
form.find(':checkbox').prop('checked', false).off();
deselectAllLabel.hide();
// 拦截form提交事件:
form.off().submit(function (e) {
    e.preventDefault();
    alert(form.serialize());
});

逻辑代码：

selectAll.click(function(){
  if(selectAll.is(':checked')){
    selectAllLabel.hide();
    deselectAllLabel.show();//因为是重复操作，所以两个都不能忘
    langs.prop('checked',true);
  }else{
  selectAllLabel.show();
  deselectAllLabel.hide();
  langs.prop('checked',false);
  }
});
invertSelect.click(function(){
  langs.map(function(){
    $(this).prop('checked',!$(this).is(':checked'));//this包装成jquery对象才能使用prop
  });
});
langs.click(function(){ //如果仅仅只是ifelse而没有langs.click的话无法起监视事件作用
  if(langs.filter(':checked').length===langs.length){
    selectAll.prop('checked',true);
    selectAllLabel.hide();
    deselectAllLabel.show();
  }else{
    selectAll.prop('checked',false);
    selectAllLabel.show();
    deselectAllLabel.hide();
}});

参考： 廖雪峰-jQuery事件

----------------------------------------------------------------------------------------------------------------------------------

有关let和var

代码如：

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };}

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}

问两者执行完后控制台输出a[3]()的结果分别是什么？

答：前者为10，后者为3.

解释：可将var视为唯一的一个变量只占有唯一一处内存空间，因此不论多少次循环，在最后输出a[x]()时都会只显示最终结果的那个i；而let在每次循环都会新占用一个内存空间进行存放每次刷新的数值，所以输出结果时从不同的内存空间进行取值，结果自然不一样。

再如：

for (var i=0;i<10;i++) {
  a[i]=(function(i){
    return function() {
      console.log(i);
    })(i);
}

此处尽管用的是唯一一处内存空间占有的var定义变量，但是在循环体内是一个立即执行函数，当i传到这个函数里时就变成了这个函数的局部变量，会跟着新的函数变量占用不同的内存空间，即此处函数内部的局部变量有不同的内存空间存放其值。故此处若输出a[3]()结果则是3.【写到这里突然发现了解JS运行时对内存的使用情况对理解作用域闭包啥的很管用。。】

参考：SF