前端小白学习路线及知识点汇总（三）-- 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新增的创建字符串的方式，使用反引号定义
特点：
 模板字符串中可以解析变量，用可以直接将一个字符串解析到另一个字符串中，如：letname=‘XX‘；letsayHello=‘我的名字叫{ }可以直接将一个字符串解析到另一个字符串中，如： 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方法，用于对每个成员进行某种操作，没有返回值

前端小白学习路线及知识点汇总（三）-- JavaScript基础相关推荐

前端开发学习路线和知识点记录
1. HTML+CSS基础熟练使用HTM+CSS制作静态页面熟悉HTML5新特性和CSS3新特性 2. Javascript基础原生JS入门,会jQuery,精通Ajax 3. 开发工具基础会 ...
前端技术学习路线及技术汇总
第一阶段网页开发基础首先从以下几个方面了解web: 一.Web的概述 1.万维网的发展 2.浏览器与服务器 3.网页与网站 4.域名与主机 5.HTTP协议 6.W3C标准需要了解的核心是:浏览器 ...
初学者应该怎么学习前端？web前端的学习路线大剖析
最近总是会看到后很多人会问,我现在想学习Web前端开发,该如何下手,学习路线是怎样的?作为一个过来人,为了让新手程序员少走点弯路,这里就分享一些快速学习前端开发的经验以及我自己对前端学习的理解,教你如 ...
2018web前端学习路线，详谈web前端开发学习路线
近几年IT业可谓是发展火热,而且新生了很多的职业.在这众多的新生职业中备受瞩目的当属web前端工程师了,web前端在IT行业真正受到重视的时间不超过五年,但是web前端的发展前景却是非常的可观,好前景 ...
重磅推出：分享阿里云大学前端开发学习路线链接
重磅推出:分享阿里云大学前端开发学习路线链接这是一份阿里云大学推出前端开发学习路线,适合入门.也适合刚入职场一两年的小伙伴,来一个基础知识进行加深视频学习.内容言简意赅,通过demo练习等来理解学习 ...
送给大家一套完整的web前端开发学习路线
本文来源:千锋web前端开发近几年IT业可谓是发展火热,而且新生了很多的职业.在这众多的新生职业中备受瞩目的当属web前端工程师了,web前端在IT行业真正受到重视的时间不超过五年,但是web前端的 ...
小猿圈Web前端开发学习路线
很多人已经下定决心学习前端开发,但是学习很盲目,没有一个明确的目标,导致学了很长时间效果也没有很明显,最终放弃了,这个结果是我们最不想看到的结果,那么学习路线就十分重要了,好的学习路线对学习会引向成功 ...
web前端开发学习路线
导语:首先分享一下我的经验,想做好一件事,必须要花费一些功夫,然后是多学.多思.多练.多交流.多总结,发现自己的问题,然后一定要克服,在状态不好的情况下,往往要及时调整.新手学习前端的话,一定要想想 ...
小猿圈Web之前端开发学习路线及建议
人生在勤,不索何获.--张衡很多人已经下定决心学习前端开发,但是学习很盲目,没有一个明确的目标,导致学了很长时间效果也没有很明显,最终放弃了,这个结果是我们最不想看到的结果,那么学习路线就十分重要了 ...

前端小白学习路线及知识点汇总（三）-- JavaScript基础

前端小白学习路线及知识点汇总（三）-- JavaScript基础

前端小白学习路线及知识点汇总（三）-- JavaScript基础相关推荐

最新文章

热门文章