JS 复习

一、

1.输入语法:prompt

2.输出语法:document.write(向body输出内容)

alert(弹窗)

console.log(控制台打印)

3.声明变量:let

4.命名:驼峰命名法

5.数组: 中括号

6.声明常量:const (不允许重新赋值)

7.基本数据类型:

字符串类型:用单引号,双引号,反引号包裹的数据

模拟字符串:`XXX${变量名}`

布尔型:true or false

8.检测数据类型:typeof XXX

9.转换为数字型:parseInt 只保留整数

parseFloat 可以保留小数

10.退出循环:break 退出整个循环

continnue 结束当前一次循环,继续下一轮循环

二、

1.循环:明确循环次数的,推荐用for循环 for(let i = 0; i <= 10; i++)

不明确循环次数的,推荐使用while循环

2.数组:数组长度 arr.length

遍历数组:用for循环遍历

操作数组:新增在数组的末尾 arr.push

新增在数组的开头 arr.unshift

删除最后一个元素 arr.pop

删除第一个元素 arr.shift

删除指定元素 arr.splice(起始位置,删除几个元素)

3.函数:声明的函数必须调用后才会真正被执行(可以多次调用)

函数传参:function getSum(形参, 形参) { } getSum(实参, 实参)

函数返回值:函数要返回数据,用return(return后面的数据不要换行写)

变量访问原则:在能够访问到的情况下 先局部,后全局

立即执行的函数 (function () {console.log(11) }) ( )

逻辑短路: && 左边false就短路

|| 左边true就短路

转换为布尔型:"", 0, underfined, null, false, NaN转换为布尔值后为false,其余为true

三、

1.对象:let 对象名 = { }

属性:查:点形式 对象.属性

