《javascript高级程序设计》读书小延伸

Posted 2020-06-18 open_wang

 

这本书已经读了几章了，想着试试能不能做出点东西，就简单的练了把手。觉得对于初学者，自己试着练练，效果还不错的。

挥刀要从轻的开始，起初的原因是和同事谈起曾经的逝水年华（小时候干的坏事）时说起了曾经的一篇课文，讲的是一个小朋友如何巧妙地从1到100累加起来的，猛然间我觉得可以用js算出来，说干就干。

function add(){  
    for(var i = 1; i <= 100; i ++){
          var sum = 0;
          sum += i;
    }
    alert(sum);
}
add();

满心期待的点击运行，正打算欢呼之时，看到结果的那一刻整个人都石化了。结果居然是100，真是奇怪，仔细检查了下代码，发现犯了一个低级的错误，原来把sum声明在循环内了，这就相当于每循环一次，sum都被重新赋值为0，导致叠加变为了 sum = 0 + i ，并不是期望的那样，马虎。改吧，于是乎，把sum声明到了循环体外面，再次运行带到了想要的 5050 。

不过这并不能让我有太多的成就感，我们还可以把它变得更加智能。比如我想从2累加到10，那应该怎么办？想了下，加个参数就好了。

function add(a,b){ 
    var sum = 0; 
    for(var i = a; i <= b; i ++){ 
          sum += i;
    }
    alert(sum);//54
}
add(2,10);

 在纸上算了算，确实正确。但是这样我只能在代码中进行修改，能不能把它放到界面上，我想让它变得更加有活性，开始值和结束值要按照我的心情来，想让它是多少就是多少，写程序就是要这么任性。

<input type = "text"  id = "sum">
<input type = "button" value = "叠加" id = "click">

简单的做了一个文本框和一个点击按钮，期望在文本框中输入不同的数字，然后点击得到累加的结果。

var sum = document.getElementById(‘sum‘);
var click = document.getElementById(‘click‘);
click.addEventListener(‘click‘,function add(){
    var number = sum.value.split(",");//将输入的内容转化为数组(默认输入的2个数字用“，”来隔开，比如输入1，3)
    var c = 0;
    var a = number[0];
    var b = number[1];
    for(var i = parseInt(a); i <= parseInt(b); i ++){
         c +=i;
    }
    alert(c);
},false);

 再写的时候第一想到的是获取到文本框中的字符串，然后再将其转换为数组，通过数组拿到想要的值。如果是空格隔开2个数字的话，可以在用“||”继续添加条件，目前我只能做到特定符号隔开的情况，对于随意输入还没有想到很好的解决办法。对于获得文本框中的的数字，可以在split()中使用正则匹配，比如还是“，”隔开的，改为“/,/”，就可以了。当然也可以用正则进行匹配。

var sum = document.getElementById(‘sum‘);
var click = document.getElementById(‘click‘);
click.addEventListener(‘click‘,function add(){
        var pattern = /(\d+),(\d+)/g;
        var c = 0;
        if(pattern.test(sum.value)){
           var a = RegExp.$1;
           var b = RegExp.$2;
    }
        for(var i = parseInt(a); i <= parseInt(b); i ++){
              c +=i;
    }
    alert(c);
},false);

简单的解释下，\d是是匹配的时候查找数字，\d+是匹配至少包含一个数字的字符串，(\d+)是一个捕获组，为了方便进行捕获和赋值。test()函数从字面意思也可看出他是为了检测是否匹配，返回值为true和false，RegExp.$1是获取第一个捕获组，RegExp.$2获取第二个捕获组，这样就很容易得到“，”两边的数字了。

其实无论是用split()还是使用正则，思路是一样的，可能还有更简单的方法，但是目前还没有想到。

这个也可以再继续往下去延伸，比如说我得到这些值后，不去做累加，而是做一些判断条件，就像登录和注册一样。我觉得这样在学习的过程中可以去联想下各种场景，试着写写，不会的就去查，进展可能会快一些。