其它

css3、h5的api(排除canvas)
canvas

less、sass要用，但不用会复杂的东西，简单的就可以了，一般工作只用到简单的sass功能，虽然它提供了很多很全的功能
变量、嵌套规则，没必要弄得那么透彻
设计模式，懂设计模式是不够的，要了解为什么要这么写，这么些的好处是什么
其次是函数编程
这是为了模块化
es6
这些都是js，多花时间在js本身上面，其它的东西比较简单，js是贯彻整个前端的
其它的东西，只要能够把它做出来，案例只要把它弄明白了，弄清楚了就可以了，不需要研究api是怎么做出来的，怎么实现的，这些东西等着进公司慢慢去弄就行了

正则

既简单又难的东西，简单因为只是简单的逻辑，难因为要用简单的逻辑去实现效果，去实现比较复杂的效果，很像css、html就那么点api、东西，组合起来就很复杂，实现起来就很复杂。需要不断练习，需要看别人怎么写，需要掌握理解，不需要去背，php、java也可以用，不限语言
一定要理解，一定不要去背

转义

转换->转换意义 改变意义
转义符号 转义字符
转义符号\ 转义字符+字符 \字符

  1. var str="我是一名"牛逼"的程序员";
  2.   console.log(str);

image.png
image.png
有歧义，歧义对人类而言，对计算机而言没有歧义，一切都需要是确定的

  1.     var v="牛逼"
  2.     var str="我是一名"+v+"的程序员";
  3.     console.log(str)

image.png
可以打印，字符串拼接需要+
如果+少了就会报错
image.png
image.png

  1.     var str = "我是一名"
  2.     牛逼
  3.     "的程序员";

格式化之后的代码
计算机认为 牛逼是变量，字符串 变量 字符串，但并没有字符串拼接的+号，所以会报语法错误
js先进行语法解释，再进行文本输出，先进行语法解释，再进行文本输出
例子：看见”我是一名”，看见双引号两个，把其解释为字符串， “的程序员”字符串，牛逼变量，但它们之间没有加+号，不合语法，所以会报语法错误，因为报错，而不输出字符串
如果直接进行文本输出，再进行语法解释，那样应该输出字符串

  1.     var str="我是一名\"牛逼\"的程序员";
  2.     console.log(str)

image.png
\”是转义字符，是计算机语言，能被计算机正确理解的语言，把“转义掉了，计算机不会错误理解
在要转义的内容前加转义符号\

  1.     var str="我是一名\牛逼\的程序员";
  2.     console.log(str)
  3.     str="我是一名\\牛逼\\的程序员";
  4.     console.log(str)

image.png

  1.     var str = "我是一名\n牛逼\n的程序员";
  2.     document.write(str);
  3.     console.log(str);

image.png
image.png
\n ,\r,\t都是系统级别的，给编辑系统用的，html是纯文本的，不是编辑系统，在html上面编辑不了
在vscode中换行，系统会给文本后面加\n

为什么有空格，因为html识别不了\n，认为占用了空间，即使有两个空格、多个空格都是显示一个空格

系统

\n 换行在不同系统的不同表示
window \r\n
mac \r
linux \n

\t 制表符

  1. <div></div>
  2. <script !src="">
  3.     var str = '<h1>小野老师</h1><h2>我主要教你们JavaScript系列课程</h2><h3>我会帮助你们成为牛逼的程序员。</h3>';
  4.     var wrap=document.getElementsByTagName('div')[0];
  5.     wrap.innerHTML=str;
  6. </script>

image.png
image.png
image.png
js默认不允许字符串多行的

  1. <div></div>
  2. <script !src="">
  3.     var str = '<h1>小野老师</h1>' +
  4.         '<h2>我主要教你们JavaScript系列课程</h2>' +
  5.         '<h3>我会帮助你们成为牛逼的程序员。</h3>';
  6.     var wrap=document.getElementsByTagName('div')[0];
  7.     wrap.innerHTML=str;
  8. </script>

image.png

  1. <div></div>
  2. <script !src="">
  3.     var str = '<h1>小野老师</h1>\
  4.         <h2>我主要教你们JavaScript系列课程</h2>\
  5.         <h3>我会帮助你们成为牛逼的程序员。</h3>';
  6.     var wrap=document.getElementsByTagName('div')[0];
  7.     console.log(str);
  8.     wrap.innerHTML=str;
  9. </script>

