js复习

基本语法

JavaScript无类型语言:即声明变量时不需要指定类型

一、执行顺序

顺序执行,浏览器顺序加载

二、语法

  1. 对大小写敏感

  2. 语句末尾的分号可有可无

  3. 常量:const 常量名 = 常量值

  4. 变量:

    全局变量:函数体外不定义的变量(var 变量名)

    局部变量:函数体内部或语句块内定义的变量(let 变量名)

  5. 数据类型:

    1. 数字型:整数、浮点数
    2. 字符型:单引号或双引号括起来的一串内容
    3. 布尔型(逻辑型):true、false
    4. 特殊类型:NULL、Underfined、NaN
  6. 运算符:

    1. 算数运算符:%,++,–;(i++):先赋值,后自增,(++i):先自增,后赋值

    2. 比较运算符(关系运算符):<、>、<=、>=、!= ,!==,==等

    3. 赋值运算符:*复合赋值运算符(例:a+=2)

    4. 逻辑运算符:&&、||、!;

      语句中存在短路现象:

      1. &&运算的短路现象:当存在一个为假时,后面的语句将不再执行
      2. ||运算的短路现象:当存在一个为真时,后面的语句将不在执行
    5. 条件运算符:三目运算符(条件?为真结果:为假结果)

    6. 其他运算符:位运算、逗号运算

    7. 运算符的优先级:单目运算符>双目(多目)运算符>括号>算数运算符>比较运算符>逻辑运算符>条件运算符>赋值运算符

流程控制

一、顺序结构

按语句的先后顺序依次执行

二、选择结构

根据条件选择不同的语句执行

  1. if语句
  2. switch-case语句
  3. 条件表达式

三、循环结构

  1. while循环:“当”型循环
  2. do-while循环:“直到”循环
  3. for循环:
  4. for…each循环:
  5. break:终止循环
  6. continue:结束本次循环

函数

一、定义

实现某个特定功能的代码块

​ 方式

  1. 关键字:function 函数名(形参1,形参2…){函数体语句}

  2. 字面量:var 变量 = function 函数名(形参…){函数体语句}

  3. 构造函数:var 变量 = new Function(‘形参’,…,‘函数体语句’)

    解释:关键字定义的函数时函数声明,会提前解析,可在任意位置调用;其余两种方法定义的函数不是函数声明,必须在声明后才能进行调用(即调用必须在函数体后面)

二、调用

  1. 简单调用:函数名(实参1,实参2,…)
  2. 在事件响应中调用:事件名 = 函数名(实参)
  3. 在链接中调用:<a herf = “JavaScript : 函数名(实参)”

三、参数

函数的参数可有可无

  1. 形参(形式参数):在函数定义时,出现在函数首部的参数(即占位符,无意义)
  2. 实参(实际参数):在函数调用时,出现在函数首部的参数(实在数据)
  3. 传递方向:实参 --> 形参
  4. 返回值:函数可以有返回值(通过return语句返回),也可以没有
  5. 嵌套函数:在一个函数的内部再定义一个函数
  6. 递归函数:函数自己调用自己
  7. 内置函数:Js定义好的函数,用户可以直接调用。
    1. parseInt:将数字字符转化成整数
    2. parsrFloat:将数字字符转化成浮点数
    3. encodeURI:将字符串转化成有效的URL地址
    4. decodeURI:将encodeURI文本进行解码
    5. isNaN:判断是否为数字,不是数字为true,是数字为false
    6. eval:计算字符串表达式的值

面向对象

不是JavaScript独有的,是一种思想

一、特征

  1. 封装性:隐藏内部细节,之对外开放操作接口
  2. 继承性:一个对象可以继承另一个对象的成员,在不改变另一个对象的前提下进行扩展
  3. 多态性:同一个操作作用于不同的对象会产生不同的结果

二、对象的定义

通过“{}”实现,对象的成员是键值对,多个成员用“,”隔开

*空对象: var o1= {}

*单个成员的对象: var o2= {name:'jack'}

*多个成员的对象: var o3 ={name: 'rose',sex:'female',age:16}

*含方法的成员对象: var o4={name: 'Tom',sex:'male',age:2,say:'function(){console.log("hello")}'}

三、访问对象的成员

对象名.成员名

四、对象成员的遍历

