一名前端工程师的自学之路！Js篇（03-07更新）

正则表达式

作用： 前端往往会有大量的数据校验工作，可以通过正则表达式对象提高工作效率

正则表达式定义

var reg = /表达式/修饰符;正则表达是有 普通字符 和 特殊字符 组成的 ， 组成的这个正则表达式 就可以做一些校验工作

正则表达式中的特殊字符

^ : 表示正则表达式的开始
$ : 表示正则表达式的结束
+ : 表示前面紧挨着的字符至少出现1次 没有上限 等价 {1,}
? : 表示前面紧挨着的字符至少出现0次，至多出现1次 等价 {0,1}
* : 表示前面紧挨着的字符至少出现0次 没有上限 等价{0,}
. : 表示任意一个字符
: 表示转义字符 . 表示 . \ 表示
d : 表示 0-9 之间的任意一个数字 等价 [0-9]
D : 表示非数字 （表示除了0-9之间的任意一个字符） 等价 [^0-9]
w : 表示一个单词字符（字母、数字、下划线中的任意一个） 等价 [a-zA-Z0-9_]
W : 表示一个非单词字符
s : 表示空白字符（空格、tab）
S : 非空白字符
m,n}这里的m和n为正整数 m<n 表示括号前面紧挨着的字符至少出现m次 至多出现n次{m} 这里的m表示正整数 表示括号前面紧挨着的字符只能出现m次{m,} 表示括号前面紧挨着的字符至少出现m次 （没有上限）[] 表示括号内的任意一个字符[123abc] 代表123abc中的任意一个字符[a-z] 表示a-z中的任意一个字符[a-zA-Z] 表示任意一个字母[^ ] 表示非 括号内的任意一个字符( ) 优先级最高 一般和 | 连用| 表示或者[\u4e00-\u9fa5] 表示任意一个中文字符[\u2e80-\u9fff] unicode 字符集修饰符：i 不区分大小写g 全局查找m 多行查找

正则表达式的方法

test() 方法 :根据正则表达式规范判断某个字符串是否符合该正则规范，返回一个布尔值用法：reg.test(str);exec() 方法 :用正则表达式在字符串中查找，返回包含该查找结果的一个数组返回的数组长度为1如果查找不到 返回null用法：reg.exec(str) ;例如：var str = "How old are you?";var reg = /[a-z]+/i;//查找字符串中 包含1个以上的小写字母alert(reg.exec(str) );match() 方法 ：使用正则表达式对字符串查找，并将包含的结果作为数组返回。如果match()没找到匹配，返回null.用法：str.match(reg) 参数是一个正则对象说明：查找时，如果正则表达式有修饰符g， 根据正则全局匹配查找查找时，如果正则表达式没有修饰符g， 先根据正则表达式查找一次，返回一个数组，数组后面的其他值是根据正则表达式中的子表达式匹配查找的结果。例如：var str = "How Old Are You?";var reg = /[a-z]+/ig;alert( str.match(reg) );//使用reg规范 查找str ，满足条件 返回一个数组例如：var reg = /<.+>(.*)</.+>/;var str = "<p>sssss</p>";alert( str.match(reg) );search()方法 ：返回与正则表达式匹配的第一个子字符串的位置，如果找到匹配项，返回一个整数，如果没找到，则返回-1。这个用法类似indexOf()方法。用法：str.search(reg);例如：var str = "123 how are you?";var reg = /[a-z]+/;alert( str.search(reg) );replace() 方法 :通过正则表达式替换，返回结果 是原字符串被替换后的新字符串用法： str.replace(正则表达式,要替换的新字符串)如果想实现全局替换，在正则表达式上加一个修饰符 g例如：var str = "good good study,day day up!!!";//将字符串中的good 替换成 bestvar reg =/good/g;alert( str.replace(reg,"best") )

ES
1401f
5

