JS常用点

以下的内容均是在学习名为“守候”的博主在sementfault分享的文章，过程中自己有些地方没有理解到的和开始不懂的和容易错误的地方，通过调试理解后，记录在这里。附上该文章地址是https://segmentfault.com/a/1190000010225928，里面有许多实用的方法。

一、不可避免地用到的正则表达式
1.关于$1…..9

看到$2的时候，惊觉自己看不懂。查找之后，对大家的描述始终不能理解，但是理解了之后，再回头去看大家的解释说得确实很对。就是这么纠结！ 把看到的小程序小小地改动了一下（哈哈，换了一首自己比较喜欢的现代诗），              $ 1代表正则表达式匹配到的第一个子正则表达式；              $2代表正则表达式匹配到的第二个子正则表达式；              ...... 

  theObj.innerHTML=content.replace(Reg,"<span>$1</span>");//对匹配到的正则表达式，替换为第一个子表达式

效果如下图所示，要匹配的正则表达式为（你）（的），因此会首先找出所有的“你的”，再将“你的”替换为第一个正则表达式“你”，并设置字体颜色为红色。

接着将替换的内容换做$2：

theObj.innerHTML=content.replace(Reg,"<span>$2</span>");//对匹配到的正则表达式，替换为第一个子表达式

ok，验证结束！本例过程中，有对html标签进行过滤。原因是由于我们在选择到要选择的值时，为其增加了一个span标签，所以需要避免下一次操作时，上一轮的选择状态不会仍然存在。

//html标签的正则表达式,[^>]表示尖括号中间的内容/<\/?[^>]*>/            

二. 数组迭代方法
1.map( ) ：对数组中每一项遍历，可指定运行的函数，返回每次函数调用的结果所组成的数组。

2.filter( )：同理也是遍历数组，可给每一项指定运行函数，每次返回值是返回拿到值为true的项，因此最终返回是一个由返回项值为true的数组成员所组成的新数组。

3.every和some
（1） every( )：同理，遍历数组，且对于指定的函数，只有当每一项执行函数的返回值为true，才返回true；
（2）some( )：同理，遍历数组，却对于指定函数，只要任一项执行该函数时返回值为true，则最终函数返回值为true；
eg：

4.forEach( )
对数组中的每一项运行给定函数，这个方法没有返回值 ；

5.reduce( ) ！！！每次只能接受两个参数
作用效果和原理就是[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)，累加计算

6.finde( )和findeIndex( )
（1）find( ):返回符合条件（条件也是在函数中调用）的数组第一个元素；
（2）findIndex( ):返回符合条件（条件也是在函数中调用）的数组第一个元素的位置索引（从0开始）；
三、实用小方法
1.字符串大小写切换（源码详见原博主文章，地址见本文开始）
在使用replace( )方法时，第二个参数为匿名函数，且有多个参数。

switch (type) {    case 1:        return str.replace(/^(\w)(\w+)/, function (v, v1, v2, v3, v4) {            console.log("v=",v);            console.log("v1=",v1);            console.log("v2=",v2);            return v1.toUpperCase() + v2.toLowerCase();        });    case 2:        return str.replace(/^(\w)(\w+)/, function (v, v1, v2, v3, v4) {            console.log("vv=",v);            console.log("v11=",v1);            console.log("v22=",v2);            console.log("v33=",v3);            console.log("v44=",v4);            return v1.toLowerCase() + v2.toUpperCase();        });    case 3:        return ToggleCase(str);    case 4:        return str.toUpperCase();    case 5:        return str.toLowerCase();    default:        return str;}       var str = "aA_SS_AD*dM";console.log(changeCase(str,1));console.log(changeCase(str,2));

打印结果：

分析后，发现，第二个参数为函数时，其实有三个参数是被确定的：
（1）参数1：匹配到的字符串；
（2）倒数第二个参数：匹配到的字符串中的第一个字符在原字符串中的索引位置；
（3）最后一个参数：原字符串；

而中间可以有多个参数，分别代表匹配到的字符串中，第一个子表达式的内容、第二个、第三个……上面的例子中，第一个子表达式，表示包括下划线的所有字母的字符。
故：调用函数的第一种处理时（首字母大写），明显可以看到v是匹配到的字符串，v1是匹配字符串中第一个字表达匹配到的字符a，v2是……第二个子表达式匹配到的字符b,v3匹配第一个字符在原字符中的位置索引（从0开始）,v4则为原表达达式！
！！！值得注意的是：
（1）当字符串后部分存在不识别的字符时，正则匹配时自动忽略后面，例如上面打印输出的部分，v只截取了*之前的部分。
（2）只有通过正则表达式成功匹配时，才会执行后面的匿名函数，否则不会执行。验证如下：将字符串首字母改成*，因为匹配不成功，因此replace（）方法返回值为原字符串本身。