for... in

for (var obj) in o4 

五、对象的拷贝

1.浅拷贝

将原对象的快捷方式拷贝给新对象(复制了快捷方式,对象本身没有复制)

优点:节省内存空间

p2 === p1 为true

var p1 = {
	name: "jack",
	age: 17
}

var p2 = p1
console.log(p1)
console.log(p2)

p2.name = 'tom'
console.log(p1)
console.log(p2)

在这里插入图片描述

2.深拷贝

真正创建一个对象的副本,将该副本给零一个对象

function deepCopy(obj) {
    var o = { }
    for (var k in obj){
        o[k] = (typeof obj[k] === "object")?deepCopy(obj[k]):obj[k]
    }
    return o
}

var p1 = {
    name:'jack',
    age:16,
    subject:{
        name:['html','css']
    }
}

var p2 = deepCopy(p1)

console.log(p1)
console.log(p2)
console.log(p1 === p2)
p2.name = "rose"
console.log(p1)
console.log(p2)

在这里插入图片描述

六、构造函数

是JavaScript创建对象的另一种方式,和“{}”不同的是可以创建若干具有相同特征的对象

七、js中内置的构造函数

使用方法:new 构造函数名([参数])

object: new Object()

String:new String('123456')

Date:new Date(2021-03-12)

Number:new Number()

八、访问对象的构造函数

通过对象的 constructor 属性

对象名.constructor

九、私有成员

在构造函数中用var定义的变量

1.访问方式

私有成员不能通过对象名.成员名的方式访问

访问时需在构造函数中嵌套定义一个函数返回私有成员的值

function Peoson (){
    var name = 'jack'
    this.getname=function(){
        return name
    }
}

var o1 = new Peoson()
console.log(o1.name)
console.log(o1.getname())

在这里插入图片描述

十、this

this在函数中使用,函数的调用环境变化了this的指向也会发生改变

  1. 使用new关键字蒋函数作为构造函数调用时,在该构造函数内部的this指向新创建的对象
  2. 直接通过函数名调用函数时,函数中的this指全局对象(浏览器中指window对象)
  3. 将函数作为对象的方法调用,this指向该对象
  4. 改变this指向: apply()、call()

十一、常用的内置对象

String:字符串对象

Number:数值对象

Math:数学运算

Date:日期对象

Array:数组对象

十二、原型和继承

每创建一个函数就会随之有一个对象存在,函数通过prototype属性指向对象(原型又称为原型对象,指的是方法所对应的对象)

  1. 通过原型实现继承:一个对象没有某个属性或方法,可以从另一个对象中获取,从而实现继承
  2. 替换原型对象实现继承,将构造函数的原型对象替换成一个新的对象,那么基于该构造函数创建的对象给就会继承新的原型对象
  3. 利用 Object.create() 实现继承

十三、原型链

对象由原型对象,原型对象也有原型对象,这样就构成链式结构简称为原型链

  1. 对象的构造函数
  2. 函数的构造函数:函数的本质是对象,因此函数也有构造函数。所有内置对象的构造函数都是Function函数
  3. 原型对象的原型对象:对象的原型通过 对象.constructor.prototype 获取,因为 constructor 属性又指向构造函数构成了循环,无法访问原型对象的原型,为了解决该问题有些浏览器(火狐、谷歌)为对象增加了新的属性:__proto__ 用来指向原型对象的原型

十四、原型链的结构

  1. 自定义函数,以及Object、String、Number等内置函数都是由Function函数来创建的,Function函数是由Function函数自身创建的
  2. 每个构造函数都有一个原型对象,构造函数通过prototype属性指向原型对象,原型对象由通过constructor属性指向构造函数
  3. 由构造函数创建的示例对象,继承自构造函数的原型对象,通过实例对象的 __proto__ 属性可以直接访问原型对象
  4. 构造函数的原型对象继承字Object的原型对象,而Object的原型对象的 __proto__ 属性为Null

十五、instanceof 运算符

用来检测一个对象的原型链中是否含有某个构造函数的prototype属性所表示的对象,有返回true,无返回false

数组

类型相同的数据集合

一、创建数组

  1. 使用Array对象创建,var arr = new Array('a1','a2',12,32)
  2. 使用“[]”创建数组,var tep = new[1,2,3,4,'a']