image.png
image.png
+多个空格，转义成多个空格

正则表达式

RegExp=regular expression
好的公司说英文比较多

对字符串操作的一种逻辑公式，什么叫逻辑公式，有一个逻辑，这个逻辑是对指定字符串内容的检索，这个逻辑要用一种方式形成规则，让程序调用规则，匹配检索符合规则的内容，类比搜索

正则表达式是带有逻辑感的，它不是单独的字符串，它是编程的逻辑公式，什么是公式，它提供了一系列的语法来写这个东西，这些语法组合起来形成了公式，这些公式可以同过逻辑去不断的变化它
有了逻辑有了公式，有点像之前所学的数学，数学公式就那么几个，即使把公式给你，可以查找，也不一定会做，原因是逻辑不行，有公式没有逻辑，学不会数学，有逻辑没公式也学不好数学，成不了才，只有会了公式，逻辑又强才可以成才，公式是摆在这的，可以被也可以查，逻辑就需要不停的练习，不停的思考，长时间的累积

用途：处理字符串

正则表达式是一个对象

  1. <script !src="">
  2.     var obj=new Object();
  3.     var reg=new RegExp()
  4. </script>
  1.     var reg=new RegExp('is'),
  2.         str='This is a test';
  3.     console.log(reg.test(str));//true

大些IS就是false
字符串片段 大小写默认敏感 连续

  1.     //ignore case忽略大小写
  2.     var reg=new RegExp('IS','i'),
  3.         str='This is a test';
  4.     console.log(reg.test(str));//true

g global

  1.   var reg=new RegExp('IS','gi'),
  2.         str='This is a test.Test is important.';
  3.     console.log(reg.test(str));//true
  4.     console.log(str.match(reg));

字面量

  1.   var obj = {};
  2.     var arr = [];
  3.     var reg = /test/i;
  4.     // var reg = /test/gi;
  5.     var str = 'This is a test.Test is important.';
  6.     console.log(reg.test(str));//true
  7.     console.log(str.match(reg))//

image.png
正则字面量

  1.    var reg = /^test/gim;
  2.     var str = 'This is a test.\nTest is important.';
  3.     console.log(reg.test(str));//true
  4.     console.log(str.match(reg))//Test

m：multi-line多行
^开头，匹配开头出现的
这是举个例子，以后会详细讲的

两种用那种好？
字面量。不能这么说，因为有些地方不能用字面量

  1. var v = 'Test';
  2. // var reg=/v/gi;
  3. var reg = new RegExp(v, 'i');
  4. var str = 'This is a test';
  5. console.log(reg.test(str));//true

v是个变量，/v/不能识别变量v，不能用字面量，只能用对象的方式新建

  1. var reg=/test/;
  2. var newReg=new RegExp('test');
  4. console.log(reg,newReg);// /test/ /test/
  6. reg.a=1;
  7. console.log(newReg.a);//undifined

image.png

  1.     var reg = /test/;
  2.     var newReg = RegExp('test');
  3.     console.log(reg, newReg);// /test/ /test/
  4.     reg.a = 1;
  5.     console.log(newReg.a);//undifined
  1.     var reg = /test/;
  2.     var newReg = RegExp(reg);
  4.     console.log(reg, newReg);// /test/ /test/
  6.     reg.a = 1;
  7.     console.log(newReg.a);//1

RegExp(reg)拿的正则的引用，是一个对象，前拷贝

  1.     var reg = /test/;
  2.     var newReg =new RegExp(reg);
  4.     console.log(reg, newReg);// /test/ /test/
  6.     reg.a = 1;
  7.     console.log(newReg.a);//undefined

new RegExp(reg)新建了对象，是不同的对象，深拷贝

修饰符、表达式

i ignore case忽略大小写
g global全局匹配
m multi-line多行匹配

[]

表达式[]，[]是可以匹配的范围

  1.     var str='0987wefjh0e0r912gj-0werfj',
  2.         reg=/[1234567890][1234567890][1234567890]/g;
  3.     console.log(str.match(reg));

