一名前端工程师的笔记分享！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 替换成 best
var reg =/good/g;
alert( str.replace(reg,"best") )
ES5
严格模式：在函数的开头或程序的开头加 "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)
数组方法forEach
arr.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和Map
Set集合--- 特性：自动去重 ：
定义一个集合：
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);
}