二、数组的基本操作

  1. 获取数组的长度:Array对象提供length属性提供存放数组的长度

  2. 数组元素的访问和遍历:

    2.1 访问数组元素:数组名[下标]

    2.2 遍历:通过for…in…循环实现

  3. 元素的添加:数组名.push()

  4. 元素的修改:数组名[下标] = 新值

  5. 元素的删除:delete 数组名[下标]

三、数组的排序

  1. 冒泡排序:相邻两个元素进行比较,通过大小关系,进行相互交换位置
  2. 插入排序:
  3. 选择排序:

四、常用操作

  1. 栈和队列方法:

    1.1 push():给数组尾部添加一个或多个元素,返回数组新长度

    1.2 unshift():给数组开头添加一个或多个元素,返回新长度

    1.3 pop():从数组尾部删除一个元素,并返回该元素,若数组为空,返回undefined

    1.3 shift():从数组开头删除一个元素,并返回该元素,若数组为空,返回undefined

  2. 检索方法:

    2.1 includes():确定数组中是否含有某个元素,有为true,无为false

    2.2 indexOf():返回给定元素的第一个索引

    2.3 lastindexOf():返回给定元素的最后一个索引

    2.4 Array.isArray():判断传递过来的值是否为Array,是返回true,否返回false

  3. 数组转字符串:

    3.1 join():将数组中的搜友元素连接一个字符串中

    3.2 toString(): 将数组转换成字符串

  4. 其他方法:

    4.1 sort():对数组进行排序并返回数组(默认升序)

    4.2 fill():用一个固定值填充数组中指定下标范围内的元素

    4.3 reverse():颠倒数组中元素的位置

    4.4 splice():在指定范围内对数组添加或删除元素

    4.5 slice():把指定范围内的数组元素拷贝到新数组中

    4.6 concat():合并两个或多个数组

闭包

是指有权访问另一个函数作用域内的变量(局部变量)的函数

一、作用

  1. 在函数外部读取函数内部的变量
  2. 可以让变量的值始终保存在内存中(不能滥用闭包。否则会造成内存的消耗)

二、实现

在一个函数内部创建另一个函数,通过另一个函数访问这个函数的局部变量

BOM对象(Browser Object Model)

浏览器对象模型

一、Window(核心对象)

  1. 属性
    1. name:窗口名称
    2. closed:布尔值,表示窗口是否关闭
    3. top:最顶层的父窗口
    4. parent:当前窗口的父窗口
  2. 方法
    1. alter():消息框
    2. confirm():确认框
    3. prompt():带输入的消息框
    4. open():打开窗口
    5. closed():关闭窗口
    6. focus():焦点
    7. moveTo():将窗口移动到指定位置
    8. resizeTO():调整窗口的大小到指定的宽高

二、Location(地址对象)

  1. 属性
    1. href:返回一个完整的URL地址
    2. port:URL服务器的端口号
    3. protocol:URL协议
    4. host:URL的主机名和端口号
    5. hostname:URL主机名
  2. 方法
    1. reload():重新载入当前文档
    2. replace():用新文档替换当前文档
    3. assign():载入一个新文档

三、Document(文档对象)

  1. 属性:
    1. body:代表文档主题
    2. form:代表表单
  2. 方法:
    1. getElementById():通过id获取标签
    2. getElementsByTagNames():通过标签名获取标签

四、Screen(屏幕对象)

  1. 属性
    1. height:屏幕高度
    2. width:屏幕宽度
    3. colorDepth:屏幕的颜色深度
  2. 方法:
    1. getPageX():获取相对于页面的X轴值
    2. getScreenX():获取绝对X坐标值

五、History(历史对象)

  1. 属性:
    1. length:历史列表中的网址数
  2. 方法:
    1. go():加载历史列表中某个具体页面
    2. back():加载历史列表中的前一个URL
    3. forward():加载历史列表中的下一个UPL

六、Navigator(浏览器对象)

  1. 属性:
    1. appName:浏览器的名称
    2. appVersion:浏览器的版本
    3. cookieEnable:浏览器是否启用cookie

DOM对象(Document Object Model)

