爱创课堂前端培训 JS基础 第6天课堂笔记.docx
- 文档编号:14470528
- 上传时间:2023-06-23
- 格式:DOCX
- 页数:24
- 大小:359.95KB
爱创课堂前端培训 JS基础 第6天课堂笔记.docx
《爱创课堂前端培训 JS基础 第6天课堂笔记.docx》由会员分享,可在线阅读,更多相关《爱创课堂前端培训 JS基础 第6天课堂笔记.docx(24页珍藏版)》请在冰点文库上搜索。
爱创课堂前端培训JS基础第6天课堂笔记
爱创课堂前端培训
JS基础
第6天课堂笔记(本课程共8天)
班级:
北京前端训练营7期
讲师:
冯楠娜
日期:
2017年5月17日
爱创课堂官网:
目录
JS基础1
目录2
复习3
一、字符串的属性和方法4
1.1字符串的属性4
1.2字符串的方法4
二、正则表达式7
2.1正则的概述7
2.1方法7
三、正则表达式的术语和操作符9
3.1精确匹配9
3.2预定义特殊字符9
3.3字符集10
3.4字符的边界10
3.5修饰符11
3.6预定义类12
3.7量词14
3.8分组15
3.9或操作符15
3.10分组的反向引用16
3.11中文17
复习
作用域:
变量的作用域:
JS没有块级用做域,只有函数可以管住作用域。
局部变量:
当函数执行才定义,函数执行完毕之后销毁。
所以在作用域外的任何地方都不能访问咱们的局部变量。
全局变量:
可以在任何地方访问的到。
用作:
信号量,累加的作用。
函数的作用域:
只有在它作用域内才可以被执行。
1functionouter(){
2vara=1;
3functioninner(){
4console.log(a);
5}
6inner();
7}
8outer();
9inner();
闭包:
函数的闭包天生存在,但是我们看不见,只有通过某种方法才可以在外面看见闭包的效果。
函数可以记住执行时外部环境和内部语言。
1functionouter(){
2vara=1;
3functioninner(){
4console.log(a);
5}
6returninner;
7}
8
9vari=outer();
10i();
数组:
array,类型是引用类型。
直接用数组字面量定义。
[]。
索引值(index)。
index的最大值length-1。
1arr[index]
数组的属性length。
1arr.length
数组的首尾操作:
1shift()//删除第一位
2unshift()//在首位增加
3pop()//删除最后一项
4push()//在末尾增加
concat()。
数组的拼接,连接。
slice(start,end)。
数组的拆分。
表示截取start到end之间的数,包括start不包括end。
参数可以是正数可以是负数,end还可以不写。
splice(index,howmany,elements);
删除:
splice(3,4);
插入:
splice(3,0,elements);
替换:
splice(3,4,elements);
join()表示吧数组转换为字符串。
reverse()。
倒序
sort()。
第一种没有参数,就表示简单排序。
按照字符编码顺序。
第二种有参数,
1//升序
2sort(compareFunction(a,b){
3if(a>b){
4return1;
5}elseif(a==b){
6return0;
7}else{
8return-2;
9}
10})
1、字符串的属性和方法
1.1字符串的属性
字符串的属性和数组一样也有length属性。
表示字符串的长短。
每一个字母,汉字,数字,标点符号,空格都算一个长度。
直接使用点方法。
1varstr="今天天气太闷了,感觉气温有35°C";
2console.log(str.length);
字符串也有索引值index。
也是从0开始。
1.2字符串的方法
charAt():
表示索引值对应的字符。
1varstr="今天天气太闷了,感觉气温有35°C";
2//charAt()参数是索引值,返回值是该索引值对应的字符。
3console.log(str.charAt(3));
1//字符串的遍历
2for(vari=0;i<=str.length-1;i++){
3console.log(str.charAt(i));
4}
indexOf():
表示该字符首次出现的位置。
如果该字符串存在返回的是字符串所在的索引值,字符串不存在返回的是-1。
1//indexOf()表示该字符首次出现的位置。
2varstr="今天天气太闷了,感觉气温有35°C";
3console.log(str.indexOf("天"));
concat():
表示字符串的拼接。
参数可以是一个字符串或者多个,用逗号隔开。
1//方法表示字符串的拼接,返回一个新的字符串,源字符串不变。
2varstr="今天天气太闷了,感觉气温有35°C";
3varstr2=str.concat("我需要空调","某同学想吃冰棍");
4console.log(str);
5console.log(str2);
6
slice(start,end)方法表示截取索引值从start到end之间的字符串。
包括start不包括end。
可以用正值,可以用负值,还可以不写end。
1//slice()表示截取一段区间的字符串
2varstr="今天天气太闷了,感觉气温有35°C";
3varstr2=str.slice(3,9);
4varstr3=str.slice(-9,-3);
5varstr4=str.slice(3);
split()方法表示用某个字符截取字符串得到一个新数组。
参数:
字符
1//split()用字符截取得带新的数组
2varstr="aaabccccbddjbjjkbhhjj";
3vararr=str.split("b");
4console.log(arr);
substr(start,howmany)方法:
表示从某个索引值开始截取一段数目的字符串。
参数start表示开始截取的索引值
howmany表示要截取的个数。
1varstr="今天天气太闷了,感觉气温有35°C";
2console.log(str.substr(2,5));
3console.log(str.slice(2,7));
substring():
表示截取一段字符串从start开始到end不包含end。
不可以用负值。
1//substring()方法
2varstr="今天天气太闷了,感觉气温有35°C";
3console.log(str.substring(2,7));
4//substring()方法可以书写从大到小,会自行判断两个数值的大小,包括小的索引值,不包括大的索引值。
5console.log(str.substring(7,2));
toUpperCase()方法表示转换为大写字母。
toLowerCase()方法表示转换为小写字母。
1varstr="qfjfkjkka";
2varstr2=str.toUpperCase();
3varstr3=str2.toLowerCase();
4console.log(str2);
5console.log(str3);
将“everythingisgoodinitsseason”,转为每个单词的首字母大写。
即“EverythingIsGoodInItsSeason”
1varstr="everythingisgoodinitsseason";
2//将每个单词的首字母大写。
3//先得到每一个单词
4vararr=str.split("");
5//每个单词的首字母大写
6for(vari=0;i<=arr.length-1;i++){
7arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].slice
(1);
8}
9//数组转换为字符串
10varstr1=arr.join("");
11console.log(str1);
2、正则表达式
正则表达式就是用于字符串的匹配规则。
数据类型是对象也是引用类型。
正则常用于表单验证。
1//案例输入一个电话号码000-88888888
2varcall=prompt("请输入一个电话号码");
3varreg=/^\d{3}-\d{8}$/;
4if(reg.test(call)){
5console.log("输入正确");
6}else{
7console.log("输入错误,请重新输入");
8}
2.1正则的概述
正则表达式(regularexpression),简称RegExp。
是被用来匹配字符串中的字符组合的模式。
常用来做表单验证。
创建正则表达式最简单的方法,就是使用正则字面量。
字面量:
/表达式/
1//使用正则字面量的方法创建
2varreg=/\d+///表示右一个或者多个数字;
3varreg=/\s+///表示只有有一个空白字符;
4varreg=/abcd///表示有四个字符必须是a,b,c,d并且顺序也是固定;
2.1方法
配合正则表达式使用的方法有字符串方法和正则表达式的方法。
(谁的方法只能谁调动也就是字符串的方法只能是字符串调用,正则方法只能是正则调动)
split()根据匹配字符串切割父字符串
match()使用正则表达式与字符串相比较,返回一个包含匹配结果的数组。
search()对正则表达式或指定字符串进行搜索,返回首次出现的匹配项的下标。
replace()用正则表达式和字符串直接比较,然后用新的子串来替换被匹配的子串。
1//split()方法用字符串切割父字符串
2varstr="aaabbjdkdbbbbbbbbbbjskblkk";
3//正则的匹配规则
4//varreg=/b+/;
5vararr=str.split(/b+/);
6console.log(arr);
7varstr1="abbbccd";
8vararr2=str1.split(/\s+/);
9console.log(arr2);
1//match()方法用于字符串或者正则的匹配输出所在位置
2varstr="abobosjkfjffkl";
3console.log(str.match("obo"));
如果不写g只输出匹配条件的第一个字符串。
书写g会输出所有匹配的字符串。
1varstr="aboosjkoofjooffkl";
2console.log(str.match(/o\s+o/g));//g表示在全局匹配
1//search()方法返回首次匹配的下标。
没有全局搜索。
2varstr="aboaosjkoaaaaaofjoaoffkl";
3console.log(str.search("oo"));
4console.log(str.search(/oa+o/));
1//replace()方法表示匹配的字符串替换到原来的
2varstr="";
3//第一个参数表示匹配的字符串
4//第二个参数表示新的字符串。
5console.log(str.replace("baidu","icketang"));
6console.log(str.replace(/baidu/,"icketang"));
7//去掉字符串中的空格
8varstr2="abcccccd";
9console.log(str2.replace(/\s+/g,""));
正则的方法:
exec()。
方法表示匹配的字符串在父字符串中的位置。
返回一个数组。
即使是全局匹配也只会返回字符串第一次出现的位置。
1//exec()字符串在父字符串中的位置
2varstr="aaabcddddjabced";
3//全局匹配
4console.log(str.match(/abc/g));
5//正则方法
6//varreg=/abc/;
7console.log(/abc/.exec(str));
test()方法检测字符串中是否有符合正则表达式的部分。
有返回true,没有返回false。
1//test()检测字符串中是否有符合正则表达式的部分
2varstr="aaabccccddddd";
3console.log(/abc/.test(str));
4console.log(/abcd/.test(str));
3、正则表达式的术语和操作符
3.1精确匹配
正则表达式:
由一些普通字符和一些特殊字符(又叫元字符--metacharacters)组成。
普通字符包括大小写的字母和数字,而元字符则具有特殊的含义。
javascript中常用特殊字符有()[]{}\^$|?
*+.
若想匹配这类字符必须用转义符号\如:
\(,\^,\\
我们要匹配的正则表达式里,没有特殊符号或者操作符。
我们要想匹配这些常量、普通字符,我们只能去进行精确匹配,字符串里出现的字符必须在正则里直接书写。
比如:
想测试字符串”abcnddjgkgk”中是否有“abc”
1console.log(/abc/.test("abcnddjgkgk"));
2//精确匹配,就是必须具有abc这三个字母,并且顺序也不能颠倒。
3.2预定义特殊字符
\t/\t/制表符
\n/\n/回车符
\f/\f/换页符
\b/\b/空格
3.3字符集
我们之前使用的都是一个字符匹配一个字符。
我们想用一类字符匹配一个字符。
这就需要用字符集。
字符集:
[],将一类字符的可能性都写在中括号之内。
简单类:
正则的多个字符对应一个字符,我们可以用[]把它们括起来,让[]这个整体对应一个字符[abc]
1varstr="sanasdnbjkdscndsbnb";
2//[abc]表示一类字符集的可能性,可以是a,可以是b,可以是c
3console.log(str.match(/s[abc]n/g));
范围类:
要匹配的字符太多,我们可以利用一个范围将可能性都包含在内。
[a-z]、[0-9]、[A-Z]
1//范围类[a-z],[A-Z],[0-9]
2console.log(/[a-z]/.test("我想看看y你这里有没有字母"));
3console.log(/[0-9]/.test("我想看看9你这里有没有字母"));
负向类:
[]前面加个元字符(^)进行取反,表示匹配不能为括号里面的字符。
1//负向类
2varstr="sanasdnbjkdscndsbnbsknkkdkksyn";
3//[^abc]表示一类字符集的可能性,不可以是a,不可以是b,不可以是c
4console.log(str.match(/s[^abc]n/g));
组合类:
允许用中括号匹配不同类型的单个字符。
1//组合类,不同类型的数据类型写一起
2varstr="sanas0nbjkdscnds6nbsknkkdkksYn";
3//只要是s*n这种字符组合就输出
4console.log(str.match(/s[a-z0-9A-Z]n/g));
3.4字符的边界
^开头。
表示字符串能够到匹配到以^后面字符串开头。
(千万不能写在左中括号后面。
)
1//开头^
2console.log(/^hello/.test("helloicketang"));
3console.log(/^ello/.test("elloicketang"));
$结尾。
表示字符串能够匹配到以$前面的字符串结尾的字符串。
1//结尾$
2console.log(/icketang$/.test("helloicketang"));
3console.log(/icketann$/.test("helloicketang"));
\b单词的边界。
用于查找位于单词的开头或结尾的匹配。
\B非单词的边界。
用于查找不处在单词的开头或结尾的匹配。
3.5修饰符
g表示全局匹配。
能够在全局范围内匹配。
用法:
g写在正则表达式的最后
1/表达式/g
1console.log("sanjfkfjsanjjjjjsanfff".match(/san/));
2//g表示全局匹配
3console.log("sanjfkfjsanjjjjjsanfff".match(/san/g));
i表示对大小写不敏感。
也就是不区分大小写
1console.log("sAnjfkfjsanjjjjjsAnfff".match(/san/i));
可以连续书写修饰符
1console.log("sAnjfkfjsanjjjjjsAnfff".match(/san/ig));
3.6预定义类
js提前给我们定义好的,一些特殊字符。
表示一类字符,是一些特殊字符集的简写。
.[^\n\r]表示除了换行和回车之外的任意字符。
\d[0-9]表示数字字符。
\D[^0-9]表示非数字字符
\w[a-zA-Z_0-9]单词字符
word
\W[^a-zA-Z_0-9]非单词字符
\s[\t\n\x0B\f\r]空白字符
\S[^\t\n\x0B\f\r]非空白字符
3.7量词
量词用法:
{}
{n}硬性量词,表示字符串出现0或者n次
{n,m}软性量词,表示至少出现n,最大不能超过m。
{n,}软性量词,表示至少出现n次。
?
{0,1}表示出现0次或者1
+{1,}表示出现1次或者多次(至少出现1次)
*{0,},表示出现0次或者多次。
(任意次数)
3.8分组
虽然量词的出现,能帮助我们处理一排密紧相连的同类型字符。
但这是不够的,我们用中括号表示范围内选择,大括号表示重复次数。
如果想获取重复多个字符,我们就要用小括号进行分组了。
3.9或操作符
正则表达式可以使用|,操作符。
表示要么是a,要么是bye。
表示要么有3字母要么有2数字
3.10分组的反向引用
反向引用标识是对正则表达式中的匹配组捕获的子字符串进行编号,通过“\编号(在正则表达式中)”,“$编号(在正则表达式外)”进行引用。
从1开始计数。
①在正则表达式中的编号
①在正则表达式外的编号$1,$2……
3.11中文
匹配中文:
[\u4e00-\u9fa5]
是一个固定用法,中文只能在正则表达式里这样表示。
可以匹配简体中文或者繁体中文
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 爱创课堂前端培训 JS基础 第6天课堂笔记 课堂 前端 培训 JS 基础 笔记