\]形式 对象\['属性'

增:对象.属性 = 'XXX'

改:对象.属性 = 'XXX'

对象中的方法:调用对象中函数

遍历对象:for ( let 属性名 in obj) {}

console.log (属性名) 打印属性名

console.log (obj属性名) 打印属性值

内置对象:math.ceil 向上取整

math.floor 向下取整

math.max 找最大值

math.min 找最小值

math.pow 幂运算

math.abs 绝对值

生成随机数 math.floor(math.random() * (M - N + 1)) + N

2.DOM

获取DOM对象

根据CSS选择器来获取DOM元素:document.querySelector( ) 选择匹配一个元素,可直接修改

document.querySelectorAll( ) 选择匹配多个元素,不可直接修改

()里必须是字符串,必须加单引号

操作元素内容:元素innerText属性,显示纯文本,不解析标签

元素innerHTML属性,会解析标签

操作元素属性:操作元素常用属性:img.src img.title

操作元素样式属性:

通过style属性操作CSS:box.style.backgroundColor box.style.border

通过className操作CSS:box.className = 'active'

通过classList操作类控制CSS:

box.classList.add(' ') 添加 box.classList.remove(' ') 删除 box.classList.toggle(' ') 切换 操作表单元素属性:

正常的有属性有取值的跟其他的标签属性没有任何区别 uname.value

可以通过布尔值添加或移除表单属性的效果

自定义属性:以data-开头

定时器-间歇函数:能够使定时器函数重复执行代码

开启定时器:setInterval(function () { }, 100)

关闭定时器:clearInterval

四、

1.事件监听(绑定)

语法:元素对象.addEventListener('事件类型', 要执行的函数)

三要素:事件源:哪个元素被事件监听了

事件类型:什么方式触发

事件调用的函数:要做什么事

2.事件类型

(1)鼠标触发:click 鼠标点击;mouseenter 鼠标经过;mouseleave 鼠标离开

eg. div.addEventListener('click', function () { })

(2)焦点事件:focus 获得焦点;blur 失去焦点

(3)键盘事件:Keydowm 键盘按下触发;Keyup 键盘抬起触发

(4)文本事件:input 用户输入事件

3.事件对象

(1)获取对象

定义:事件对象里有事件触发时的相关信息

语法:元素.addEventListener('click', function (e) { }) e为事件对象

(2)事件对象常用属性

type 获取当前的事件类型

clientX/clientY 获取光标相较于浏览器可见窗口的左上角的位置

offsetX/offsetY 获取光标相较于DOM元素左上角的位置

key 用户按下键盘键的值

(3)trim用法:去除字符串左右的空格

4.环境对象

定义:函数内部特殊的变量this 谁调用,this就是谁

5.回调函数

定义:函数A当作参数来传递给另一个函数B的时候,函数A就是回调函数

6.事件流:事件完成执行过程中的流动路径 触发事件时会经历捕获和冒泡阶段

(1)事件捕获:从DOM的根元素开始去执行对应的事件(从外到里)

addEventListener第三个参数传入true代表捕获阶段触发;false代表冒泡阶段触发(2)事件冒泡:事件冒泡会依次调用所有父级元素的同名事件

(3)阻止冒泡:此方法可以阻断事件流动传播,不光在冒泡阶段有效,捕获阶段也有效

事件对象.stopPropagation()

(4)解绑事件:btn.addEventListener('click', fn) 绑定事件

btn.removeEventListener('click', fn) 解绑事件

(5)鼠标经过事件区别:mouseover 和 mouseout会有冒泡效果

mouseenter 和 mouseleave 没有冒泡效果

7.事件委托:减少注册次数,提高程序性能

语法:事件对象.target.tagName === ' '

8.其他事件

(1)页面加载事件:加载外部资源加载完毕时触发的事件(可以针对某个资源绑定load事件)

事件名:load;DOMContentLoaded

(2)元素滚动事件:滚动条在滚动的时候持续触发的事件

事件名:scroll

获取位置:scrollLeft 和 scrollTop(获取元素内容往左、往上滚出去看不见的距离)

滚动到指定的坐标:语法:元素.scrollTo(x, y)

(3)页面尺寸事件:resize浏览器窗口大小发生变化的时候触发的事件

获取元素宽高:clientWidth 和 clientHeight

9.元素尺寸与位置

10.日期对象

实例化:new Date()

日期对象方法

时间戳: +new Date() (可以返回当前时间戳或者指定的时间戳)

时间转换公式

11.节点操作

(1)查找节点

父节点查找:子元素.parentNode

子节点查找:父元素.children

兄弟关系查找:下一个兄弟节点:nextElementSibling属性

上一个兄弟节点:previousElementSibling属性

(2)增加节点:创建节点:document.createElent('标签名')

追加节点:父元素.appendChild(要插入的元素)

父元素.insertBefore(插入元素,放到哪个元素前面)

克隆节点:元素.cloneNode(布尔值)

(3)删除节点:父元素.removeChild(要删除的元素)

12.M端事件:触屏事件touch

五、

1.window对象(全局对象)

(1)定时器-延时函数

setTimeout(回调函数, 等待的毫秒数) 【让一段代码延迟执行】

只执行一次,所以可以理解为是把一段代码延时执行

延时器要等待,所以后面的代码先执行;每次调用都会产生新的延时器

清除延时器:let timer = setTimeout( , )

clearTimeout(timer)

对比:间歇函数:每隔一段时间就要执行一次

(2)JS执行机制:同一个时间只能做一件事

(3)location对象:

location.href = 'http://www.baidu.com' 获取完整的URL地址

location.search 获取地址中携带的参数, ?后面部分

location.hash 获取地址中的哈希值,#后面部分

location.reload 通过传入参数true表示强制刷新

(4)navigator对象:记录浏览器自身的相关信息

(5)history对象

history.back( ) 后退一个页面

history.forward( ) 前进一个页面

history.go(1/-1) 1为前进一个页面,-1为后退一个页面

2.本地存储

(1)页面刷新数据不会丢

(2)分类:存储数据:localStorage.setItem(key, value)

获取数据: localStorage.getItem(key) 【函数里要加return】

删除数据:localStorage.removeItem(key)

(3)存储复杂数据类型

JSON.stringify(复杂数据类型)【把复杂数据类型转化为JSON字符串】

JSON.string(JSON字符串)【把字符串转化为对象】

(4)数组中map方法:map可以处理数据,并且返回新数组

(5)数组中的jion方法:join()方法用于吧数组中的所有元素转换成一个字符串

3.正则表达式

语法

(1)定义正则表达式语法:const 变量名 = /表达式/

(2)判断是否有符合规则的字符串:regObj.test(被检测字符串)

(3)查找符合规则的字符串:regObj().exec(被检测字符串)

元字符

(1)边界字符:提示字符的位置

(2)量词:设定某个模式出现的次数 【注意:逗号两边不要有空格】

(3)字符类

abc abc中任选一个字符

a-z a-z 26个小写英文字母其中任何单个字符

\^a-z 26个小写英文字母以外的其他任何单个字符

(4)预定义:指的是某些常见模式的简写方式

修饰字符:约束正则执行的某些细节行为

(1)语法:/表达式/修饰符

(2)i 指ignore,例如匹配正则时忽视字母的大小写

g 指global,匹配所有满足正则表达式的结果

(3)替换repace

语法:字符串.repace(/正则表达式/, '替换文本')

4.放大镜效果

5.作用域

(1)局部

函数作用域:在函数内声明的变量,只能函数里用

块作用域:用{ }包裹的代码称为代码块

(2)全局:在这里声明的变量,函数内部也可以访问

(3)作用域链

(4)js垃圾回收机制

(5)闭包

(6)变量提升

6.函数进阶

(1)函数提升

(2)函数参数

动态参数:arguments是一个伪数组

剩余参数:允许我们将一个不定数量的参数表示为一个数组(...arr)

展开运算符:求数组最大、小值,合并数组

(3)箭头函数

7.解构赋值

(1)数组解构:将数组单元值快速批量赋值给一系列变量

(2)对象解构:将对象属性和方法快速批量赋值给一系列变量

(3)遍历数组forEach方法:用于调用数组的每个元素,并且将元素传递给回调函数

语法:被遍历数组.forEach(item => {

})

(4)筛选数组filter方法:

创建一个新数组,新数组的元素是通过检测指定数组中符合条件的所有元素

语法:被遍历的数组.filter(function (currentValue, index) {

return 筛选条件

})

六、

1.深入对象

(1)创建对象:利用对象字面量创建对象 语法:const obj = { key: value }

利用new Object 创建对象 语法:const obj = new Object()

利用构造函数创建对象 语法:function Person() {} const obj = new Person()

(2)构造函数:特殊的函数,主要用来初始化对象(通过构造函数来快速创建多个类似的对象)

注意:开头以大写字母命名;只能用new操作符来执行;函数内部不写return

(3)实例成员&静态成员

实例成员:通过构造函数创建的对象称为实例对象,实例对象中的属性和方法称为实例成员

静态成员:构造函数的属性和方法被称为静态成员

2.内置构造函数

基本数据类型:字符串、数值、布尔、undefined、null

引用类型:Object、Array、RegExp、Date等

包装类型:String、Number、Boolean等

(1)Object(用于创建普通对象)【不推荐使用】

获得对象中所有属性值:Object.values

静态方法常用于对象拷贝:Object.assign

(2)Array(用于创建数组)【不推荐使用】

reduce: arr.reduce(function (prev, current){}, 起始值)

伪数组转化为真数组:Array.from()

(3)String

常见实例方法:

(4)Number(用于创建数值)

常见方法:toFixed() 设置保留小数位的长度

3.编程思想

(1)面向过程:按照分析好了的步骤,按照步骤解决问题

(2)面向对象:以对象功能来划分问题,而不是步骤

特性:封装性、继承性、多态性

4.构造函数:体现在面向对象的封装特性,构造函数实例创建的对象彼此独立、互补影响

5.原型

(1)原型:一个对象,我们也称prototype为原型对象

作用:共享方法;可以把那些不变的方法,直接定义在prototype对象上

构造函数和原型里面的this指向实例化的对象

原型-this指向实例化的对象

数据扩展方法

(2)constructor属性:每个原型对象里面都有个constructor属性(constructor构造函数)

作用:该属性指向该原型对象的构造函数

(3)对象原型:对象都会有一个属性_proto_指向构造函数的prototype原型对象

(4)原型继承:封装-抽取公共部分

继承-让男人和女人都能继承人类的一些属性和方法

(5)原型链

6.深浅拷贝

(1)浅拷贝:拷贝的是地址

(2)深拷贝:拷贝的是对象,不是地址

通过递归实现(如果一个函数可以在内部调用其本身就算递归函数)

js库lodash里面cloneDeep内部实现了深拷贝

通过JSON.stringify()实现

7.异常处理

(1)throw抛异常

(2)try/catch捕捉异常

(3)debugger

8.处理this

(1)this指向(谁调用this的值指向谁)

(2)改变this

call():使用call方法调用函数,同时指向被调用函数中this的值

apply():使用apply方法调用函数,同时指向被调用函数中this的值(必须是数组)

bind():不调用函数但能改变函数内部this指向 9.性能优化

(1)防抖:

触发事件后在n秒内函数只能执行一次,若在n秒内又触发了事件,则会重新计算函数执行时间 (2)节流:就是指连续触发事件但n秒中执行一次函数

祝你好运了老己,灰太狼就帮到这里了,春招能不能过看你了

相关推荐
vipbic4 小时前
别再把“做个H5”挂嘴边了:这个词,官方压根就没有定义过
前端
ZC跨境爬虫6 小时前
跟着 MDN 学CSS day_39:(Flexbox 弹性盒子核心机制)
前端·css·ui·html·tensorflow
小陈同学呦6 小时前
前端如何处理订单状态导航的数据竞态问题
前端·javascript
开发者每周简报6 小时前
网海三部曲·无名宗师传
javascript·人工智能
喵个咪6 小时前
GoWind Toolkit 前端代码生成|Vue3(ElementPlus/Vben)、React(AntDesign)全自动一键生成教程
前端·vue.js·react.js
isyangli_blog6 小时前
OpenDayLight (Carbon 版本) 启动与组件安装
开发语言·php
vb2008116 小时前
FastAPI APIRouter
开发语言·python
Benszen6 小时前
KVM虚拟化解决方案
开发语言·perl
会编程的土豆6 小时前
Go 语言反射(Reflection)详解
开发语言·后端·golang
東雪木6 小时前
多线程与并发编程 专属复习笔记
java·开发语言·笔记·java面试