前端小白学习路线及知识点汇总(三)-- JavaScript基础
一、 JavaScript的组成
- ECMAScript:由ECMA国际进行标准化的一门编程语言,往往被称为JavaScript或Jscript,但实际是EMCAScript语言的实现和扩展,规定了JS的编程语法和基础核心知识
- DOM—文档对象模型:通过DOM端口可以对页面上的各种元素进行操作
- BOM—浏览器对象模型:通过BOM端口可以操作浏览器窗口,如弹出框,控制浏览器跳转,获取分辨率等
二、 JavaScript输入输出语句
- alert(msg) 浏览器弹出警示框
- console.log(msg) 浏览器控制台打印输出信息
- prompt(info) 浏览器弹出输入框,用户可以输入,取过来的值为字符型
三、 变量
- 本质:变量就是程序在内存中申请的一块用来存放数据的空间
- 变量的使用:
1) 声明变量: var age; // 声明一个名称为age的变量
2) 赋值: age = 10 ;// 给age赋值为10
3) 变量的初始化:即变量声明并赋值:var age = 10 ; - 变量的语法扩展:
1) 更新变量:一个变量被重新赋值后,它原有的值就会被覆盖,变量值将以最后一次赋的值为准
2) 特殊情况:a. 只声明不赋值,结果为undefined
b. 不赋值不声明直接使用,会报错 c. 不声明直接赋值,可以但最好声明 - 变量命名规范
1) 由字母数字下划线和$符号组成,字母区分大小写
2) 不能以数字开头,不能是关键字、保留字
3) 驼峰命名法:首字母小写,后面单词的首字母大写
四、 数据类型
(一) 简单数据类型
- Number 数字型 包含整型值和浮点型值 默认值:0
数字型最大/最小值:Number.MAX/MIN_VALUE ,
数字型特殊值:Infinity/-Infinity 无穷大/小 ,NaN 代表非数值
isNaN()用来判断值是否为非数字,返回false或true - Boolean 布尔值类型 true/1和false 默认值:false
- String 字符串类型 带引号 默认值:“”
1)字符串转义符:\n 换行符 ,\ 斜杠\ ,\’单引号 ,\” 双引号 ,
\t tab缩进 ,\b 空格
2)字符串长度:用length 即 str.length 获取输入字符串的长度
3)字符串的拼接:多个字符串之间用 + 拼接到一起,
数值相加,字符相连 引引加加 - Undefined 声明了变量,但是没给值 默认值:undefined(未定义值)
- Null 声明了变量为空值 默认值:null
typeof可以检测获取变量的数据类型,后边接空格和变量
字面量:是在源代码中一个固定值的表示法,就是字面量表示如何表达这个值
数据类型转换:
1) 转换为字符串:
a. toString() 用法: “变量 . toString()”
b. String()强制转换 用法: “String(变量)”
c. *加号拼接字符串 用法: “变量 + ‘字符串’” 隐式转换
2) 转换为数字型(重点):
a. parseInt(String)函数:将string类型转换为整数数值型
b. parseFloat(string)函数:将string类型转换为浮点数数值型
c. Number()强制转换函数 :将string类型转换为数值型
d. JS隐式转换:利用算数运算(- * /),将其转换为数值型
3) 转换为布尔型:
Boolean()函数:将其他类型转换为布尔类型
代表空、否定的值会被转换为false,如0 NaN null undefined
其余的值都被转化为true
五、 运算符
运算符(operator)也被称为操作符,用于实现赋值、比较和执行算运算等功能的符号
分为 算数运算符/递增和递减运算符/比较运算符/逻辑运算符/赋值运算符
- 算数运算符:+ - * / %
表达式:由数字、运算符、变量组成的式子,这个式子的结果为返回值 - 递增和递减运算符:
前置递增/递减:+ + num , - - num 口诀:先自加,后返回值
后置递增/递减:num + + , num - - 口诀:先返回原值,然后自加 - 比较运算符(关系运算符):
两个数据进行比较时使用的运算符,比较后,会返回一个布尔值作为运算结果
< 、> 、>= 、<= 、= = 、 != 、= = =/! = = (全等,值和数据类型都一样) - 逻辑运算符:
用来进行布尔值运算的运算符,其返回值也是布尔值
&& 逻辑与、|| 逻辑或 、 ! 逻辑非
短路运算(逻辑中断):当有多个表达式时,左边的表达式可以确定结果,不再计算右边
a.逻辑与:表达式1 && 表达式2 如果第一个表达式的值为真,则返回表达式2 ;如果第一个表达式为假,则返回表达式1
b.逻辑或:表达式1 || 表达式2 如果第一个表达式的值为真,则返回表达式1 ;如果第一个表达式为假,则返回表达式2 - 赋值运算符:
用来把数据赋值给变量的运算符
= 直接赋值; + =、- = 加、减一个数后再赋值 ;* = 、/ = 、% = 乘、除、取模之后再赋值 - 运算符优先级:
1.小括号 2.一元运算符 3.算数运算符 先* / % 后+ - 4. 关系运算符 5. 相等运算符 6. 逻辑运算符 先&&后|| 7. 赋值运算符 8. 逗号运算符
六、 流程控制
(一) 分支语句
根据不同的条件,选择不同的路径代码(代码多选一),得到不同结果
(1) if语句
双分支:if;else 多分支:if ;else if
三元运算符: 条件 ?表达式1 :表达式2
条件为真,输出表达式1;为假,输出表达式2
(2) switch语句
switch(表达式){case 1 :break;case 2 :break;……}
表达式的值和case的值必须是全等,即值和数据类型都一致
switch和if else if 区别:
switch通常处理确定值的分支,if多用于范围判断;
switch进行条件判断后直接跳到该执行语句,if 会将每个条件都判断;
(二) 循环语句
重复执行某些语句
(1) for循环语句
for(初始化变量;条件表达式;操作表达式){ 循环体 }
(2) while循环语句
while(条件表达式) { 循环体 }
(3) do while 循环语句
do { 循环体 }while(条件表达式)
先执行一次循环体,然后判断条件语句,决定是否循环
continue关键字:用于立即跳出本次(当前次)循环,继续下一次循环
break关键字:用于立即跳出此循环语句,后面的全部不执行
七、 JS命名规范及语法格式
1.标识符命名规范
变量、函数命名必须要有意义;变量名一般用名词;函数名一般用动词
2.操作符规范
操作符左右最好保留一个空格
3.单行注释规范
注释符号// 与注释内容之间有一个空格
4.其他规范
括号左右两侧最好都有空格
八、 数组
(一) 数组(Array)的概念:
可以把一组相关的数据一起存放,并提供方便的访问方式,是一组数据的集合
(二) 数组的创建:
- 利用new关键字创建数组
var arr = new Array(); 即创建了一个空的数组 - 利用数组字面量创建数组
var arr = [ ] 中括号为数组的字面量
数组元素之间用逗号隔开
(三) 数组元素的获取
数组的索引:数组名[ 索引号 ]
(四) 遍历数组
把数组中的每个元素从头到尾访问一次
数组索引号从0 开始
数组的长度:数组名.length 可以得到数组中元素的个数
(五) 数组中新增元素
- 修改length长度增加数组元素
可以用 数组名.length 来增加数组的长度,多出来的值默认为undefined - 索引号增加数组元素
数组名[新索引号],可以追加数组元素,索引号若已存在,则替换原来数值
不能直接给数组名赋值,否则会覆盖以前的数据
(六) 冒泡排序
将一列数从第一个开始两两比较符合条件的数(如从小到大)放到后面,即交换两个数,全部比较完,可以得到一列有顺序的数(小到大/大到小)
九、 函数
(一) 函数的概念:
函数就是封装了一段可被重复调用执行的代码块,通过此代码块可以实现大量代码的重复使用
(二) 函数的使用:
1) 声明函数:function 函数名(){ //函数体 }
或者 函数表达式方式声明:var 变量名 = function(){ },此种方式函数为匿名函数,没有函数名,有的是变量名
2) 调用函数:函数名();
function为声明函数的关键字,函数不调用,自己不执行
(三) 函数的参数:
1.函数的形参:声明函数时括号中为形参(形式上的参数)
2.函数的实参:调用函数时括号中为实参(实际上的参数)
函数调用时,函数的实参会被传递给形参
(四) 函数的返回值:
return语句
用函数实现某种功能,最终的结果需要返回给函数的调用者,即通过return实现,只要函数遇到return,则把后面的结果返回,只能返回一个值
return具有终止函数的作用,即return后不会再执行
(五) arguments的使用:
它是当前函数的一个内置对象,所有函数都内置了arguments对象,这个arguments对象储存了传递的所有实参,
arguments的展示形式是一个伪数组,因此可以遍历,
伪数组具有以下特点:
具有length属性
按索引方式储存数据
不具有数组的push()、pop()等方法
十、 作用域
- 概念:就是代码名字(变量)在某个范围内起作用和效果 目的是为了提高程序的可靠性,减少命名冲突
- 作用域分类:
1) 全局作用域:在整个script标签之中或单独整个JS文件中起作用
2) 局部作用域:只在函数内部起作用,也叫函数作用域 - 变量的分类:
1) 全局变量:在全局作用域下起作用的变量
注意:在函数内部,没有声明直接调用的函数,可以看为全局变量
2) 局部变量:在局部作用域下的变量,即在函数内部的变量
注意:函数的形参也可以看成局部变量 - 两者的执行效率:
1) 全局变量只有浏览器关闭的时候销毁,比较占内存资源
2) 局部变量是当程序执行完毕就会销毁,比较节约内存资源 - 作用域链:
内部函数访问外部函数的变量,采取的是链式查找方式,这种结构成为作用域链
十一、 预解析
(一) JS引擎运行时分为两步:预解析 和 代码执行
- 预解析:JS引擎会把JS里的所有var和function提升到作用域最前边
- 代码执行:按照代码书写的顺序依次从上往下执行
(二) 预解析分为变量预解析(变量提升)和函数预解析(函数提升)
- 变量预解析就是把所有的变量声明提升到当前作用域的最前边,但是不提升赋值的操作
- 函数预解析就是把所有函数的声明提升到当前作用域的最前边,不调用函数
十二、 JavaScript对象(object)复杂数据类型
(一) 对象的概念:
- 现实生活中:万物皆对象,对象是一个具体的事物,是一个实物
- 在JavaScript中:对象是一组无序的相关属性和方法的集合,所有事物都是对象,如字符串、数值、数组、函数等
对象是由属性和方法组成的
属性:事物的特征,在对象中用属性表示(常用名词)
方法:事物的行为,在对象中用方法来表示(常用动词)
(二) 创建对象的三种方式
- 利用字面量创建对象
1) 对象的字面量是{ } 即var 对象名 = { } // 创建了一个空的对象
里面的属性和方法采取键值对的形式,即 属性名:属性值
方法后面跟的是一个匿名函数
2) 使用对象
调用对象的属性,采取 对象名.属性名 或 对象名[‘属性名’]
调用对象的方法,采取 对象名.方法名() - 利用new Object 创建对象
var obj = new Object() //创建了一个空的对象
追加属性和方法用等于号 不用键值对 - 利用构造函数创建对象
用构造函数可以一次创建多个有相同属性和方法的对象,就是把对象封装在构造函数中
声明构造函数:
function 构造函数名(){
this.属性 = 值 ;this.方法 = function() }
使用构造函数
new 构造函数名();
构造函数名的首字母需要大写,调用构造函数要使用new
调用一次函数就可以创建一个对象,属性和方法前加this
New 关键字执行过程:
1) new 构造函数 会在内存中先创建一个空的对象
2) this 就会指向刚才创建的空对象
3) 执行构造函数里面的代码 给这个空对象添加属性和方法
4) 最后返回这个对象(所以构造函数不需要return)
(三) 遍历对象
for…in 遍历对象
for(var变量名in对象名){
console.log(变量名);//变量名输出,得到的是属性名
console.log(对象名[变量名]);//此输出,得到的是属性值}
十三、 JavaScript内置对象
JS的对象分为三种:自定义对象、内置对象、浏览器对象
-
内置对象概念:
内置对象是JS已经内置好了的对象,可以直接拿来用 -
数学对象Math:
不是构造函数,不用new,可直接调用
其中的属性和方法可在MDN文档中查询
1) Math.max/min 最大/小值 ,Math.PI 圆周率 ,Math.abs 绝对值
Math.floor 向下取整 ,Math.ceil 向上取整 ,
Math.round 四舍五入 但是遇到 .5是往大了取值,如-1.5 取-1
2) 随机数方法random()
可以返回一个随机的小数,在0和1之间,不包括1 -
日期对象Date
Date用来处理日期和时间,Date是构造函数,必须使用new调用
用法:new Date()
如果没有参数则返回当前系统的时间
如果跟参数,则常用参数写法:数字型 2019,10, 01
或者是字符串型 ‘2019-10-1 8:8:8’ -
数组对象
用来对数组进行操作
1)创建数组:字面量创建;new Array()创建
2)检测是否为数组:
instanceof 运算符 可以用来检测是否为数组
Array.isArray(参数)可以检测是否为数组(优先于前者)
3)添加或删除数组元素
a) push() 在数组末尾添加一个或多个数组元素:数组名.push(新增元素)
数组名.push()的返回值为新数组的长度
b) unshift()在数组开头添加一个或多个数组元素:数组名.unshift(新增元素)数组名.unshift()的返回值为新数组的长度
c) pop()删除数组最后一个元素,一次删除一个:数组名.pop();无参数,返回值为被删除元素的值
d) shift()删除数组第一个元素,一次删除一个:数组名.shift();无参数,返回值为被删除元素的值
4)数组排序
a) 翻转数组:
reverse()将数组中的元素翻转过来:数组名.reverse();
b) 数组排序(冒泡排序):
sort()可实现数组排序:
数组名.sort(function(a,b){
return a – b ;//升序的顺序排列
return b – a ;//降序的顺序排列
});
5)数组索引方法
a) indexOf()返回数组某个元素的索引号,只返回第一个元素值的索引号:数组名.indexOf(元素值)
返回值为索引号,没有此元素返回-1,从第一个开始向后查找
b)lastIndexOf() 同上 ,从最后一个开始向前查找
6)数组转换为字符串
a)toString()把数组转化为字符串,逗号分隔每项,返回一个字符串
b)join(‘分隔符’)把数组中所有元素转换为一个字符串,返回值同上
7)更多
Concat()连接两个或多个数组,不影响原数组,返回新数组
Slice()数组截取slice(begin,end),返回被截取的新数组
Splice()数组删除splice(第几个开始,删除个数),返回被删除项目的新数组,会影响原数组 -
字符串对象
1)基本包装类型:把简单数据类型包装成了复杂数据类型
2)字符串的不可变性:任何字符串声明后都不可变,但表面看上去变化了是因为重新开辟空间存放了新字符串,原来的还存在
3)根据字符返回位置
str.indexOf(‘要查找的字符’,[起始的位置])从前向后查找
str.lastIndexOf(‘要查找的字符’,[起始的位置])从后向前查找
4)根据位置返回字符
a)charAt(index)返回指定位置的字符(index)字符串索引号
使用:str.charAt(索引号)
b)charCodeAt(index)获取指定位置处字符的ASII码
使用:str.charCodeAt(索引号)
c)str[index]获取指定位置处字符,使用:和charAt等效
5)字符串操作方法(重点)
a)concat(str1,str2,…)用于连接两个或多个字符串
b)*substr(start,length)从start开始,length为取得个数
c)slice(start,end)从start开始,截取到end,取不到end
d)substring(start,end)同slice,但是不接受负值
e)replace(‘被替换的字符’,‘替换为的字符’),用于替换字符
f)split(‘分隔符’)将字符转换为数组
g)toUpperCase 将字符转换为大写
h)toLowerCase 将字符转换为小写
十四、JavaScript的简单数据类型和复杂数据类型
简单数据类型又叫基本数据类型或值类型,复杂数据类型又叫引用类型
1)值类型:储存变量中储存的是值本身,string,number,Boolean,undefined,null
2)引用类型:在储存时变量中存储的仅仅是地址(引用),通过new关键字创建的对象,如Object,Array,Date等
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
一、JS面向对象
二、ES6类和对象
- 创建类:
语法:class name { class body }
创建实例:var xx = new name();
类必须使用new来实例化对象 - 类的constructor构造函数
constructor()方法是累的构造函数,用于传递参数,返回实例对象,通过new命令生成对象实例是,自动调用该方法,如果没显示定义,类内部会自动创建一个constructor() - 类添加方法
语法:class name{ 方法名(); }
注意:类里面的函数不用加function,函数与函数之间不需要逗号
三、类的继承
- 继承
即子类可以继承父类的一些属性和方法
语法:class Father { … }
class Son extends Father { … }
1) 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类的
2) 继承中,如果子类里面没有,就去查找父类有没有这个方法,有就执行父类的方法(就近原则) - super关键字
用于访问和调用对象父类上的函数,可以调用父类的构造函数,也可调用父类的普通函数 super();
注意:super必须在子类this之前调用
四、类和对象的注意点
- ES6中必须先定义类,才能实例化对象
- 类里面共有的属性和方法一定要加 this使用
- constructor里面的this指向的是创建的实例对象,方法里面的this指向这个方法的调用者
五、构造函数和原型
(一) 构造函数和原型
-
JavaScript的构造函数可以添加一些成员,可以在构造函数本身上添加,也可以在构造函数的内部this上添加,通过这两种方式添加的成员,就分别称为静态成员和实例成员
1) 静态成员:在构造函数本身上添加的成员,只能有构造函数本身来访问
2)实例成员:在构造函数内部创建的对象成员,只能由实例化的对象来访问 -
构造函数的问题
构造函数的方法很好用,但是存在浪费内存的问题
每创建一个对象就会开辟一个内存存放函数
多个内存里存储的都是同一个相同的函数,造成了浪费 -
构造函数原型prototype
构造函数通过原型分配的函数是左右对象共享的
js规定每个构造函数都有一个prototype属性,指向另一个对象,注意这个prototype就是一个对象,这个对象的所有属性和方法都会被构造函数所拥有 -
对象原型__proto__
对象都会有一个属性__proto__指向构造函数的prototype原型对象,之所以我们对象可以使用构造函数prototype原型对象的属性和方法,就是因为对象有__proto__原型的存在 -
constructor构造函数
__proto__和prototype原型对象里都有一个属性constructor属性成为构造函数,因为它指回构造函数本身
constructor主要用于记录该对象引用于哪个构造函数,他可以让原型对象重新指向原来的构造函数 -
原型链
-
原型对象的函数this指向的是实例对象
-
扩展内置对象
可以通过原型对象,对原来的内置对象进行扩展自定义的方法,比如给数组增加自定义求和的功能
(二) 继承
ES6之前并没有extends继承,可以使用构造函数+原型对象模拟实现继承,称为组合继承
- call()
可以调用这个函数,并且可以修改函数运行时的this指向
语法:fun.call(thisArg,arg1,arg2,…)
thisArg:当前调用this的指向对象 - 借用构造函数继承父类型属性
原理:通过call()把父类型的this指向子类型的this,可以实现子类型继承父类型的属性
(三) ES5中的新增方法
-
数组方法
1) 迭代(遍历)方法:forEach、map、filter、some、every
a) forEach(): array.forEach(function(currentValue,index,arr))
currentValue:数组当前项的值
index:数组当前项的索引
arr:数组对象本身
b) filter():array.filter(function(currentValue,index,arr))
用于创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组,它直接返回一个新数组
c) array. some(function(currentValue,index,arr))
用来检测数组中的元素是否满足条件,即查找数组中是否有满足条件的元素
返回值是布尔值,如果找到这个元素,返回true,反之返回false
找到第一个满足条件的元素,则终止循环 -
字符串方法
trim()方法会从一个字符串的两端删除空白字符
语法:str.trim()
trim()方法不影响原字符串本身,他返回的是一个新的字符串 -
对象方法
1 ) Object.keys()用于获取对象自身所有的属性
Object.keys(obj)
效果类似for…in
返回一个由属性名组成的数组
2 ) Object.defineProperty()定义对象中新属性或修改原有属性
Object.defineProperty(obj,prop,descriptor)
obj:必需,目标对象
prop:必需,需定义或修改的属性名
descriptor:必需,目标属性所拥有的特性
第三个参数descriptor以对象形式书写:里面有四个值可以设置
value:设置属性值,默认undefined
writable:值是否可以重写,默认为false
enumerable:目标属性是否可以被枚举,默认为false
configurable:目标属性是否可以被删除或是否可以再次修改特性,默认为false
六、函数进阶
(一) 函数定义和调用
- 函数定义方式
1) function 关键字(命名函数)
2) 函数表达式(匿名函数)
3) new Function(‘参数1’,‘参数2’,…,‘函数体’)(了解)
里面的参数必须是字符串格式
执行效率低,不方便书写
所有函数都是Function的实例(对象)
(二) this
- 函数内this的指向:
- 改变函数内部this指向:
call()、bind()、apply()
1 ) call()
2 ) bind()不调用函数,但能改变this的指向
语法:fun.bind(thisArg,arg1,arg2,…)
返回由指定的this值和初始化参数改造的原函数拷贝
不想立即调用函数,又想改变this指向,则用bind
3 ) apply()调用函数,也可以改变this指向
语法:apply(thisArg,[argsArray])
传递的值必须在数组里,返回值就是函数的返回值,因为就是调用函数
主要应用:借助数学内置对象,求数组中的最大最小值
(三) 严格模式
- 什么是严格模式
JavaScript除了提供正常模式外,还提供了严格模式(strict mode)ES5的严格模式是采用有限制性JavaScript变体的一种方式,即在严格条件下执行代码
对正常的JavaScript语义做了一些更改:
1 ) 消除了JavaScript语法一些不合理,不严谨之处,减少了怪异行为
2 ) 消除代码一些不安全之处,保证代码运行的安全
3 ) 提高编译器效率,提高运行速度
4 ) 禁用了在ECMAScript未来版本中可能会定义的语法,为新版本做铺垫
如一些保留字:class,enum,export,import,super不能做变量名 - 开启严格模式
严格模式可以应用到整个脚本或个别函数中,因此使用时,分为为脚本开启严格模式和为函数开启严格模式
1) 为脚本开启严格模式,在所有语句之前放一句特殊语句:“use strict”
2) 为函数开启严格模式,在某个函数内部所有语句之前放特殊语句:“use strict” - 严格模式的变化
1) 变量规定
正常模式,变量未声明即赋值,则默认是全局变量,严格模式必须先声明
严禁删除已经声明的变量,如delete x;错误
2) 严格模式下this指向
正常下全局作用域函数this指向window,严格下为undefined
正常下构造函数不加new调用,当普通函数,this指向全局对象;严格下构造函数不加new调用,this会报错,new实例化的构造函数指向创建的实例
严格下定时器的this还是指向window
事件、对象还是指向调用者
3) 函数规定
函数里面不允许有重名的参数
函数必须声明在顶层,即不允许在非函数的代码块(如if,for语句)内声明函数,因为JavaScript新版本会引入块级作用域,为了与新版本接轨做出了以上的要求
(四) 高阶函数
就是对其他函数进行操作的函数,即接收函数作为参数或将函数作为返回值输出
(五) 闭包
闭包(closure)就是指有权访问另一个函数作用域中变量的函数
被其他作用域访问的变量所在的函数就是那个闭包函数
闭包的主要作用:延伸了变量的作用范围
(六) 递归
- 如果一个函数在内部可以调用其本身,那么这个函数就是递归函数
简单来说:就是函数内部自己调用自己
递归很容易发生“栈溢出”错误(Stack Overflow),所以必须要加退出条件return - 浅拷贝和深拷贝
浅拷贝拷贝一层,更深层次对象只拷贝引用;深拷贝拷贝多层,每级都拷贝
浅拷贝语法糖(ES6新增):Object.assign(接收拷贝的元素,拷贝的目标元素)
七、 正则表达式
(一) 正则表达式概述
- 概念:
正则表达式(Regular Expression)适用于匹配字符串中字符组合的模式
Js中正则表达式也是对象
正则表达式通常用来检索、替换符合某个模式(规则)的文本,如验证表单(匹配),过滤页面敏感词(替换),从字符串获取特定部分(提取) - 特点:
灵活性,逻辑性和功能性非常强
可以迅速地利用极简单的方式达到对字符串的复杂控制
一般情况下,都是直接复制写好的正则表达式,但需要据实际情况修改
(二) 正则表达式在JS的使用 - 创建正则表达式
1) 通过调用RegExp对象的构造函数创建
var 变量名 = new RegExp(/表达式/);
2) 通过字面量创建
var 变量名 = /表达式/; - 测试正则表达式text
1 ) text()正则对象方法,用于检测字符创是否符合该规则,该对象会返回true或false,其参数是测试字符串
2 ) 语法:regexObj.text(str)
regexObj是写的正则表达式
str是我们要测试的文本
就是检测str文本是否符合我们写的正则表达式规范
(三) 正则表达式中的特殊字符
- 正则表达式的组成
一个正则表达式可以由简单的字符组成,如/abc/,也可以是简单和特殊字符的组合,其中特殊字符被称为元字符,在正则表达式中是具有特殊意义的符号 - 边界符
正则表达式的边界符(位置符)用来提示字符所处的位置,主要有两个
^ :表示匹配行首的文本(以谁开始)
$ :表示匹配行尾的文本(以谁结束)
方括号内部加一个 ^ 表示内部内容全部取反 - 字符类
表示有一系列的字符可供选择,只要匹配其中一个就可以,所有可供选择的字符都放在方括号中 [ - ] :表示方括号内部范围符 – - 量词符
量词符用来设定某个模式出现的次数
*:重复零次或更多次
+:重复一次或更多次
?:重复零次或一次
{n}:重复n次
{n ,}:重复n次或更多次
{n,m}:重复n次到m次 - 预定义类
预定义类是指某些常见模式的简写方式
\d :匹配0-9之间任一数字,相当于[0-9]
\D :匹配所有0-9以外的字符,相当于[^0-9]
\w :匹配任意的字母数字下划线,相当于[A-Za-z0-9_]
\W :除了所有字母数字下划线以外的字符,相当于[^A-Za-z0-9_]
\s :匹配空格(包括换行符、制表符、空格符等),相当于[\t\r\n\v\f]
\S :匹配所有非空格的字符,相当于[^\t\r\n\v\f]
(四) 正则表达式中的替换 - repalce()方法可以实现替换字符串操作,用来替换的参数可以是一个字符串或是一个正则表达式
语法:stringObject.replace(regexp/substr ,replacement)
第一个参数:要替换的字符串或正则表达式
第二个参数:替换为的字符串
返回值是一个替换完毕的字符串 - 正则表达式参数
/表达式/[switch]
switch为修饰符,即按照什么样的模式匹配,有三个值:
g :全局匹配
i :忽略大小写
gi :全局匹配 + 忽略大小写
注意写此参数时不需要中括号,直接将参数接写就可以了
八、ES6
ES6 泛指ES2015 以及后续的版本
(一) let
let是ES6中新增的用于声明变量的关键字
- 使用let关键字声明的变量具有块级作用域(即一对大括号产生的作用域)
在一个大括号中,var声明的变量没有块级作用域
let 可以防止参与循环的变量变成全局变量 - 不存在变量提升,只能先声明在使用
- 暂时性死区:
若在声明之前使用变量,就会报错。在代码块内,使用 let 命令声明变量之前,该变量都是不可用的。称为 “暂时性死区”( temporal dead zone,简称 TDZ)。
(二) const
作用:声明常量,常量就是值(内存地址)不能变化的量
- 具有块级作用域
- 声明常量时必须赋值
- 常量赋值后,值不可以更改
(三) 解构赋值
ES6中允许我们从数组中提取值,按照对应位置,对变量赋值,对象也可以解构
- 数组解构
语法:let [a,b,c] = [1,2,3]
等号左边代表解构,右边代表要解构的数组,let代表abc三个变量的声明方式
如果解构不成功,即变量数量多于数组的值,则未成功的变量是undefined - 对象解构
对象解构实际是属性匹配,变量名字匹配属性的名字,若匹配成功就将属性值赋值给变量
1) 解构后变量名和属性名相同情况
语法:let { name,age } = { name:‘siyu’,age:23 };
等号左边为解构,右边为要解构的对象
2) 解构后变量名和属性名可以不同
语法:let{ name:myName,age:myAge } = { name:‘siyu’,age:23 };
等号左边大括号里的冒号左边为属性名匹配,冒号右边为变量名
(四) 箭头函数
ES6中新增的定义函数的方式
- 箭头函数是用来简化函数定义语法的
定义方式:const fn = ()=> { }
函数体中只有一句代码,且代码的执行结果就是返回值,则可以省略大括号
如果形参只有一个,则可以省略小括号 - 箭头函数的this
箭头函数不绑定this关键字,箭头函数中的this不是指向调用者,而指向的是箭头函数定义位置的上下文this
即箭头函数被定义在哪里,哪里的this就是箭头函数的this
如:箭头函数被定义在函数fn中,则fn的this就是箭头函数的this
(五) 剩余参数
- 剩余参数语法允许我们将一个不定数量的参数表示为一个数组
这个数组用 …args表示 - 剩余参数可以和解构配合使用
(六) ES6的内置对象扩展
-
Array的扩展方法
1) 扩展运算符(展开语法)
扩展运算符可以将数组或者对象转为用逗号分隔的参数序列
语法:…数组名
可应用于合并数组,想合并两个数组,可以新建一个空数组,将用扩展运算符将前两个数组加入新数组,也可以对第一个数组用push方法加入第二个数组
利用扩展运算符将伪数组转换为真正的数组
2) 构造函数方法:Array.from()
将类数组,伪数组或可遍历的对象转换为真正的数组
参数为要转换的伪数组,还可接收第二个参数,作用是对每个元素进行处理,处理后的值放入返回的数组中,类似于map()方法
3) 实例方法:find()
用于找出第一个符合条件的数组成员,如果没有找到返回undefined
4) 实例方法:findIndex()
用于找出第一个符合条件的数组成员的位置,没有找到返回 -1
5) 实例方法:includes(给定的值)
用于判断数组中是否包含某个给定的值,返回布尔值 -
String的扩展方法
1) 模板字符串
ES6新增的创建字符串的方式,使用反引号定义
特点:
模板字符串中可以解析变量,用 可 以 直 接 将 一 个 字 符 串 解 析 到 另 一 个 字 符 串 中 , 如 : l e t n a m e = ‘ X X ‘ ; l e t s a y H e l l o = ‘ 我 的 名 字 叫 { }可以直接将一个字符串解析到另一个字符串中,如: let name = `XX`; let sayHello = `我的名字叫 可以直接将一个字符串解析到另一个字符串中,如:letname=‘XX‘;letsayHello=‘我的名字叫{name}`;而不用 + 的拼接
模板字符串中可以换行
模板字符串中可以调用函数
2) 实例方法startsWith(某部分)和endsWith()
判断某字符串是否以某部分开头/结尾,返回布尔值
3) 实例方法:repeat(n)
此方法表示将原字符串重复n次,返回一个新字符串 -
Set数据结构
ES6提供了新的数据结构Set,它类似于数组,但是成员的值都是唯一的,没有重复的值
1) 创建Set数据结构
Set本身是一个构造函数,用实例化来声明
const s = new Set()
可以接受一个数组作为参数,用来初始化
set实例对象下有一个属性s.size,判断set实例化对象的长度
2) 实例方法
add(value):添加某个值,返回Set结构本身
delete(value):删除某个值,返回一个布尔值,表示删除是否成功
has(value):返回一个布尔值,表示该值是否为Set的成员
clear():清除所有成员,没有返回值
3) 遍历
Set结构的实例与数组一样,也拥有forEach方法,用于对每个成员进行某种操作,没有返回值