严格模式：在函数的开头或程序的开头加 "use strict"严格模式下的要求：不加var报错"use strict"function fun(){num = 90;alert(num); 报错}fun();八进制被禁用（不能用0开头）"use strict";var num = 070;alert( num ); 报错Arguments与形参不同function fun(x,y){"use strict";//x = 10;arguments[0] = 10;alert(x);alert( arguments[0] == x );}fun(1,2,3);function必须声明在顶层"use strict";if(1){function fun(){alert("hello");}}fun(); 报错Bind 方法 绑定函数中的this指向（通过bind可以改变匿名函数中的this指向）语法：function (){}.bind(target) 此时 this指向了 target例如：var timer = setInterval(function(){//console.log( this );this.style.left = this.offsetLeft + 3 + "px";}.bind(document.getElementById("d")),100)数组方法forEacharr.forEach(function(item){this 指向了 arr},arr)或var arr = [1,2,3,4,5];arr.forEach(function(item){alert(this);}.bind(arr))

ES6

let块级作用域1、let不可以实现变量提升2、let只在某个{}内有效for(let i = 0 ; i < 5 ; i++){alert(i)}alert( i ); 报错if(true){let num = 90;}alert(num); 报错常量const　常量的值定义后就不能再更改为了和普通变量区分开，常量定义时使用大写字母常量一旦被定义，值就不能被更改const PI = 3.14;alert( PI*2*2 );for...of循环 ：遍历值for...in循环 ：遍历键var arr = [1,2,3,4,5];for(var i of arr){console.log(i);}for (var i in arr) {console.log(i);}=>箭头函数：新标准没有参数：() => {函数体}有一个参数item：item => {函数体} 可以省略 ()或(item) => { 函数体 }有多个参数：(x,y) => { 函数体 }例如：//一秒钟后div显示出来/*setTimeout( ()=>{document.getElementsByTagName("div")[0].style.display = "block";},1000 )*/var fun = function (x,y){alert(x + y);}//fun(1,2);//箭头函数/*var fun2 = (x,y) => { return x + y };alert( fun2(1,2) );*//*var fun2 = (x=1,y=2) => { return x + y };alert( fun2() );*/var res = [1,2,3,4,5,6].filter(function(item){return item>3;})var res2 = [1,2,3,4,5,6].filter( item => { return item>3 } )alert( res2 );解构赋值：解析结构进行赋值1、同时定义多个变量传统： var x = 90, y = 80 , z = 70;结构赋值：var [x,y,z] = [90,80,70];2、结构赋值 可以使一个函数返回多个值function fun(){return [1,2];}var [x,y] = fun();实现： 函数实现 计算数组中素数个数 和 素数和，将结果通过 return 返回3、解构赋值可以作用在函数的参数上解构赋值还可以用在函数的参数上function fun2({name,age}){console.log(name);console.log(age);}fun2({"age":23,"name":"xiaoming"});4、结构赋值可以实现两个数的交换不通过 第三个变量 实现两个数的交换var x = 1;var y = 2;[x,y] = [y,x];alert( x );alert( y );或x = x + y;y = x - y;x = x - y;实现冒泡排序：function fun3(arr){for(var i = 0 ; i < arr.length - 1; i ++){for(var j = 0 ; j < arr.length-1-i ; j++){if( arr[j] > arr[j+1] ){[arr[j],arr[j+1]] = [arr[j+1],arr[j]];}}}return arr;}alert( fun3([23,12,4,5,6,90]) );数组的扩展方法 Array.from() 将一个集合转成一个数组对象例如：//取出所有li的内容var list = document.getElementsByTagName("li");var arr = Array.from(list);arr.forEach( function(item){console.log( item.innerHTML );} )arr.forEach( (item) => { console.log( item.innerHTML ) } )字符串模板` `,可以识别变量 也可以识别函数var name = "xiaoming";function fAge(){return 23;}var str = `大家好，我是${name},我今年${ fAge() }`;alert( str );`<li>${变量名称}</li><li>${变量名称}</li>`Set和MapSet集合--- 特性：自动去重 ：定义一个集合：var set = new Set();set.add(12);史上最短的数组去重方法：[...new Set(arr)]map集合 : 值的结构是 键值对var map = new Map();map.set("name","jack")map.set("age",18)map.set("tel","888")for(var value of map){console.log(value);}

我的小程序，自律更自由，如果你也喜欢锻炼的话在这里寻找你的小伙伴吧。