image.png
因为是三个[]所以是三个数字，098匹配了，不会再匹配98了，不会匹配987

  1.     var reg=/[wx][xy][z]/g,
  2.         str='wxyz';
  3.     console.log(str.match(reg));//["xyz"]

wx是从w、x两个，中间的一个，二选一，[][][]三个
[z]一选一

  1.     var str='fiksod090Dg0erGEOGIV-G345;Lgf-',
  2.         reg=/[0-9][A-Z][a-z]/g;
  3.     console.log(str.match(reg));//0Dg
  1.     var str='fiksod090Dg0erGEOGIV-G345;Lgf-',
  2.         reg=/[0-9A-za-z][A-Z][a-z]/g;
  3.     console.log(str.match(reg));

0-9A-Za-z 0-9A-z 0-z 0-Z这些都可以

  1.     var str='fiksod090Dg0erGEOGIV-G345;Lgf-',
  2.         reg=/[^;][A-Z][a-z]/g;
  3.     console.log(str.match(reg));//0Dg

[]表达式里面的^是非的意思

  1.     var str='234siafdgosafdigj123sdfgsoarg',
  2.         reg=/123|234/g;
  3.         // reg=/(123|234)/g;
  4.     console.log(str.match(reg));//234 123
  1.     var str='234siafdgosafdigj123sdfgsoarg',
  2.         reg=/123|234/g;
  3.         // reg=/(123|234)/g;
  4.         // reg=/(123|234)[s-z]/g;//234s,123s
  5.         // reg=/123|234[s-z]/g;//234s,123
  6.     console.log(str.match(reg));//234 123

（）优先级，算成一起的

\w

元字符 正则使用的转义字符
\w===[0-9A-z_];
\W===[^\w]; 不是上面的那个区间的字符

  1.     var reg=/\wab/g,//4ab
  2.     // var reg=/\Wab/g,//null
  3.     // var reg=/\W/g,//- % &三个
  4.         str='234abc-%&';//4ab
  5.     console.log(str.match(reg));
  1.     var reg=/[\w][\w][\w]/g,//234 abc
  2.     // var reg=/[\W][\W][\W]/g,//-%&
  3.         str='234abc-%&';
  4.     console.log(str.match(reg));

\d

\d===[0-9]//digit
\D===[^\d]

  1. var reg=/\Dab/g,//eab
  2.     str='234eabc-%&';
  3.     console.log(str.match(reg));

\s

\s===[\r\n\t\v\f1]
\S===[^\s]

  1.     var reg = /\sab/g,//[ ab]
  2.         str = '23 ab-$%';
  3.     console.log(str.match(reg));
  1.     var reg = /\sab/g,//[ ab]
  2.         str = '23\nab-$%';
  3.     console.log(str.match(reg));

image.png
\n回车 \r回车 \t制表tab \v垂直换行 \f换页符

\b

\b单词边界
\B非单词边界

  1.     var reg = /\bThis\b/g,//This
  2.     // var reg = /\bhis\b/g,//null
  3.     // var reg = /\Bhis\b/g,//his
  4.     // var reg = /\bhis\B/g,//null
  5.     // var reg = /\bThi\B/g,//Thi
  6.         str = 'This is a test';
  7.     console.log(str.match(reg));
  1.    var reg = /\ni/g,//['\ni']
  2.         str = 'This\nis a test';
  3.     console.log(str.match(reg));
  1.     var reg = / i/g,//[' i']
  2.     // var reg = /  i/g,//null
  3.         str = 'This is a test';
  4.     console.log(str.match(reg));

.

  1.     var reg = /./g,
  2.         str = 'This\ris\na\ttest $%#';
  3.     console.log(str.match(reg));

image.png

  1.     var reg=/[\w\W][\s\S][\d\D]/g,
  2.         str='abcdefg';
  3.     console.log(str.match(reg));//abc def

[\w\W][\s\S][\d\D]这三个相当于[.]，因为互斥都包含

  1.     var reg=/\w\W/g,//['0-']
  2.     // var reg=/[\w][\W]/g,//['0-']
  3.         str='0Gf0341objdo0-dfg';
  4.     console.log(str.match(reg));

上下两个正则效果一样，可以不写[]

总结

这是正则的基础部分