- 数字的方法
- 数学的方法
- 日期方法
- 正则的方法
- 事件对象
- 对象的所有方法
- Symbol
- Set和Map
- Proxy
- Promise
- 如何过去元素和视口的距离
- 介绍一下webpack
- es6箭头函数和普通函数的区别
- 什么是闭包,闭包有什么危害,如何解决闭包带来的危害
- 闭包的危害
- 不使用第三个变量交换值
- prototype和proto和constructor
- eventLoop
- window.requestAnimationFrame是什么
- new之后干了什么
- bind、call、apply区别
- git的使用
- 请求和响应报文
- 用什么管理软件生命周期 spasvo ALM 管理
- 作用域和作用域链
- 原型和原型链
- 浏览器输入url到页面加载发生了什么
- 移动端适配
数字的方法
方法 | 描述 |
---|---|
Number.parseFloat | 将字符串换成浮点数,和全局方法parseFloat作用一致 |
Number.parseInt | 将字符串换成整数,和全局的方法parseInt作用一致 |
Number.isFinite | 判断参数是否为有限数字 |
Number.isInteger | 判断传递的参数是否为整数 |
Number.isNaN | 判断传递的参数是否为非数字 |
Number.ISsafeInteger | 判断传递的参数是否为安全整数 |
数学的方法
方法 | 描述 |
---|---|
abs(x) | 返回数的绝对值 |
acos(x) | 返回数的反余弦值 |
ceil(x) | 向上取整 |
floor(x) | 向下取整 |
log(x) | 返回数的自然对数 |
max(x,y) | 返回xy的最高值 |
min(x,y) | 返回x和y的最低值 |
pow(x,y) | 返回x的y次幂 |
random | 返回0~1的随机数 |
roud(x) | 四舍五入 |
es6数学增加的方法
方法 | 描述 |
---|---|
trunc(x) | 去除小数部分,返回整数部分 |
sign | 判断一个属到底是正数,复数,还是零 |
cbrt | 计算一个数的立方根 |
clz32 | 将参数转为32位无符号整数,饭后返回这个32到位里面多少个0 |
imul | 返回两个数以32位带符号整数相乘形式相乘的结过,返回一个32为带符号整数 |
fround | 返回一个数的32位单精度浮点数形式 |
hypot | 返回所有参数的平方和的平方根 |
日期方法
方法 | 描述 |
---|---|
getFullYear | 获取年份 |
getTime | 返回至今的毫秒数 |
Date | 返回当日的日和时间 |
getDate | 获取本月某一天 |
getDay | 返回星期几0~6 |
getMonth | 返回月份0~11 |
getHours | 返回小时0~23 |
getMinutes | 返回分钟0~59 |
getSeconds | 返回秒数 |
getMilliseconds | 返回毫秒 |
getTimezoneOffset | 返回本地时间与格伦分钟差 |
setDate | 设置对象某一天 |
setMonth | 设置某一月份 |
setFullYear | 设置年份(四位数) |
setTime | 以毫秒设置Date对象 |
toString | 把Date对象转为字符串 |
toTimeString | 把Date对象的时间部分转换为字符串 |
toDateString | 把Date都西昂的日期部分转为字符串 |
toLocaleString | 根据本地时间格式,转换为字符串 |
toLocaleTimeString | 根据本地时间格式,把Date对象的时间部分转为字符串 |
toLocaleDateString | 根据本地格式,把Date对象的日期部分转为字符串 |
正则的方法
RegExp 对象方法
方法 | 描述 |
---|---|
compile | 编译正则表达式 |
exec | 检索字符串中指定的值,返回找到的值,并确认其位置 |
test | 检索字符串中指定的值。返回true或false |
支持正则表达式String的方法
方法 | 描述 |
---|---|
search | 检索与正则表达式相匹配的值 |
match | 找到一个或者多个正则表达式的匹配 |
replace | 替换与正则表达式匹配的字符串 |
事件对象
方法 | 描述 |
---|---|
onabort | 图像加载被中断 |
onblur | 元素失去焦点 |
onchange | 用户改变域的内容 |
onclick | 鼠标点击某个对象 |
ondbclick | 鼠标双击 |
onerror | 加载文档或图像发生某个错误 |
onfocus | 元素获得焦点 |
onkeydown | 某个键盘的键被按下 |
onkeypress | 某个键盘的键被按下或按住 |
onkeyup | 某个键盘的键被松开 |
onload | 某个页面或图像被完成加载 |
onmousedown | 某个鼠标按键被按下 |
onmousemove | 鼠标被移动 |
onmouseout | 鼠标从某元素离开 |
onmouseover | 鼠标被移动到某元素之上 |
onmouseup | 鼠标案件被松开 |
onreset | 重置按钮被点击 |
onresize | 窗口或框架被调整尺寸 |
onselect | 文本被选定 |
onsubmit | 提交按钮被点击 |
onunload | 用户退出页面 |
对象的所有方法
方法 | 描述 |
---|---|
.assign() | 将所有可枚举的自身属性的值从一个或多个源对象复制到目标对象 |
.create() | 用于指定的原型对象和属性创建一个新对象 |
.defineProperty() | 将给定描述符描述的命名属性添加到对象 |
.defineProperties() | 将给定描述符描述的命名属性添加到对象 |
.entries() | 返回一个包含[key,value]给定对象自己的可枚举字符串属性的所有对的数组 |
.freeze() | 冻结对象,其他代码无法删除或更改其属性 |
.formEntries() | 从可迭代的[key,value]返回一个新的对象 |
.getOwnPropertyDescriptor() | 返回对象的命名属性描述符 |
getOwnPropertyNames() | 返回一个数组,其中包含给定对象自己的所有可枚举和不可枚举属性的名称 |
getOwnPropertySymbols() | 返回直接在给定对象上找到所有符号属性的数组 |
.is() | 比较两个值是否相同 |
.isExtensible() | 确定是否允许扩展对象 |
.isFrozen() | 确定对象是否被冻结 |
.isSealed() | 确定对象是否密封 |
.keys() | 返回一个数组,包含给定对象所有可枚举字符串类型的名称 |
.preventExtensions() | 防止其他代码删除对象的属性 |
.seal() | 防止其他代码删除对象的属性 |
.setPrototypeOf() | 设置对象的原型 |
.values | 返回一个数组,该数组包含给定对象自己所有可枚举字符串对应的值 |
Symbol
Symbol 值通过Symbol函数生成。这就是说,对象的属性名现在可以有两种类型,一种是原来就有的字符串,另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型,就都是独一无二的,可以保证不会与其他属性名产生冲突
Set和Map
Set
ES6提供了新的数据结构Set。他类似于数组,但是成员的值都是唯一的,没有重复的值
Map
JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制,而Map的key值可以是任意属性
Proxy
Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。
Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。
Promise
用于将异步代码同步化
Promise有三种状态,pending(进行中)、fulfilled(操作已成功)、rejected(操作已失败)
一旦状态改变,就不会再改变
- .then 调用成功状态的回调函数
- .catch 调用错误状态的回调函数
- .finally 无论状态如何都会执行的操作
- .all()接受一个可迭代对象,等待多个同步或者异步任务执行完毕
- .race()接收一个可迭代对象,返回最先返回结果的
- .any()接收一个可迭代对象,只要有一个promise成功就返回成功的promise
如何过去元素和视口的距离
getBoundingClientRect返回一个对象,是一组矩形的集合,返回的值主要是left、top、bottom、right、width、height、x、y。
left是元素左边框距离视图左侧的距离
right———————-
top是元素上边框距离视图顶部的距离
bottom——————-
width 元素宽度
height 元素高度
x 元素的x轴
y 元素的y轴
介绍一下webpack
webpack是一个前端模块化打包工具,主要由入口,出口,loader,pluguns四个部分,前端的打包工具还有一个gulp,不过gulp重于前端开发的过程,而webpack侧重于模块,例如他会将css文件看作一个模块,通过css-loader将css打包成符合css的静态资源
es6箭头函数和普通函数的区别
普通function的声明在变量提升中是最高的,箭头函数没有函数提升
箭头函数没有arguments
箭头函数不能作为构造函数,不能被new,没有property
call和apply方法只有参数,没有作用域
什么是闭包,闭包有什么危害,如何解决闭包带来的危害
简单来说,闭包就是定义在函数内部的函数,因为js中存在作用域的问题,所以在函数内部定义的变量在函数外部是没有办法直接获取到,而闭包就是沟通函数内部和外部的桥梁,这样在函数外部直接可以得到函数内部的值,并且闭包可以实现函数属性和方法的私有化
闭包的危害
因为闭包会将内部变量存储在内存中,如果长时间不清除的话会造成内存泄漏的问题,影响程序的性能
解决方法:对于不使用的变量及时的清除
不使用第三个变量交换值
a=1 b=2
a = a+b //a=3
b = a-b //b=1
a = a-b //a=2
prototype和proto和constructor
什么是构造函数?
答:通过关键字new创建的函数叫做构造函数,用来创建一个对象
什么是原型prototype?
答:每一个函数都有一个prototype属性,这个属性指向一个对象,简称原型
原型有什么作用?
节约内存、扩展属性和方法、实现类的继承
proto是什么?
每一个对象都有一个proto属性,指向创建自己的哪个构造函数的原型
对象可以直接访问自己proto里面的属性和方法
constructor指向创建自己那个构造函数。
三者关系:
当我们创建一个构造函数的时候这个构造函数自带了一个prototype属性,而这个属性指向一个对象,也就是原型对象。这个原型对象里面有一个constructor构造器,它的作用是指向创建自己的构造函数。除此之外prototype还可以存放公共的属性和方法。当我们实例化一个对象的时候,这个对象自带了一个proto属性,这个proto指向创建自己的构造函数的原型对象
eventLoop
event loop是一个执行模型,在不同的地方有不同的实现.浏览器和nodejs基于不同的技术实现了各自的event loop。
浏览器的event loop具体的js代码具体流程:
- 执行全局js同步代码,这些同步代码有一些式同步语句,有一些是异步语句
- 先执行全局的同步代码,遇到异步语句会区分是微任务(microtask)还是宏任务(macrotask),并分别放入微队列和宏队列
- 待同步代码执行完毕,stack调用栈会清空
- 从微队列取出队首的任务,放入调用栈stack执行,微队列长度减一
- 继续取出队首的位置,放入stack调用栈中执行,直到把所有微任务执行完毕,此时微任务队列被清空,调用栈也为空
- 取出宏队列中位于首位的任务,放入stack中执行
- 执行完毕后,调用栈为空
- 重复3-7个步骤直到加载完毕
window.requestAnimationFrame是什么
告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行
语法:window.requestAnimationFrame(callback);
callback
下一次重绘之前更新动画帧所调用的函数(即上面所说的回调函数)。该回调函数会被传入DOMHighResTimeStamp参数,该参数与performance.now()的返回值相同,它表示requestAnimationFrame() 开始去执行回调函数的时刻。
返回值
一个 long 整数,请求 ID ,是回调列表中唯一的标识。是个非零值,没别的意义。你可以传这个值给 window.cancelAnimationFrame() 以取消回调函数。
new之后干了什么
- 创建一个空对象,空对象的proto去继承构造函数的prototype
- 属性和方法被加入到this引用对象中
- 新创建的对象由this所引用,最后隐式返回this
bind、call、apply区别
首先三者都是用来改变this指向的,他们的第一个参数都是this要指向的对象,如果有null或者
undefined则指向window,他们都可以传参,apply接收一个数组,call和bind接收参数列表,
而且bind咳哟分多次传入,bind返回一个绑定this之后的函数,而apply和call时立即执行
git的使用
git分布式管理工具下载完可以离线操作 svn是集中式管理工具必须在线操作
请求和响应报文
- 请求报文:请求行、请求头部、空行、请求数据
- 响应报文:响应行、响应头、空行、响应体
用什么管理软件生命周期 spasvo ALM 管理
- 可行性研究阶段 (定义期)
- 需求分析阶段
- 概要设计阶段 (开发期)
- 详细设计阶段
- 开发实现阶段
- 测试阶段
- 部署阶段 (部署期)
- 维护阶段
作用域和作用域链
全局作用域:在任何地方都能被访问,window对象下的内置属性都是全局作用域
函数作用域:固定代码片段中
作用域链:作用域都有上下级关系,上下级关系确定函数在哪个作用域下创建,变量取值都会在当前作用域中查找,如果没有查到就会像上级作用域查找,直到查到全局作用域,这个查找的过程叫做作用域链
原型和原型链
先说实例、构造函数和原型对象之间的关系
实例在调用方法时,如果在本身没有找到,就会在原型对象上查找,如果也没有找到,就会再向上一级原型对象查找,一直找到Object.prototype ;如果中间找到会停止查找返回该方法。如果一直没找到会返回未定义;
浏览器输入url到页面加载发生了什么
浏览器的地址栏输入URL并按下回车。
浏览器查找当前URL是否存在缓存,并比较缓存是否过期。
DNS解析URL对应的IP。根据IP建立TCP连接(三次握手)。
HTTP发起请求。服务器处理请求,浏览器接收HTTP响应。
渲染页面,构建DOM树。
关闭TCP连接(四次挥手)
移动端适配
- 百分比方案:使用百分比定义宽度高度,根据可视区域实时尺寸进行调整,尽可能适应各种分辨率,通常使用max-width/min-width控制尺寸范围过大或者过小;
- rem :rem根据根元素html的font-size计算值的倍数,根据屏幕宽度动态设置html标签的font-size,在布局的时候使用rem单位布局,达到自适应布局
- vh/vw方案 : 1vw = 视口宽度的1%,通过css预处理器把设计稿转换为vw单位,包括文本,布局,间距等。
出现的问题:在用到1px的border的时候直接使用1px