首页 > 其他分享 >day 20 前面知识内容回顾

day 20 前面知识内容回顾

时间:2022-08-27 11:46:40浏览次数:56  
标签:20 函数 回顾 对象 节点 字符串 js day 属性

内容回顾

一阶段(页面布局和样式)

html+css(布局和修饰)

html5新增 css3新增

移动端适配(大屏适配)rem (媒体查询)(seo 搜索引擎优化)

动画效果css3

二阶段(js基础以及底层实现)

js基础(es)(基础语法 循环 判断 表达式 变量...)

js的常用对象 (String Array Math Date ...)

dom和bom

js高阶(promise 闭包 原型 面向对象 ajax es5 es6...)

node.js 讲解

三阶段 (项目书写 以及框架应用)

vue.js 讲解(vue2 和 vue3)

小程序 (uni-app 支持vue的)

react.js 讲解 (react 16.0 和 16.0之前)

fluter 谷歌出的一个用于书写移动端和pc端的一个框架(不是js 类似于安卓)

重点内容回顾

变量声明

var 伪全局变量 const 常量(块级作用域) let 块级作用域变量

运算符及表达式

算术运算 + - * / % ++ -- (前置和后置的区别)

逻辑运算 && (同true取最后一个 false取第一个) || (有true 取第一个true 同false取最后一个) !(取反)

比较运算 > < <= >= != == (值比较) === (值比较 还要类型比较)(对象在比较的时候 比较的是栈地址)

赋值运算 = += /= %= *= -= (如果不是数值在 除=和+=外的所有都会先转为number)

三目运算 表达式?true的结果 :false的结果

位运算 >> << (执行最快)

基础数据类型

number string boolean null undefined symbol BigInt

强制转换的方法

String()

Boolean()

Number() 不会忽略后面的不是数值的内容(NaN) parseInt() parseFloat() 忽略后面的不是数值的内容

条件控制语句

if else else if 根据区间来判断

switch case breck 根据值来判断(采用===)

循环结构

for 根据对应的判断条件 迭代条件 和对应的初始值进行判断

for in 遍历对象 用于遍历key

for of 遍历数组 用于遍历value (必须实现迭代器 size length属性)

while 根据对应的判断条件 和迭代条件(循环体中) 进行判断(初始值是在外面的)

do while (先做一次后判断)

函数(Function 为构造)

使用function 声明 分为 匿名函数(只调用一次)和具名函数(重复调用)

调用函数 函数名() 自执行函数 (函数)()

arguments 伪数组 参数数组(获取所有传递的参数)

字符串

字符串不可变

字符串的相关方法

indexOf 根据字符串找下标(找第一次出现) lastIndexOf(从后往前找 找第一次出现的下标)search (支持正则)

charAt 根据下标找字符串 charCodeAt 根据下标找字符串的ascii码

toUpperCase 转大写 toLowerCase 转小写

slice 截取 substring 截取 substr 截取

concat 连接字符串 split 分割(支持正则)

replace 替换 (支持正则 替换第一个查找到的) macth 匹配(返回一个匹配的数组 支持正则)

字符串属性

length 返回对应的字符个数 (通过下标来访问对应的字符)

数组

数组是可变的

数组的相关方法

pop 删除最后一个 push 添加到最后 shift 删除第一个 unshift 添加第一个

concat 连接 join 转为字符串 sort 排序 reverse 反转

splice 删除 slice 截取 indexOf 根据对应的元素找下标

高阶函数

forEach 遍历 map 遍历 reduce 计算 reduceRight 计算 filter 过滤 some 判断有符合条件的 every 判断每一个是否都符合条件

date

日期对象(获取的是本地时间)通过new 关键词(utc 时间 1970.1.1 00:00:00)

日期对象的方法

get (获取)

getFullYear 年 getMonth 月(1月为0)getDay 星期几(星期天为0) getDate(月中的第几天)

getHours(时 24小时制 24为0)getMinutes(分 60为0) getSeconds(秒 60为0) ...

set (设置 设置超出自动向上递增)

setFullYear 年 setMonth 月(1月为0)setDay 星期几(星期天为0) setDate(月中的第几天)

setHours(时 24小时制 24为0)setMinutes(分 60为0)setSeconds(秒 60为0) ...

时间戳的获取

getTime 获取

Date.now() 获取

Object对象

对象里面的存储以key:value存储,通过key可以访问value

obj.key 及 obj[key]

