<!DOCTYPE html>是html5的头,DOCTYPE是document type的简写,文档类型,作用是说明该文档是html的什么版本
DTD是文档类型定义,里面包含解析文档的规则,浏览器根据DTD中定义的规则来解析页面并展现出来,分类为过渡型、严格型、框架型
HTML版本发展:HTML2.0----HTML3.2----HTML4.0----HTML4.01----XHTML1.0---HTML5(2008年)
CSS是cascading style sheets层叠样式表
H5新增常用audio video svg canvas h5定位 本地存储
新增表单验证输入类型email number range 时间选择器
新增语义化标签:address aside article audio canvas footer header nav section
CSS3新增border-radius box-shadow @font-face transition过渡 animation
Transform移动
Flex布局:flex容器,容器属性flex-direction flex-wrap justify-content flex-flow align-items
Rem布局:根据页面html字体大小来渲染页面,计算当前字体大小有两种,js计算和媒体查询,一般ui设计稿都是iphone6的750px来的,除以7.5就是让1rem=100px
Document.documentElement.style.fontSize = window.innerWidth/7.5*2 +’px’
Stylus:适合编译环境使用打包,需要安装对应的loader,简写{} ; :都是可选,可以设置变量$fontsize=14px 样式书写支持运算,支持函数,@import导入样式文件styl,&父级引用,
ES6核心:
- 解构赋值
- 数组解构
Let [a,b] = [1,2,3]
解构赋值等号右侧个数必须大于或等于左侧,不然解构失败,解构结果是undefined
等号右侧如果不是数组会报错
允许给定默认值let [a,b,c=66] = [1,2]
默认值可以是表达式,用到时才会求值
数组解构必须跟顺序对应才能取到对应值
-
- 对象解构
对象解构指定key就可以获取对应值,跟次序无关let {a,b} = {a:666,b:999}
允许给默认值
- 块级作用域
ES5只有函数作用域和全局作用域,与块级作用域配合的是let声明变量和const常量声明,块级作用域标志{}大括号,没有块级作用域之前使用的立即执行函数来达到块级作用域的目的,立即执行函数执行后就会丢失索引,类似于销毁
Let和const声明不属于window
Let声明没有变量声明提升,必须先定义后使用,不能重复定义,
Const声明没有声明提升,必须先定义先赋值后使用,不允许修改值,如果保存的是个对象或者数组这一类引用值,保存的只是指针,冻结对象方法Object.freeze(obj)
- 字符串模板``
字符串模板里面允许无限换行,允许${变量名}插入变量,无需用之前的++连接,无计算功能,单纯字符串,${这里面允许进行计算}
字符串新增方法:
Str.include(‘a’)返回布尔值
str.indexOf('要查找的东西')返回值是索引位置,没有就是返回-1
判断是否以规定字符串开头str.startsWith("监测东西")
结尾方法str.endsWith("监测东西")
重复字符串str.repeat(100)
- 函数变化
形参可以给默认值
引入了箭头函数
箭头函数中this默认不再指向window不再指向谁调用指向谁,而指向其定义时所在的环境
- 数组
数组新增一个扩展运算符…
功能是可以展开数组或者合并成数组
Push pop unshift shift slice splice concat reserve sort
Map forEach filter some every (value,index,arr)=>{}
Reduce((prev,cur,index,arr)=>{})
Object.keys(接收一个对象或者数组) 返回值是个对应的数组
Object.values(接收一个对象或者数组) 返回值是个对应的数组
Object.entries(接收一个对象或者数组) 返回值是个对应的数组
类数组不具备数组的各个方法,需要转换成真正的数组,Array.prototype.slice.call(类数组)
ES6方法是Array.from()
ES6新增好用方法arr.findIndex((val,index,arr)=>{})
- 对象
有了简写方式,如果值的变量名和对象的key相同可以简写
Object.is(one,two)彻底比较两个数
Object.assign({},s,s,s)对象合并,后面如果有相同的会覆盖前面的,还可以用来深度复制一个对象
- 解决异步问题
1.Promise对象
2.async和await
3.generator函数
- 模块化
之前只是一些社区规定的模块化,比如基于commonjs的nodejs还有一下模块化规范如AMD
新增规范的模块化
Export default{}
Import * from ‘../../
全部一起引入import * as module from './module/test.js';全部参数会存入module对象里面’
- 类和继承
- 新增数据类型
- 新增数据结构map和set
Set对应数组数据结构
Let set = new Set([‘0’,’2’,’1’])
对应方法set.add() set.delete() set.clear()
Set中不允许出现重复的值,可用于数组的去重
- 代理proxy
Let obj = new Proxy(要代理的对象,处理的回调函数)
- js基础
typeof(变量)返回值有boolean string number undefined object function都是字符串
A instanceof B
变量未定义就使用就会报错,但是typeof使用不会报错,var变量声明有变量提升
匿名函数就是函数表达式,函数有函数体和函数名
递归第一找出口,无出口就是死循环
ES5之前只有函数作用域和全局作用域
函数执行前有一个预编译过程
创建AO对象—找形参和变量声明并将其值置为undefined—实参与形参相统一—找函数声明,函数名为属性名,函数体为值
全局对象叫GO存储着全局变量和全局函数
变量声明提升函数声明提升
var全局变量都指向window
const和let不再指向window均为undefined
this的4个特点
对象new操作细节
- 创建空对象this={}
- 设置对象的constructor属性为该构造函数,proto属性指向该构造函数的原型
- 执行该构造函数并将this指向新的对象
- 隐式返回一个对象实例
包装类:解决原始值数据类型无相应方法而不会报错,原始值存在栈里面,没有属性
错误提示分类
Call和apply可以改变this指向,不同的是传参列表不一样
区分一个变量到底是什么类型
Es5严格模式
使js代码更加规范,避免一些不必要的问题出现
严格模式不能使用的语法
With eval arguments.caller/callee
变量必须先声明后使用
- 作用域
全局作用域和函数作用域
作用域存储着函数执行时的上下文对象,函数每次执行这个上下文对象都是独一无二的,函数执行完毕执行上下文就会销毁
作用域中存储着变量,函数,查找变量函数从AO---GO就近原则
[[scope]]中存储着上下文执行的对象的集合我们称之为作用域链也就是GO和AO
- 闭包
内部函数保存到了外部,将会产生闭包,闭包会导致原有的作用域不释放,造成内存泄漏,内存泄漏就是内存被占用
闭包就是一个函数有权访问另一个函数的作用域
函数表达式,将一个函数赋值给一个变量保存,只有真正去访问执行这个变量的时候才会执行该函数
闭包核心作用就是变量私有化,不会去污染全局,而只是向外提供操作变量的方法
- 原型
原型是对象的一个属性__proto__ === prototype
原型定义了构造函数制造的对象的公共祖先,使用构造函数制造出的对象可以继承该构造函数的原型上的属性和方法
对象实例的constructor属性里面保存着自己是由什么构造函数制造而来的
Object.prototype是原型链的最终端
一个构造函数继承另一个构造函数就会产生原型链
Null对象没有原型
原型上挂载着该类型构造函数的共用方法
在es5之前继承就是通过继承原型的方法来实现继承的
继承分类:好处就是减少代码书写量
- 传统继承 儿子继承父亲,父亲继承祖父,导致了过多不必要的继承
- 使用构造函数的call和apply进行继承 表面上是减少了继承,但是每次都要走一次构造函数
- 共享原型
- 圣杯模式 接组一个中间函数
- 数组
Push pop unshift shift slice splice concat join reverse sort
数组乱序好方法
- DOM
增删改查
- BOM
几个核心对象history location navigator screen
- 事件
事件绑定
事件冒泡和事件捕获
阻止冒泡和阻止默认事件
事件委托
鼠标事件 click mousedown mousemove mouseup mouseover=mouseenter mouseout=mouseleave
键盘事件 keydown keyup keypress
文本框事件input change focus blur
- JSON
一种传输数据的格式,以前是xml
JSON格式跟对象很像
两个核心方法JSON.stringify(obj) JSON.parse(str)
- 一个页面渲染过程
渲染引擎解析页面标签和css各自形成dom树和css树最后合并成random树
- 正则表达式
RegExp
Reg上的方法test(返回值是布尔值)和exec返回值是个类数组,每执行一次得到一个结果,直到匹配完成
字符串上的方法
- match匹配得到所有结果并以真数组的形式返回
- split按reg表达式拆分
- replace替换,先进行reg匹配然后进行替换,第二个是要替换成为的字符,支持函数
表达式符号[]一个表达式代表一位
元字符\d \D \w \W\s\S\b\B
量词+ * ? {}
子表达式(\w)
子表达式引用\1\2..
正向断言(?=b)不参与匹配,仅仅是作为必要条件存在
- jQuery
核心好处就是简化DOM操作,兼容性增强,无需考虑兼容
操作样式使用css(属性名,属性值) 原生是style.属性名=属性值
原生DOM对象和jQuery对象$('#id').get(0)
jQuery的DOM操作
- html()
- text()
- css()
- val()
- attr()
- removeAttr()
- 元素class设置
- addClass
- removeClass
- toggleClass
- 获取元素宽高,允许设置
- width()
- height()
- innerWidth()
- innerHeight()
- 获取元素偏移,只能获取不能设置
- offset().left/top
- position().left/top
- 滚动条
1.$(window).scrollTop();滚动条垂直方向滚动距离,如果传参进去就是设置移动距离
2.$(window).scrollleft();滚动条水平方向滚动距离,如果传参进去就是设置移动距离
11.节点操作
1.创建节点$('<div>123</div>')
2.插入方法append()
3. appendTo();剪切操作,将已存在的元素剪切到某个元素后面
4.prepend();插入到内部的前面,跟append相反
全局方法
- $.each(arr/obj,fn)
20.jQuery事件绑定
.click(fn)
On(‘click’,fn)
Off(‘click’)
One(‘click’,fn)
21.事件模拟trigger(‘click’,data)
22.动画
1.show(时间,回调函数)
2.hide(时间,回调函数)
3.toggle
4.slideUp
5.slideDown
6.fadeIn
7.fadeOut
8.fadeTo
23.自定义动画el.animate({css},时间,回调函数)
24.jQuery中的ajax
核心方法$.ajax({})
- 原生ajax
- vue核心
- linux常用命令
last显示最近系统登录情况
创建文件夹mkdir
创建文件touch
删除文件夹或者文件rm –rf
移到文件夹mv
复制cp
Top 任务管理器
Ps –ef|grep test当前所有进程信息,grep进行匹配的意思
Df查看存储空间分区使用情况
Netstat查询所有端口
查看txt文本cat less more vi tail head
Shell编程
输出echo “hello world”
定义变量a=10 b=”nihao”
使用变量$a $b
执行sh文件bash gys.sh
- tcp/ip协议
计算机互联通信而建立的协议,是一个协议族,里面包含很多协议
核心就是分层
- 数据接口层
包含osi7层模型的物理层和数据链路层,物理层包含通信电缆,通信设备等
数据链路层包含
- 网络层
包含ip协议,IP协议是TCP/IP协议的核心,所有的TCP,UDP,IMCP,IGCP的数据都以IP数据格式传输。要注意的是,IP不是可靠的协议,这是说,IP协议没有提供一种数据未传达以后的处理机制--这被认为是上层协议--TCP或UDP要做的事情。所以这也就出现了TCP是一个可靠的协议,而UDP就没有那么可靠的区别
Ip协议版本ipv4 ipv6
Ip地址
Arp协议
Icmp协议及ping命令使用
Ip路由协议
包含rip ospf
- 传输层
传输层主要协议是tcp和udp
Tcp协议
Tcp连接过程
- http
Uri和url
http状态码
https原理
http请求过程
- 面试小知识
Css hack解决不同浏览器css样式兼容
IE内核trident 兼容-ms-
火狐内核gecko 兼容-moz-
谷歌内核webkit 兼容-webkit-
欧朋浏览器presto 兼容-o-
- w3c标准认识及语义话标签
垂直居中方法
- flex布局
- 绝对定位+负margin
- 绝对定位+4个0+margin auto
- 绝对定位+transform+translate负50%
Div高度塌陷 元素脱离文档流导致,如浮动和position=absolute
3列布局,中间固定,左右自适应displayflex 中间固定,左右使用flex进行分配
JavaScript核心ECMAScript BOM DOM
解释性语言
单线程---异步和同步---单线程一个时间只能做一件事—页面上看到的多个事情一起做是因为计算机组成原理有个叫时间轮转片的东西,他把每个要执行的任务分割成了很多个小片段,然后去执行,造成视觉上是同时在执行,其实是太快了
js代码有页面级js和外部链接js 同时存在一个标签是外部高于内部,只有外部js生效
变量声明var a;
变量赋值a=100
变量定义var a=100
变量名:以字母,下划线,$开头,还有数字,数字不能开头,不能是关键字和保留字
原始数据类型:Number String Boolean Null占位覆盖 Undefined未定义 Symbol
原始数据类型存储在栈里面,栈里面存数据存的是实打实的数据,无论是复制或者覆盖,都是真实发生,栈里面数据进行赋值是拷贝的关系,先进后出,类似口袋
原始值有个不可修改的属性,就是说房间里面存进去了东西就不能覆盖了,只能新开个房间
原始值进行重新赋值原理,他会新开一个房间把新的值存进去然后把之前的那个地址移到这个新的栈的地址,之前的地址初始为最初地址编号
引用数据类型:Array Object Function Date RegExp
引用数据类型的变量名存储在栈里面,也就是引用值只是在栈里面存储了一个指针,这个指针指向堆的地址,堆里面存储着引用类型的值
引用值如果进行重新赋值,也就是再次出现等号,他就会新开一个房间,然后修改这个引用值的栈里面存的地址指向新的房间
删数据删的是地址,抹除的是地址,永久性删除只能使用数据进行覆盖
由值决定变量类型,他是动态类型语言
弱类型语言,不指定变量类型,由赋予的值决定
强类型语言,指定变量类型
两个数交换值
- 借助第三个变量
c = a
a =b
b =c
- 两个数进行加减运算
a=a+b
b=a-b
a=a-b
编程形式
- 面向过程
机械性解决问题,第一步做什么,第二不做什么…按步骤按顺序来
- 面向对象
依赖于解决问题的办法,谁能解决第一个问题,谁能解决第二个问题…
Typeof区分数据类型6个值:string boolean number undefined object function
类型转换
- 显示类型转换null可以转换成0 undefined会转成NaN看起来不是数字都是转成NaN
Number(“123”)
toString()
parseInt()
- 隐式类型转换 内部都是调用显示类型转换里面的方法
Var num=”1”-“1”
isNaN()内部调用Number()
++ -- + - ==正负运算符会自动调用Number()进行转换
+号两侧有字符串就会自动调用String()进行转换成字符串
比较运算最后得出结果是布尔值true/false
空格字符串是true
空串是false
高内聚 低耦合 耦合就是重复的代码,使用函数对耦合代码进行内聚简化代码
代码规范:小驼峰首字母小写后面单词的首字母大写 大驼峰首字母大写如构造函数
函数
- 函数声明function test(){}
- 函数表达式
- 具名函数表达式,函数名无效,写不写无所谓
- 匿名函数表达式--函数表达式
- 形参和实参个数可以不用相同,谁多谁少都行
- 实参都存储到了arguments中,arguments是个数组,实参列表
- 形参个数存到了函数名里面length属性
- 实参列表arguments和形参列表相映射关系,一个变另一个变
- 实参列表出生的时候有多少就是多少,后期加入的变量不会进行相互映射
- 函数终止return
函数递归:也就是函数自调用,在自己的函数体内执行自己,递归必须if指定出口,也就是亘古不变的东西 ,找数学规律符合我们人的思考,常用是阶乘和斐波那契数列
全局变量和局部变量 全局作用域和函数作用域,最里面可以拿外面所有,外面不能拿里面,访问顺序依据就近原则
解释性语言过程
- 语法分析
- 预编译 发生在执行前一刻
变量 声明提升,会把var声明,函数声明整体提升,系统会把函数声明会永远提升到逻辑的最前面,都是预编译造成的
暗示全局变量,就是没有使用var直接赋值,归window对象所有,在严格模式报错,全局变量、全局函数都会挂载到window对象上
全局范围声明的变量归window对象所有
预编译过程:函数执行前一刻创建AO对象也就是执行期上下文对象,其实是作用域
- 找函数里面的形参和变量
- 形参和实参值相统一
- 找函数声明,将函数体作为值赋予函数名
- AO完毕后就是执行函数
- 预编译有全局预编译和函数预编译
- 全局预编译过程
- 创建GO(就是window 对象)
- 找变量声明,值为undefined
- 找函数声明,值为函数体
- 全局执行
- 先有GO后有AO作用域遵循就近原则,如果全局和局部有相同变量名,用自己的
作用域:随着函数而产生,一个函数定义的时候他就会自带一些属性,如fn.name、fn.prototype等,这些属性是可以访问的,但是有些属性是访问不了的,他是给js引擎读取的如fn.[[scope]]这里面存储的就是函数的作用域,一个隐式的属性,我们无法使用
一个函数在每次执行前都会创建一个独一无二的执行期上下文叫AO这个执行期上下文决定了函数执行时的环境,函数执行完这个执行期上下文会销毁
作用域链:[[scope]]中所存储的执行期上下文对象的集合,这个集合呈链式连接,这种连接叫做作用域链,一个函数在定义时候就有了fn.name fn. Prototype fn.[[scope]]但此时的[[scope]]中只有一个GO当函数要执行的前一刻就会预编译产生AO并且AO会排在GO的前面
在函数执行中查找变量从作用域链顶端开始查
函数在全局定义那一刻就产生了作用域,那就是全局的GO,函数执行前一刻产生了执行期上下文那就是AO
如果函数A里面还定义了一个函数B那么函数B的出生环境是整个A函数的作用域链,B自己的执行期上下文AO
函数执行完毕后销毁自己的AO回归到被定义状态
闭包B函数在A函数内,B被return到了全局,保存到了外部
闭包会导致原有的作用域链不释放,造成内存泄漏
闭包作用:
- 实现累加器,不依赖于外部变量,每执行一次函数就会累加一次
- 可以做缓存,作为一个存储结构,外部不可见,向外提供两个操作数据的方法
- 变量私有化,只提供对外使用方法接口
- 模块化开发,防止污染全局变量
立即执行函数,模拟块级作用域,执行完一次就会销毁,一般适用于初始化功能
(function(){}())只执行一次,执行完就会销毁释放,有返回值,有形参,正常都有返回值,要的就是返回值,函数必须有预编译,有执行期上下文
执行符号() 只有表达式才能被执行符号执行 (…)可以变成表达式 被执行符号执行的表达式其函数名被忽略,永远放弃,立即执行函数会放弃函数名,失去索引
函数里面包含变量,但函数未执行,那么整个变量会用最后的值,仅仅是函数体赋值
函数不会去执行,仅仅是赋值,只有去执行的时候才会去找那个变量
使用立即执行函数解决闭包问题,10个立即执行函数都有对应的j解决办法仅此一种
为了及时得到for循环里面的i使用立即执行函数的形参j接收这个i这样就可以实时拿到当时对应的i,立即执行函数拿的是当时那个立即执行函数定义的执行上下文,比如给多个li绑定点击事件,输出每个li的索引,就需要借助立即执行函数的j来实现
对象 引用数据类型 对象里面可以存属性和方法,方法可以控制对象里面的属性
对象创建
- 对象字面量var obj = {}
- 构造函数
- 系统自带构造函数var obj = new Object()
- 自定义构造函数
- 构造函数规定大驼峰式命名,首字母大写
- 使用构造函数创建对象需要使用new操作符
- 对象产生后可以随时增删改查,其他语言的对象出生是什么样就不能改了
- 构造函数产生对象的过程new操作后发生以下步骤
函数最开始var this = {}其实并不是空的,而是有个属性__proto__:Person.prototype这个属性就是原型,所有由这个构造函数产生的对象都会继承这个属性
执行this.xxx=xxx
隐式返回this 如果捣乱显式return {}就可以覆盖this但是return 1原始值就不能阻断,依然正常返回this
只要是new就是产生一个新的对象,每个new出的对象是独立的
- 模拟new之后过程
- 对象的增删改查
- 变量未定义就使用会报错,但是访问对象上没有的属性不会报错
原始值是不能进行添加方法和对象的,但是有一种叫对象字符串,对象数字,对象布尔值,使用构造函数构造出的数字,字符串,布尔值就是对象,是对象就可以进行添加属性和方法
原始值是规定没有属性和方法的,如果添加也不会报错,但是也无效,用完就会delete销毁,这就是包装类,字符串有length属性也是包装类导致的new String(“abc”).length
原型 从对象如何产生引申出来,第二种产生对象的方法是使用构造函数,而原型就是函数对象上的一个属性__proto__这个属性里面有一些方法和属性,他定义了所有由该构造函数产生的对象出生后该有的属性和方法,也就是出生后该有什么,而且是公平的,所有产生的对象都会有,相当于从祖先那继承而来的一样
原型的第一个应用就是,使用构造函数产生对象时,把一些公有属性存放到原型里面,这样所有产生的对象都可以继承到,做到减少代码的冗余,不用每次都执行一遍相同的代码,这就是原型的用处,提取公有属性
已经使用构造函数产生了的对象,可以添加属性,如果添加一个与原型中同名的属性,他只会在本对象上添加一个同名属性,访问的时候也是遵循就近原则,访问自己身上的属性,自己身上没有才会去访问继承原型而来的属性,原型上属性无法通过后代修改,只有通过原型自己修改Person.prototype.name = “gys” 原型Person.prototype是个对象,使用构造函数产生的对象会自带一个属性constructor他是保存自己是由哪个构造函数产生的,constructor属性从原型上继承来的
Person.prototype是个对象,而person上的__proto__属性就是指向这个对象
引用值重写与修改有本质区别,修改是在原有基础上进行数据修改,而重写重新赋予他一个新对象,指向这个新对象
原型链:多次继承之后就会出现继承多个属性,继承多个构造函数的原型,构成原型链,访问原型的时候从自己一直往下找son----father----grand---最终原型Object.prototype
如果原型上的某个属性是引用值,它可以修改引用值里面的属性,比如father中的fortune就是个对象
原始值进行++运算最后是改不了原型上的数据,是给自己加一个属性,后代无法修改原型,修改也只是给自己添加一个属性
Object中有个方法是创建对象的第三种方法Object.create(原型)参数是个原型对象
var obj = Object.create(obj1) obj的原型就是obj1
.是最高级的数学运算符
原始值调用方法原理是包装类
自己身上加一个与原型链终端相同名的方法叫方法的重写,Number对象,Array对象都重写过toString方法并不是使用的原型链最终端的toString方法,最终端的toString方法没有什么用处,返回值并不是自己要的,Document.write()调用的就是原型上的toString方法
Call/apply可以改变this指向,任何一个函数方法都可以进行fn.call()里面可以传参,改变this指向,第一位是this指向,后面的是实参,第一个应用就是借用别人的函数实现自己的方法
Call和apply区别:传参列表不一样,call可以一个一个传参,apply必须传一个数组
继承:
- es5之前继承用的是原型来继承
- 使用构造函数call
- 两个构造函数共享原型,但是一个改另一个跟着一起改,不能给自己添加单独的属性
- 圣杯模式,内部借助一个空函数继承祖父的原型,自己继承这个空函数,然后进行new
命名空间:管理变量,防止污染全局,适用于模块化开发,其实也是个对象,现在不用这个方法了,现在使用闭包实现私有化变量,这样就不会污染全局
对象的枚举,对象的遍历使用的是for(let prop in obj)循环,自动会根据对象属性名的个数进行循环次数,对象的访问有两种方法一种是obj.prop或者obj[prop]但是[]里面支持存放变量,如果是点只能属性名,不能是变量,使用点最后系统内部会默认把obj.prop转换成obj[‘prop’]
数组也可以使用for in进行循环
任何一个对象自身都有一个方法obj.hasOwnProperty(prop) 系统自带的属性比如原型不算自己的属性obj.hasOwnProperty(prop)返回值是布尔值
in 操作符也可以用来检测一个属性是否是对象上的属性,他只能判断能不能访问到该属性,系统自带的也会算,比如继承来的原型
A instanceof B A是不是B构造出来的,原理是看A的原型链上是否有B的原型
区分数组和对象可以使用
- constructor属性
- instanceof操作符
- Object.prototype.toString.call([]/{})
This特点:4个铁定律
- 函数预编译过程中this指向window
- 全局作用域中GO也是指向window
- Call和apply会改变this指向
- 谁调用this this指向谁
Arguments实参列表
- arguments.callee表示函数自身引用
- fn.caller表示函数被谁调用,这个是函数自己的一个属性
- 在严格模式中callee和caller不能使用会报错
特殊的对象之数组,数组基本不会出现报错,怎么搞都行,数组产生,数组字面量var arr=[]
构造函数var arr = new Array()
通过var声明的变量不能使用delete删除,叫做不可配置属性