一、常见概念

  1. 根节点:标签时整个文档的根,有且只有一个
  2. 子节点:某个节点的下一级节点。例如:是的子节点
  3. 父结点:某个节点的上一级节点。例如:是的父节点
  4. 兄弟节点:两个或多个节点有同一个父节点。例如为兄弟节点

二、对象属性

  1. document.body:文档中的body元素
  2. document.forms:文档中的form对象
  3. document.images:文档中多有的Image对象
  4. document.documentElement:文档中所有的html元素

三、对象方法

  1. document.getElementById():返回指定id的对象
  2. document.getElementsByName():返回指定名称的对象的集合
  3. document.getElementsByClassName():返回指定类名的对象集合
  4. document.getElementsByTagName():返回指定标签名的对象集合

四、元素(标签)的内容

  1. 属性
    1. innerHTML:返回开始和结束标签之间的html
    2. innerText:返回元素中去除所有标签的内容
    3. textContent:返回指定节点的文本内同
  2. 方法
    1. document.write():向文档写入指定的内容(写入后不换行)
    2. document.writeln():向文档写入指定的内容(写入后换行)

五、元素属性

  1. 作用:便于JavaScript获取、修改、删除、遍历html元素
  2. 属性:
    1. attributes:返回元素的属性集合
  3. 方法:
    1. setAttribute(name,value):设置或修改指定原型的值
    2. getAttribute(name):获取指定元素的属性值
    3. removeAttribute(name):从元素中删除指定的属性

六、DOM的节点操作

  1. 获取节点
    1. firstChild:当前节点的首个节点
    2. lastChild:当前节点的最后一个节点
    3. nodeName:当前节点的名称
    4. nodeValue:当前节点的值
    5. nextSibling:同一层级中指定节点之后紧跟的节点
    6. previousSibling:同一层级中指定节点之前的一个节点
    7. parentNode:当前节点的父节点
    8. childNodes:当前节点的所有子节点
  2. 追加节点
    1. document.createElement():创建元素节点
    2. document.createTextNode():创建文本节点
    3. document.createAttribute():创建属性节点
    4. appendChild():在指定节点的末尾添加一个节点
    5. insertBefore():在当前节点之前增加子节点
    6. getAttributeNode():获取指定名称的属性节点
    7. setAtteibuteNode():改变指定名称的属性节点
  3. 删除节点
    1. removeAttributeNode():删除指定节点
    2. removeChild():删除指定节点的子节点

事件处理

一、概念

  1. JavaScript侦测到的一些行为,如:页面加载、鼠标单击等具体的动作,它对实现网页的交互效果起着非常重要的作用
  2. 事件处理程序:JavaScript为响应用户行为所执行的程序代码
  3. 事件驱动式:在Web页面中JavaScript侦测到用户行为,并执行相应的事件处理程序的过程
  4. 事件流:在事件发生时,会在发生事件的元素和DOM树的根节点之间按照特定的顺序进行传播的过程。(捕获和冒泡)
  5. 事件流传播顺序的解决方式
    1. 事件捕获方式(Netscape – 网景):传播顺序应该是从DOM树到发生事件的元素节点
    2. 事件冒泡方式(微软):事件流的传播顺序是从发生事件的元素节点到DOM树的根节点

二、事件绑定方式

  1. 行内绑定:<标签名 事件 = “事件的处理程序”>
  2. 动态绑定:DOM元素对象.事件 = 事件处理函数

三、事件监听方式

  1. 早期的IE浏览器:DOM对象.attachEvent(type,callback)
  2. 标准方式:DOM对象.addEventListener(type,callback)

四、事件对象

  1. 属性
    1. type:事件类型
    2. target:触发事件的元素(事件的目标节点)
    3. currentTarget:当前触发事件的目标节点