BOM(重点为路由)
顶层对象 window

open 打开 close 关闭 print 打印 弹窗的方法(alert confirm prompt)控制台打印(console.(log,debug,info.error,warn))resizeTo 窗口大小改变 moveTo 改位置 scrollTo 改变滚动栏位置 ....

location 地址栏对象

属性: href (地址) pathname(路径) host(主机) hostname (主机名) hash (#后面的内容) search (?后面的) 协议 (protocol) origin 跨域

方法:location.replace 替换地址(不会加入历史) loaction.assign (会加入到历史) location.reload 刷新

hash 路由 :通过 onhashchange来监听

history 历史对象

属性 :length 获取个数 state 状态

方法: forward 前进 back 后退 go 任意的历史页面 pushState(更改当前的地址 加入到历史页面)replaceState(更改当前的地址 不会加历史页面)

history 路由: 通过onpopstate 监听

screen 屏幕对象

属性 availWidth availHeight (获取屏幕的宽度 js适配)

frames 框架对象(它是一个独立的window)
navigator 导航对象

属性: userAgent(浏览器系统)

DOM(三阶段没有dom操作的)

顶层对象 document

节点类型

元素节点 element 属性节点 attribute 文本节点 text

节点属性

nodeValue nodeName nodeType

节点操作相关属性

parentNode 父节点 parentElement 父元素节点

childNodes 子节点 children 子元素节点 firstChild 第一个子节点 lastChild 最后一个子节点

previousSibling 前一个兄弟节点 nextSibling 后一个兄弟节点 previousElementSibling 前一个兄弟元素节点 nextElementSibling 后一个兄弟元素节点

节点创建

document.createElement 创建元素节点 document.createAttribute 创建属性节点 document.createTextNode 创建文本节点

节点的插入

append 追加多个子节点 appendChild 追加一个子节点 insertBefore 插入某个节点到子节点的前面

节点的替换和删除和克隆

replaceChild 将一个子节点替换某个节点 remove 删除 cloneNode 节点克隆

元素节点的获取

getElementById getElementsByClassName getElementsByName getElementsByTagName

querySelector (根据选择器获取第一个) querySelectorAll(根据选择器获取所有的)

元素节点的属性

innerHTML innerText className id title style

attibutes 获取所有的属性节点(nameNodeMap 伪数组)

对于默认的属性 直接. a标签的href input标签的value等

属性的操作

getAttibute setAttribute removeAttribute

事件

事件流 冒泡(从里到外)及捕获(从外到里)

常用的事件分类

鼠标事件 mouse开头的 (mouseenter 和 mouseover(冒泡))

键盘事件 key开头(keypress和keydown的区别)

html事件(change , input,focus,blur,submit,reset,select...)

event 对象

属性:target offsetX pageX clientX screenX button (ctrlKey shiftKey altKey) type keyCode charCode

this

this 指向当前事件触发的元素

正则(Regexp 构造)

声明形式 : // new Regexp()

修饰符

g 全局 i 忽略大小写 m 分组

元字符

[] {} () ^ $

+ 一个到多个 * 0个到多个 ? 0到1个

\d 数字 \D \s 空白 \S \w 数字字母下滑线 \W

. 表示所有

方法

test 测试(返回true和false) exec 执行 (返回数组)

cookie

cookie存在于浏览器端一个存储容器,它是为了解决http的无状态问题 所产生的。

cookie的获取
document.cookie
cookie的结构

key=value;expires=过期时间;path=路径;domain=跨域地址;secure安全
cookie的特性
  • 随请求分发

  • 大小4kb

  • 存储数据为字符串

  • 存储在浏览器上

localstorage 本地存储 sessionstorage 本地存储(浏览器关闭直接删除)
  • 大小5MB

  • 存储的数据类型较多

  • 不会随请求分发

  • 不能自动删除

json格式

json是一种数据交互格式。一种是对象{} 一个是数组[] ,key一般字符串(""),值可以任意。

序列化方法

JSON.stringify

反序列化

JSON.parse

window.eval (不安全的)

es5 es6
es5新增

严格模式 新增的数组的高阶函数 (存在函数的this) this执行更改的方法(bind apply call)

es6新增

字符串新增方法 includes endsWith startsWith repeat

数组新增方法 Array.from() Array.of() find findIndex

函数新增 箭头函数 默认参数

新增值类型以及修饰符 symbol BigInt const let

新增对象 set map

解构 {} 扩展运算符 ...

新增 for in for of

新增模块化 import export

面向对象

对象的抽取 (行为抽方法 名词抽属性)

原型

prototype 属于函数的(显式原型)

__proto__ 属于对象(隐式原型) 指向对应构造函数的prototype

将方法放在原型上 属性放在构造函数里面

static 关键词 (静态的)

修饰属性及方法 (构造函数名调用)

原型链

__proto__里面的属性的过程 称为原型链

对象的继承

class extends关键词实现继承

原型继承

对象冒充(无法获取原型上面的内容)

组合继承(对象冒泡+原型继承)

面向对象的三大特性

封装 继承 多态(重写)

闭包

概述: 函数嵌套函数 ,外部函数的参数被内部函数引用。

闭包的作用

缓存 防抖 节流 函数柯里化

闭包的缺点和优点

占用内存。对应的函数内存的参数可以不会回收。

扩大了函数内参数的访问范围,外部函数的参数不会被外面所污染。内部函数要保持对外部函数的引用。

promise

概述: es6新增的一个类,用于解决回调地狱的问题。

promise原型方法

then catch finally

promise静态方法

all race resolve reject allSettled

解决回调的方案

在then里面返回一个新的promise对象

async 和 await

async 修饰函数 它会返回一个promise对象

await 在async里面 修饰promise对象 它会使当前线程等待(执行完才能释放)

宏任务和微任务

宏任务是异步的(script setTimeout setInterval..)

微任务也是异步的 宏任务的一块(.then .catch .finally..)

执行顺序

先走同步 后异步 异步中先宏后微 (eventLoop 事件轮询)

标签:20,函数,回顾,对象,节点,字符串,js,day,属性
From: https://www.cnblogs.com/jxooooolxe/p/16630176.html

相关文章

  • MySQL十:索引基础知识回顾
    转载~1、索引简介1.1什么是索引索引是对数据库表中一列或多列的值进行排序的一种结构,可以大大提高MySQL的检索速度。索引在MySQL中也叫做key,当表中的数据量越来越大时,......
  • day 21 ajax
    Ajax协议http的协议(基于tcp/ip)请求的类型同步请求(上一个请求没完成不能进行其他操作)<ahref="http://www.baidu.com">去百度</a><ahref="http://www.wobo.com">......
  • 「NOI2016」网格 题解
    「NOI2016」网格题解前言感谢zqm学长提供调代码服务!本文中,所有没有特殊说明的连通都是指四连通,相邻都是指上下左右相邻。题目大意有一个$n\timesm$的网格,上......
  • CCF 202112-2 序列查询新解(C++)
    该题关键点在于:分段计算先对f分段:for(inti=1;i<=n+1;i++)//以f(i)为区域划分计算在此区域内f的取值相同,值为:i-1。再对每个f值相同的区域按照g值进行分段:for(int......
  • win10环境安装vs2015的问题:缺少JavaScript_ProjectSystem.msi和JavaScript_LanguageSe
    最近有同事在win10下安装vs2015总是报错,安装中途报缺少文件JavaScript_ProjectSystem.msi和JavaScript_LanguageService.msi。想想看微软发布的产品应该不至于丢三落四,缺......
  • day 19 promise 和闭包
    闭包和promise闭包概述:闭包是一种书写代码一种结构,这种结构拥有的特性就是内部的空间在使用中不会被回收。(内部的变量以及对应的参数不会被gc回收)函数的预编译过程开......
  • day 16 运动
    运动概述运动主要是动画的操作,主要是操作某个document元素的属性变化(位置变化)运动主要的三步骤使用定时器来定时更改对应的内容实时获取对应的元素的属性及相关内......
  • day 17 运动2
    运动讲解(2)swiper插件(内置css和js)概述:swiper是一个开源的免费的一个滚动的组件(他可以运用于轮播图焦点图滑动效果等)内置的Demo(演示)他里面包含对应的css(以class......
  • day18
    面向对象回顾及原型讲解面向对象回顾核心概念:万物皆对象(顶层对象Object)抽取行为作为方法抽取名词作为属性俩种构建对象的方式构造函数构建es6的形式classclassP......
  • JavaSE-Day02-Java方法
    Java方法什么是方法System.out.println() 类.对象.方法()Java方法是语句的集合,他们在一起执行一个功能方法是解决一类问题的步骤的有序集合方法包含于类或对象之中......