五、事件分类

  1. 页面事件

    1. load:页面加载完毕后触发
    2. unload:页面关闭时触发
  2. 焦点事件

    1. focus:获得焦点时触发(不会冒泡)
    2. blur:失去焦点时触发(不冒泡)
  3. 鼠标事件

    1. click:按下并释放鼠标按键时触发
    2. dbclick:鼠标双击事件
    3. mouseover:鼠标进入时触发
    4. mouseout:鼠标离开时触发
    5. change:内容改变时触发
    6. mousedown:按下任意鼠标键时
    7. mouseup:释放任意鼠标按键时
    8. mousemove:在元素内移动鼠标时

    鼠标事件的位置属性

    1. clientX:鼠标指针在浏览器窗口可视区的水平坐标
    2. clientY:鼠标指针在浏览器窗口可视区的垂直坐标
    3. pageX:鼠标指针位于文档的水平坐标(IE6-8不支持)
    4. pageY:鼠标指针位于文档的垂直坐标(IE6-8不支持)
    5. screenX:鼠标指针位于屏幕的水平坐标
    6. screenY:鼠标指针位于屏幕的垂直坐标
  4. 键盘事件

  5. keypress:按下功能键时触发(shift、ctrl、alt、fn、capslock)

  6. keydown:键盘按键按下时触发

  7. keyup:键盘按键谈起是触发

  8. 表单事件

    1. submit:当表单提交时触发
    2. reset:当表单重置时触发

正则表达式

一、概念

是一种描述字符串结构的语法规则,又称为RegExp

二、模式修饰符

  1. g:用于在目标字符串中实现全局匹配
  2. i:忽略大小写
  3. m:多行匹配
  4. u:以Unicode编码执行正则表达式
  5. y:粘性匹配,仅匹配目标字符串中此正则表达式的lastIndex属性

三、字符类别

  1. .:匹配除"\n"以外的任意单个字符
  2. \d:匹配任意的阿拉伯数字(0-9)
  3. \f:匹配任意一个换页符
  4. \D:匹配任意一个非阿拉伯数字字符
  5. \w:匹配任意一个字母(大小写)、数字、下划线
  6. \s:匹配一个空白符(空格、制表符、换页符、换行符)

四、字符集合

  1. [cat]:匹配集合中的任意一个字符:c、a、t
  2. [~cat]:匹配除c、a、t以外的字符
  3. [a-z]:匹配a到z之间的所有字符
  4. [~a-z]:匹配a到z以外的所有字符
  5. [a-zA-z0-9]:匹配大小写字母和0-9范围内的字符
  6. [\u4e00-\u9fa5]:匹配任意一个中文字符

五、字符限定和分组

  1. ?:匹配前面的字符出现零次或一次
  2. +:匹配前面的字符出现一次或多次
  3. *:匹配前面的字符出现零次或多次
  4. {n}:匹配前面的字符n次
  5. {n,}:匹配前面的字符最少n次
  6. {n,m}:匹配前面的字符最少n次,最多m次

六、方法

  1. String类:
    1. scarch():参数是一个正则对象
    2. split():按规则进行分割
    3. match():正则匹配函数
    4. replace():替换
  2. RegExp类:
    1. exec():
  3. d

七、贪婪匹配和懒惰匹配

贪婪匹配:表示要匹配尽可能多的字符。默认

\n"以外的任意单个字符
2. \d:匹配任意的阿拉伯数字(0-9)
3. \f:匹配任意一个换页符
4. \D:匹配任意一个非阿拉伯数字字符
5. \w:匹配任意一个字母(大小写)、数字、下划线
6. \s:匹配一个空白符(空格、制表符、换页符、换行符)

四、字符集合

  1. [cat]:匹配集合中的任意一个字符:c、a、t
  2. [~cat]:匹配除c、a、t以外的字符
  3. [a-z]:匹配a到z之间的所有字符
  4. [~a-z]:匹配a到z以外的所有字符
  5. [a-zA-z0-9]:匹配大小写字母和0-9范围内的字符
  6. [\u4e00-\u9fa5]:匹配任意一个中文字符

五、字符限定和分组

  1. ?:匹配前面的字符出现零次或一次
  2. +:匹配前面的字符出现一次或多次
  3. *:匹配前面的字符出现零次或多次
  4. {n}:匹配前面的字符n次
  5. {n,}:匹配前面的字符最少n次
  6. {n,m}:匹配前面的字符最少n次,最多m次

六、方法

  1. String类:
    1. scarch():参数是一个正则对象
    2. split():按规则进行分割
    3. match():正则匹配函数
    4. replace():替换
  2. RegExp类:
    1. exec():
  3. d

七、贪婪匹配和懒惰匹配

贪婪匹配:表示要匹配尽可能多的字符。默认

懒惰匹配:表示要匹配尽可能少的字符。在上一个限定符上加上一个"?"就是惰性匹配

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值